Template:Team:Aachen/Gallery

From 2014.igem.org

Revision as of 00:39, 10 October 2014 by Mosthege (Talk | contribs)

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