Template:Slider

From 2014.igem.org

(Difference between revisions)
(Created page with "<html> <body> <style type="text/css"> .webwidget_slideshow_dot{ padding: 0px; margin: 0px; position: relative; font-family: Arial,Sans-Serif; font-size: 13px;...")
 
(108 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
<body>
<body>
-
<style type="text/css">
 
-
.webwidget_slideshow_dot{
 
-
    padding: 0px;
 
-
    margin: 0px;
 
-
    position: relative;
 
-
    font-family: Arial,Sans-Serif;
 
-
    font-size: 13px;
 
-
}
 
-
.webwidget_slideshow_dot a{
 
-
    text-decoration: none;
 
-
}
 
-
.webwidget_slideshow_dot a:hover{
 
-
    text-decoration: underline;
 
-
}
 
-
.webwidget_slideshow_dot .slides_box{
 
-
    padding: 0px;
 
-
    margin: 0px;
 
-
    overflow: hidden;
 
-
    position: absolute;
 
-
}
 
-
.webwidget_slideshow_dot .title_thumb_box{
 
-
    width: 100%;
 
-
    position: absolute;
 
-
    bottom: 0px;
 
-
background:none !important;
 
-
}
 
-
.webwidget_slideshow_dot .title_thumb_box .title_box{
 
-
    padding: 5px;
 
-
}
 
-
.webwidget_slideshow_dot .title_thumb_box .thumb_box{
 
-
    text-align: center;
 
-
    height: 25px;
 
-
}
 
-
.webwidget_slideshow_dot .title_thumb_box .thumb_box span{
 
-
    margin-right: 5px;
 
-
    margin-left: 5px;
 
-
}
 
-
.webwidget_slideshow_dot .title_thumb_box .thumb_box span img{
 
-
    cursor: pointer;
 
-
}
 
-
.webwidget_slideshow_dot img{
 
-
    padding: 0px;
 
-
    margin: 0px;
 
-
    border: none;
 
-
}
 
-
.webwidget_slideshow_dot ul{
 
-
    padding: 0px;
 
-
    margin: 0px;
 
-
    position: absolute;
 
-
    list-style: none;
 
-
}
 
-
.webwidget_slideshow_dot ul li{
 
-
    padding: 0px;
 
-
    margin: 0px;
 
-
    float: left;
 
-
}
 
-
.webwidget_slideshow_dot ul li a{
 
-
    display: block;
 
-
}
 
-
 
-
 
-
img.thumb_n {
 
-
float:right;
 
-
margin-right:30px;
 
-
width:4%;
 
-
}
 
-
img.thumb_p {
 
-
float:left;
 
-
margin-left:30px;
 
-
width:4%;
 
-
}
 
-
 
-
.title_thumb_box{
 
-
margin-bottom:25%;
 
-
}
 
-
 
-
#demo3 .title_thumb_box{
 
-
margin-bottom:18%;
 
-
}
 
-
#demo4 .title_thumb_box{
 
-
margin-bottom:58%;
 
-
}
 
-
 
-
img.thumb_num{display:none;}
 
-
div.title_box{display:none;}
 
-
</style>
 
-
 
-
      <div id="slider" class="webwidget_slideshow_dot" >
 
-
 
-
<ul>
 
-
<li><img src="img/img1.jpg" width="100%" height="auto" alt="slideshow_large"/></li>
 
-
<li><img src="img/img2.jpg" width="100%" height="auto" alt="slideshow_large"/></li>
 
-
<li><img src="img/img3.jpg" width="100%" height="auto" alt="slideshow_large"/></li>
 
-
<li><img src="img/img4.jpg" width="100%" height="auto" alt="slideshow_large"/></li>
 
-
</ul>
 
-
</div>
 
<script language="javascript" type="text/javascript">
<script language="javascript" type="text/javascript">
-
 
-
$(function() {
 
-
$("#demo3").webwidget_slideshow_dot({
 
-
slideshow_time_interval: '5000',
 
-
 
-
slideshow_title_color: '#17CCCC',
 
-
soldeshow_foreColor: '#000',
 
-
directory: 'images/'
 
-
});
 
-
});
 
-
 
(function(a){
(function(a){
     a.fn.webwidget_slideshow_dot=function(p){
     a.fn.webwidget_slideshow_dot=function(p){
         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 146: 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 176: 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 192: 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 243: 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 256: Line 149:
     }
     }
})(jQuery);
})(jQuery);
 +
 +
</script>
 +
 +
 +
<style type="text/css">
 +
.webwidget_slideshow_dot{
 +
    width: 490px !important;
 +
    height: 300px !important;
 +
    padding: 0px;
 +
    margin-left: 19%;
 +
    margin-right: 19%;
 +
    margin-top: 300px;
 +
    position: relative;
 +
    font-family: Arial,Sans-Serif;
 +
    font-size: 13px;
 +
    z-index: 1 ! important;
 +
}
 +
.webwidget_slideshow_dot a{
 +
    text-decoration: none;
 +
}
 +
.webwidget_slideshow_dot a:hover{
 +
    text-decoration: underline;
 +
}
 +
.webwidget_slideshow_dot .slides_box{
 +
    width: 490px !important;
 +
    height: 300px !important;
 +
    padding: 0px;
 +
    margin-top: 250px;
 +
    overflow: hidden;
 +
    position: absolute;
 +
}
 +
.webwidget_slideshow_dot .title_thumb_box{
 +
    width: 100%;
 +
    position: absolute;
 +
    bottom: 0px;
 +
    background:none !important;
 +
}
 +
.webwidget_slideshow_dot .title_thumb_box .title_box{
 +
    padding: 5px;
 +
}
 +
.webwidget_slideshow_dot .title_thumb_box .thumb_box{
 +
    text-align: center;
 +
    height: 25px;
 +
}
 +
.webwidget_slideshow_dot .title_thumb_box .thumb_box span{
 +
    margin-right: 5px;
 +
    margin-left: 5px;
 +
}
 +
.webwidget_slideshow_dot .title_thumb_box .thumb_box span img{
 +
    cursor: pointer;
 +
}
 +
.webwidget_slideshow_dot img{
 +
    padding: 0px;
 +
    margin: 0px;
 +
    border: none;
 +
}
 +
.webwidget_slideshow_dot ul{
 +
    padding: 0px;
 +
    margin: 0px;
 +
    position: absolute;
 +
    list-style: none;
 +
}
 +
.webwidget_slideshow_dot ul li{
 +
    width: 490px;
 +
    padding: 0px;
 +
    margin: 0px;
 +
    float: left;
 +
}
 +
.webwidget_slideshow_dot ul li a{
 +
    display: block;
 +
}
 +
 +
 +
img.thumb_n {
 +
float:right;
 +
margin-left: 50x;
 +
width:4%;
 +
}
 +
img.thumb_p {
 +
float:left;
 +
margin-right: 50px;
 +
width:4%;
 +
}
 +
 +
.title_thumb_box{
 +
margin-bottom: -230px;
 +
content: "fnskg";
 +
}
 +
 +
#demo3 .title_thumb_box{
 +
width: 490px !important;
 +
height: 300px !important;
 +
}
 +
 +
 +
img.thumb_num{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>
 +
 +
 +
 +
<script language="javascript" type="text/javascript">
 +
 +
$(function() {
 +
$("#demo3").webwidget_slideshow_dot({
 +
slideshow_time_interval: '5000',
 +
 +
slideshow_title_color: '#17CCCC',
 +
soldeshow_foreColor: '#000',
 +
directory: 'images/'
 +
});
 +
});
</script>
</script>

Latest revision as of 01:51, 18 October 2014

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