Template:Team:Aachen/Gallery

From 2014.igem.org

(Difference between revisions)
m
m
Line 1: Line 1:
-
<html><head>
+
<style type="text/css">
-
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+
.clear{clear:both;}
-
 
+
-
 
+
-
  <script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script>
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
  <style type="text/css">
+
-
    .clear{clear:both;}
+
.carousel-container{
.carousel-container{
Line 92: Line 81:
.active{
.active{
background-color: #e67e22;
background-color: #e67e22;
-
}
+
}
-
+
</style>
-
  </style>
+
-
 
+
-
<script type="text/javascript">//<![CDATA[
+
<script type="text/javascript">
-
$(window).load(function(){
+
$(".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>
-
</head>
+
 
-
<body>
+
 
-
  <div class="carousel-container">
+
<div class="carousel-container">
-
<div style="display: none;" class="left-arrow"></div>
+
<div class="left-arrow"></div>
-
     <div style="display: block;" class="right-arrow"></div>
+
     <div class="right-arrow"></div>
-
<div style="left: 0px;" class="carousel-image-holder">
+
<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><li class="carousel-buttons active" id="carousel1"></li><li class="carousel-buttons" id="carousel2"></li><li class="carousel-
+
<ul>
-
 
+
-
buttons" id="carousel3"></li><li class="carousel-buttons" id="carousel4"></li>
+
    
    
   </ul>   
   </ul>   
</div>
</div>
-
 
 
-
 
-
 
-
 
-
 
-
 
-
</body></html>
 

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('