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;...")
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">
 
-
 
-
$(function() {
 
-
$("#demo3").webwidget_slideshow_dot({
 
-
slideshow_time_interval: '5000',
 
-
 
-
slideshow_title_color: '#17CCCC',
 
-
soldeshow_foreColor: '#000',
 
-
directory: 'images/'
 
-
});
 
-
});
 
(function(a){
(function(a){
Line 258: Line 150:
</script>
</script>
 +
<noscript>
 +
 +
<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>
 +
</noscript>
 +
      <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">
 +
 +
$(function() {
 +
$("#demo3").webwidget_slideshow_dot({
 +
slideshow_time_interval: '5000',
 +
 +
slideshow_title_color: '#17CCCC',
 +
soldeshow_foreColor: '#000',
 +
directory: 'images/'
 +
});
 +
});
 +
</body>
</body>
</html>
</html>

Revision as of 14:32, 16 October 2014

(function(a){ a.fn.webwidget_slideshow_dot=function(p){ var p=p||{}; var m=p&&p.slideshow_time_interval?p.slideshow_time_interval:"2000"; var q=p&&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 sf=p&&p.soldeshow_foreColor?p.soldeshow_foreColor:"#000"; var stc=p&&p.slideshow_title_color?p.slideshow_title_color:"#17CCCC"; var d=p&&p.directory?p.directory:"images/"; r_temp=q/2.4; q += "px"; r += "px"; var v; var w=-1; var x=a(this); var y=x.find("ul:first").children("li").length; if(x.find("ul").length==0||x.find("li").length==0){ x.append("Require content"); return null } init(); play(); function init(){ x.find("ul:first").wrap('

'); if(x.attr("id")!="demo3") x.css("width",q).css("height",r); else x.css("width",q).css("height",r_temp); x.find(".slides_box").css("width",q).css("height",r); x.find("ul:first").width(parseInt(q)*y); x.find("ul:first").children("li").css("width",q).css("height",r); x.find("ul:first").children("li").children("a").children("img").css("width",q).css("height",r); x.find(".slides_box").after('
'); x.find(".title_thumb_box").append('
'); x.find(".title_thumb_box").append('
'); x.find(".thumb_box").append('previous'); x.find(".title_thumb_box").css("background-color",sf); for (i = 0; i <= y-1; i++) { x.find(".thumb_box").append(''+i+''); } x.find(".thumb_box").append('next'); x.find(".thumb_box").children("span").children("img").click( function(){ switch($(this).attr("class")){ case "thumb_p": previous(); break; case "thumb_num": if(parseInt($(this).attr("alt")) == 0){ w = y -1; }else{ w = parseInt($(this).attr("alt")) -1 ; } play(); break; case "thumb_n": next(); break; } } ) x.find(".thumb_box").children("span").children("img").hover( function(){ switch($(this).attr("class")){ case "thumb_p": $(this).attr("src",d+"carousel_back_hoverhit.png"); break; case "thumb_num": if(parseInt($(this).attr("alt")) != w){ $(this).attr("src",d+"carousel_circle_hoverhit.png"); } break; case "thumb_n": $(this).attr("src",d+"carousel_next_hoverhit.png"); break; } }, function(){ switch($(this).attr("class")){ case "thumb_p": $(this).attr("src",d+"carousel_back_normal.png"); break; case "thumb_num": if(parseInt($(this).attr("alt")) != w){ $(this).attr("src",d+"carousel_circle_normal.png"); } break; case "thumb_n": $(this).attr("src",d+"carousel_next_normal.png"); break; } } ); x.find(".thumb_box").children("span").click( function(){ } ); x.hover( function(){ stop(); }, function(){ v=setTimeout(play,m); } ); } function previous(){ if(w==0){ w=y-2 }else{ if(w==1){ w=y-1 }else{ w-=2 } } play() } function next(){ play() } function play(){ clearTimeout(v); w++; if(w>=y){ w=0 } x.find(".slides_box").children("ul").animate({ left:-(w*parseInt(q)) },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']").eq(w).attr("src",d+"carousel_circle_solid.png"); x.find(".title_box").html(''+x.find(".slides_box").children("ul").children("li").children("a").eq(w).attr("title")+''); v=setTimeout(play,m) } function stop(){ clearTimeout(v); } } })(jQuery);
  • slideshow_large
  • slideshow_large
  • slideshow_large
  • slideshow_large