Template:Team:Aachen/Gallery
From 2014.igem.org
m |
m |
||
Line 1: | Line 1: | ||
- | + | <style type="text/css"> | |
- | + | .clear{clear:both;} | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
.carousel-container{ | .carousel-container{ | ||
Line 92: | Line 81: | ||
.active{ | .active{ | ||
background-color: #e67e22; | background-color: #e67e22; | ||
- | } | + | } |
- | + | </style> | |
- | + | ||
- | + | ||
- | <script type="text/javascript"> | + | <script type="text/javascript"> |
- | + | ||
$(".left-arrow").hide(); | $(".left-arrow").hide(); | ||
var numImgs = $('div.carousel-image-holder img').length; | var numImgs = $('div.carousel-image-holder img').length; | ||
Line 200: | Line 186: | ||
}); | }); | ||
- | |||
- | |||
- | |||
</script> | </script> | ||
+ | <script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script> | ||
- | + | ||
- | + | ||
- | + | <div class="carousel-container"> | |
- | <div | + | <div class="left-arrow"></div> |
- | <div | + | <div class="right-arrow"></div> |
- | <div | + | <div class="carousel-image-holder"> |
- | <img src="http://digitaljournal.com/img/8/7/8/4/4/i/1/1/7/o/ulingan_kids.jpg"> | + | <img src="http://digitaljournal.com/img/8/7/8/4/4/i/1/1/7/o/ulingan_kids.jpg" /> |
- | <img src="http://freethoughtblogs.com/taslima/files/2012/06/22-funny2.jpg"> | + | <img src="http://freethoughtblogs.com/taslima/files/2012/06/22-funny2.jpg" /> |
- | <img src="http://blog.metrotrends.org/wp-content/uploads/2013/09/childPoverty.jpg"> | + | <img src="http://blog.metrotrends.org/wp-content/uploads/2013/09/childPoverty.jpg" /> |
- | <img src="http://www.chinadaily.com.cn/china/images/2010WenUN/attachement/jpg/site1/20100921/0013729ece6b0e01d9691a.jpg"> | + | <img src="http://www.chinadaily.com.cn/china/images/2010WenUN/attachement/jpg/site1/20100921/0013729ece6b0e01d9691a.jpg" /> |
</div> | </div> | ||
</div> | </div> | ||
<div class="clear"></div> | <div class="clear"></div> | ||
<div class="carousel-buttons-container"> | <div class="carousel-buttons-container"> | ||
- | <ul | + | <ul> |
- | + | ||
- | + | ||
</ul> | </ul> | ||
</div> | </div> | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- |
Revision as of 00:39, 10 October 2014
<style type="text/css"> .clear{clear:both;}
.carousel-container{ width: 600px; height: 360px; float: left; margin: 0; padding: 0; position: relative; overflow: hidden; }
.right-arrow{
width: 60px;
height: 100%;
background-color: rgba(0,0,0,.5);
position: absolute;
right: 0;
margin: 0;
padding: 0;
z-index: 2;
}
.left-arrow{ width: 60px; height: 100%; background-color: rgba(0,0,0,.5); position: absolute; left: 0; margin: 0; padding: 0; z-index: 2; } .carousel-image-holder{ height:360px; width: 2400px; margin: 0; padding: 0; position: absolute; z-index: 1; }
.carousel-image-holder img{ width: 600px; float: left; margin: 0; padding: 0; display: inline-block; }
.carousel-buttons-container{ width: 600px; text-align: center; margin: 15px 0 0 0; padding: 0; }
.carousel-buttons-container ul{ list-style-type: none; margin: 0; padding: 0; }
.carousel-buttons{ background-color: #dddddd; height: 18px; width: 18px; border-radius: 50%; display: inline-block; margin: 0 10px 0 0; padding: 0; cursor: pointer; }
.carousel-buttons:last-of-type{ margin: 0; }
.active{ background-color: #e67e22; } </style>
<script type="text/javascript">
$(".left-arrow").hide();
var numImgs = $('div.carousel-image-holder img').length;
var addId = numImgs;
if(numImgs == 2){ var clicked = 0; imgCount = numImgs-2; }else if(numImgs <= 1){ $(".right-arrow").hide(); }else{ var clicked = 1; imgCount = numImgs-1; } if(numImgs > 2){ for (var i=0; i<numImgs; i++){
$("ul").prepend('<img src="" /> <img src="" /> <img src="" />
<img src="" />