Template:Slider
From 2014.igem.org
(Difference between revisions)
(46 intermediate revisions not shown) | |||
Line 39: | Line 39: | ||
x.find(".title_thumb_box").append('<div class="title_box"></div>'); | x.find(".title_thumb_box").append('<div class="title_box"></div>'); | ||
x.find(".title_thumb_box").append('<div class="thumb_box"></div>'); | x.find(".title_thumb_box").append('<div class="thumb_box"></div>'); | ||
- | x.find(".thumb_box").append('<span><img src=" | + | x.find(".thumb_box").append('<span><img src="https://static.igem.org/mediawiki/2014/9/91/Arrow_l.png" alt="previous" class="thumb_p"/></span>'); |
x.find(".title_thumb_box").css("background-color",sf); | x.find(".title_thumb_box").css("background-color",sf); | ||
for (i = 0; i <= y-1; i++) | for (i = 0; i <= y-1; i++) | ||
{ | { | ||
- | x.find(".thumb_box").append('<span><img src=" | + | x.find(".thumb_box").append('<span><img src="https://static.igem.org/mediawiki/2014/c/c1/Carousel_circle_normal.png" class="thumb_num" alt="'+i+'" /></span>'); |
} | } | ||
- | x.find(".thumb_box").append('<span><img src=" | + | x.find(".thumb_box").append('<span><img src="https://static.igem.org/mediawiki/2014/9/97/Arrow_r.png" alt="next" class="thumb_n"/></span>'); |
x.find(".thumb_box").children("span").children("img").click( | x.find(".thumb_box").children("span").children("img").click( | ||
function(){ | function(){ | ||
Line 69: | Line 69: | ||
function(){ | function(){ | ||
switch($(this).attr("class")){ | switch($(this).attr("class")){ | ||
- | case "thumb_p": | + | case "thumb_p":ca |
- | $(this).attr("src", | + | $(this).attr("src","https://static.igem.org/mediawiki/2014/9/91/Arrow_l.png"); |
break; | break; | ||
case "thumb_num": | case "thumb_num": | ||
if(parseInt($(this).attr("alt")) != w){ | if(parseInt($(this).attr("alt")) != w){ | ||
- | $(this).attr("src", | + | $(this).attr("src","https://static.igem.org/mediawiki/2014/2/28/Carousel_circle_hoverhit.png"); |
} | } | ||
break; | break; | ||
case "thumb_n": | case "thumb_n": | ||
- | $(this).attr("src", | + | $(this).attr("src","https://static.igem.org/mediawiki/2014/9/97/Arrow_r.png"); |
break; | break; | ||
} | } | ||
Line 85: | Line 85: | ||
switch($(this).attr("class")){ | switch($(this).attr("class")){ | ||
case "thumb_p": | case "thumb_p": | ||
- | $(this).attr("src", | + | $(this).attr("src","https://static.igem.org/mediawiki/2014/9/91/Arrow_l.png"); |
break; | break; | ||
case "thumb_num": | case "thumb_num": | ||
if(parseInt($(this).attr("alt")) != w){ | if(parseInt($(this).attr("alt")) != w){ | ||
- | $(this).attr("src", | + | $(this).attr("src","https://static.igem.org/mediawiki/2014/c/c1/Carousel_circle_normal.png"); |
} | } | ||
break; | break; | ||
case "thumb_n": | case "thumb_n": | ||
- | $(this).attr("src", | + | $(this).attr("src","https://static.igem.org/mediawiki/2014/9/97/Arrow_r.png"); |
break; | break; | ||
} | } | ||
Line 136: | Line 136: | ||
left:-(w*parseInt(q)) | left:-(w*parseInt(q)) | ||
},600); | },600); | ||
- | x.find(".thumb_box").children("span").children("img[class='thumb_num']").attr("src",d+" | + | x.find(".thumb_box").children("span").children("img[class='thumb_num']").attr("src",d+"https://static.igem.org/mediawiki/2014/c/c1/Carousel_circle_normal.png"); |
- | x.find(".thumb_box").children("span").children("img[class='thumb_num']").eq(w).attr("src",d+" | + | x.find(".thumb_box").children("span").children("img[class='thumb_num']").eq(w).attr("src",d+"https://static.igem.org/mediawiki/2014/c/c4/Carousel_circle_solid.png"); |
x.find(".title_box").html('<a href="'+x.find(".slides_box").children("ul").children("li").children("a").eq(w).attr("href")+'" style="color:'+stc+'">'+x.find(".slides_box").children("ul").children("li").children("a").eq(w).attr("title")+'</a>'); | x.find(".title_box").html('<a href="'+x.find(".slides_box").children("ul").children("li").children("a").eq(w).attr("href")+'" style="color:'+stc+'">'+x.find(".slides_box").children("ul").children("li").children("a").eq(w).attr("title")+'</a>'); | ||
Line 151: | Line 151: | ||
</script> | </script> | ||
- | |||
- | |||
<style type="text/css"> | <style type="text/css"> | ||
.webwidget_slideshow_dot{ | .webwidget_slideshow_dot{ | ||
+ | width: 490px !important; | ||
+ | height: 300px !important; | ||
padding: 0px; | padding: 0px; | ||
margin-left: 19%; | margin-left: 19%; | ||
margin-right: 19%; | margin-right: 19%; | ||
- | margin-top: | + | margin-top: 300px; |
position: relative; | position: relative; | ||
font-family: Arial,Sans-Serif; | font-family: Arial,Sans-Serif; | ||
font-size: 13px; | font-size: 13px; | ||
- | z-index: | + | z-index: 1 ! important; |
- | + | ||
} | } | ||
.webwidget_slideshow_dot a{ | .webwidget_slideshow_dot a{ | ||
Line 174: | Line 173: | ||
} | } | ||
.webwidget_slideshow_dot .slides_box{ | .webwidget_slideshow_dot .slides_box{ | ||
+ | width: 490px !important; | ||
+ | height: 300px !important; | ||
padding: 0px; | padding: 0px; | ||
margin-top: 250px; | margin-top: 250px; | ||
Line 211: | Line 212: | ||
} | } | ||
.webwidget_slideshow_dot ul li{ | .webwidget_slideshow_dot ul li{ | ||
- | width: | + | width: 490px; |
padding: 0px; | padding: 0px; | ||
margin: 0px; | margin: 0px; | ||
Line 223: | Line 224: | ||
img.thumb_n { | img.thumb_n { | ||
float:right; | float:right; | ||
- | margin- | + | margin-left: 50x; |
width:4%; | width:4%; | ||
} | } | ||
img.thumb_p { | img.thumb_p { | ||
float:left; | float:left; | ||
- | margin- | + | margin-right: 50px; |
width:4%; | width:4%; | ||
} | } | ||
.title_thumb_box{ | .title_thumb_box{ | ||
- | margin-bottom: | + | margin-bottom: -230px; |
+ | content: "fnskg"; | ||
} | } | ||
#demo3 .title_thumb_box{ | #demo3 .title_thumb_box{ | ||
- | + | width: 490px !important; | |
+ | height: 300px !important; | ||
} | } | ||
Line 245: | Line 248: | ||
.slides_box{ | .slides_box{ | ||
- | width: | + | padding: 0; |
- | height: | + | width:490px !important; |
+ | height:490px !important; | ||
} | } | ||
.slidex_box ul{ | .slidex_box ul{ | ||
- | width: | + | width:490px !important; |
- | height: | + | height:490px !important; |
} | } | ||
.slidex_box ul li{ | .slidex_box ul li{ | ||
- | width: | + | width:490px !important; |
- | height: | + | height:490px !important; |
} | } | ||
</style> | </style> |
Latest revision as of 01:51, 18 October 2014