Template:Slider

From 2014.igem.org

(Difference between revisions)
 
(101 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
<body>
<body>
 +
<script language="javascript" type="text/javascript">
<script language="javascript" type="text/javascript">
(function(a){
(function(a){
Line 6: Line 7:
         var p=p||{};
         var p=p||{};
-
         var m=p&&p.slideshow_time_interval?p.slideshow_time_interval:"2000";
+
         var m=p.slideshow_time_interval?p.slideshow_time_interval:"2000";
-
         var q=p&&p.slideshow_window_width?p.slideshow_window_width:$("body").width();
+
         var q=p.slideshow_window_width?p.slideshow_window_width:$("body").width();
-
         var r=p&&p.slideshow_window_height?p.slideshow_window_height:$("body").width()/1.58;
+
         var r=p.slideshow_window_height?p.slideshow_window_height:$("body").width()/0.5;
-
         var sf=p&&p.soldeshow_foreColor?p.soldeshow_foreColor:"#000";
+
         var sf=p.soldeshow_foreColor?p.soldeshow_foreColor:"#000";
-
         var stc=p&&p.slideshow_title_color?p.slideshow_title_color:"#17CCCC";
+
         var stc=p.slideshow_title_color?p.slideshow_title_color:"#17CCCC";
-
         var d=p&&p.directory?p.directory:"images/";
+
         var d=p.directory?p.directory:"images/";
r_temp=q/2.4;
r_temp=q/2.4;
q += "px";
q += "px";
Line 38: 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="'+d+'carousel_back_normal.png" alt="previous"  class="thumb_p"/></span>');
+
             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="'+d+'carousel_circle_normal.png" class="thumb_num" alt="'+i+'" /></span>');
+
                 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="'+d+'carousel_next_normal.png" alt="next"  class="thumb_n"/></span>');
+
             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 68: Line 69:
                 function(){
                 function(){
                     switch($(this).attr("class")){
                     switch($(this).attr("class")){
-
                         case "thumb_p":
+
                         case "thumb_p":ca
-
                             $(this).attr("src",d+"carousel_back_hoverhit.png");
+
                             $(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",d+"carousel_circle_hoverhit.png");
+
                                 $(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",d+"carousel_next_hoverhit.png");
+
                             $(this).attr("src","https://static.igem.org/mediawiki/2014/9/97/Arrow_r.png");
                             break;
                             break;
                     }
                     }
Line 84: Line 85:
                     switch($(this).attr("class")){
                     switch($(this).attr("class")){
                         case "thumb_p":
                         case "thumb_p":
-
                             $(this).attr("src",d+"carousel_back_normal.png");
+
                             $(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",d+"carousel_circle_normal.png");
+
                                 $(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",d+"carousel_next_normal.png");
+
                             $(this).attr("src","https://static.igem.org/mediawiki/2014/9/97/Arrow_r.png");
                             break;
                             break;
                     }
                     }
Line 135: 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+"carousel_circle_normal.png");
+
             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+"carousel_circle_solid.png");
+
             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 150: Line 151:
</script>
</script>
-
<noscript>
+
 
<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: 0px;
+
     margin-left: 19%;
 +
    margin-right: 19%;
 +
    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: 4 ! important;
+
     z-index: 1 ! important;
}
}
.webwidget_slideshow_dot a{
.webwidget_slideshow_dot a{
Line 168: Line 173:
}
}
.webwidget_slideshow_dot .slides_box{
.webwidget_slideshow_dot .slides_box{
 +
    width: 490px !important;
 +
    height: 300px !important;
     padding: 0px;
     padding: 0px;
-
     margin: 0px;
+
     margin-top: 250px;
     overflow: hidden;
     overflow: hidden;
     position: absolute;
     position: absolute;
Line 177: Line 184:
     position: absolute;
     position: absolute;
     bottom: 0px;
     bottom: 0px;
-
background:none !important;
+
    background:none !important;
}
}
.webwidget_slideshow_dot .title_thumb_box .title_box{
.webwidget_slideshow_dot .title_thumb_box .title_box{
Line 205: Line 212:
}
}
.webwidget_slideshow_dot ul li{
.webwidget_slideshow_dot ul li{
 +
    width: 490px;
     padding: 0px;
     padding: 0px;
     margin: 0px;
     margin: 0px;
Line 216: Line 224:
img.thumb_n {
img.thumb_n {
float:right;
float:right;
-
margin-right:30px;
+
margin-left: 50x;
width:4%;
width:4%;
}
}
img.thumb_p {
img.thumb_p {
float:left;
float:left;
-
margin-left:30px;
+
margin-right: 50px;
width:4%;
width:4%;
}
}
.title_thumb_box{
.title_thumb_box{
-
margin-bottom:25%;
+
margin-bottom: -230px;
 +
content: "fnskg";
}
}
#demo3 .title_thumb_box{
#demo3 .title_thumb_box{
-
margin-bottom:18%;
+
width: 490px !important;
-
}
+
height: 300px !important;
-
#demo4 .title_thumb_box{
+
-
margin-bottom:58%;
+
}
}
 +
img.thumb_num{display:none;}
img.thumb_num{display:none;}
div.title_box{display:none;}
div.title_box{display:none;}
 +
 +
.slides_box{
 +
padding: 0;
 +
width:490px !important;
 +
height:490px !important;
 +
}
 +
 +
.slidex_box ul{
 +
width:490px !important;
 +
height:490px !important;
 +
}
 +
 +
.slidex_box ul li{
 +
width:490px !important;
 +
height:490px !important;
 +
}
</style>
</style>
-
</noscript>
+
 
-
      <div id="slider" class="webwidget_slideshow_dot" >
+
 
-
+
-
<ul>
+
-
<li><img src="img/img1.jpg" width="50%" height="auto" alt="slideshow_large"/></li>
+
-
                                <li><img src="img/img2.jpg" width="50%" height="auto" alt="slideshow_large"/></li>
+
-
</ul>
+
-
</div>
+
<script language="javascript" type="text/javascript">
<script language="javascript" type="text/javascript">
$(function() {
$(function() {
-
$("#slider").webwidget_slideshow_dot({
+
$("#demo3").webwidget_slideshow_dot({
slideshow_time_interval: '5000',
slideshow_time_interval: '5000',
Line 261: Line 279:
</script>
</script>
 +
</body>
</body>
</html>
</html>

Latest revision as of 01:51, 18 October 2014

Retrieved from "http://2014.igem.org/Template:Slider"