Team:ATOMS-Turkiye/deneme
From 2013.igem.org
Line 2: | Line 2: | ||
{{:Team:ATOMS-Turkiye/Templates/Head}} | {{:Team:ATOMS-Turkiye/Templates/Head}} | ||
- | {{: | + | <html> |
- | + | <script> | |
+ | function openPage(pg){ | ||
+ | item = $("#slideshow items").children("div").eq(pg-1); | ||
+ | content=$("#slideshow #right"); | ||
+ | content.fadeOut(200); | ||
+ | content.html(item.find("#text").html()); | ||
+ | content.fadeIn(200); | ||
+ | image = item.find("#image"); | ||
+ | image.css("position","relative"); | ||
+ | image.css("z-index","-1"); | ||
+ | imagebox = $("#slideshow").find( "#imagebox"); | ||
+ | imagebox.fadeOut(200); | ||
+ | //image.width(imagebox.width()); | ||
+ | image.height(imagebox.height()-$("#pager").height()); | ||
+ | imagebox.html(image.clone()); | ||
+ | imagebox.fadeIn(200); | ||
+ | } | ||
+ | function initSlideShow(a){ | ||
+ | items=a.children("items"); | ||
+ | items.hide(); | ||
+ | l = items.children("div").length; | ||
+ | pager = a.find("#pager"); | ||
+ | pages="<ul style='list-style:none;display:block;list-style-type: none;margin:0;padding=4;'>"; | ||
+ | for( i=1;i<=l;i++ ) | ||
+ | pages+="<li onclick='openPage("+i+");' style='display: inline;'>"+i+"</li> "; | ||
+ | pager.html(pages); | ||
+ | openPage(1); | ||
+ | } | ||
+ | $(document).ready(function(){ | ||
+ | initSlideShow( $("#slideshow") ); | ||
+ | |||
+ | }); | ||
+ | </script> | ||
+ | <div id="slideshow" style="width:50%;height:300px; | ||
+ | |||
+ | box-shadow: 0px 0px 5px 2px rgba(119, 119, 119, 0.55); | ||
+ | -moz-box-shadow: 0px 0px 5px 2px rgba(119, 119, 119, 0.55); | ||
+ | -webkit-box-shadow: 0px 0px 5px 2px rgba(119, 119, 119, 0.55);"> | ||
+ | <items> | ||
+ | <div> | ||
+ | <image id="image" src="RENDER.jpg" /> | ||
+ | <div id="text"> | ||
+ | deneme1 | ||
+ | </div> | ||
+ | </div> | ||
+ | <div> | ||
+ | <image id="image" src="bg.jpg" /> | ||
+ | <div id="text"> | ||
+ | deneme2 | ||
+ | </div> | ||
+ | </div> | ||
+ | </items> | ||
+ | <div id="left" style="position:relative;float:left;width:50%;height:100%;"> | ||
+ | <div id="imagebox" style="position:relative;text-align:center;width:100%;height:100%;z-index:-1;"> | ||
+ | image here | ||
+ | </div> | ||
+ | <div id="pager" style="position:absolute;bottom:0;width:100%;"> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <div style="float:left;width:50%;height:100%;background:#dfdfdf;"> | ||
+ | <div id="right" style="width:100%;height:100%;background:#dfdfdf;"> | ||
+ | content here | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </html> | ||
'''''PROJECT DESCRIPTION''''' | '''''PROJECT DESCRIPTION''''' | ||
Revision as of 08:55, 30 September 2013