"

From 2014.igem.org

var ul; var liItems; var imageNumber; var imageWidth; var prev, next; var currentPosition = 0; var currentImage = 0;

function init() { ul = document.getElementById("image_gallery"); liItems = ul.children; imageNumber = liItems.length; imageWidth = liItems[0].children[0].clientWidth; ul.style.width = parseInt(imageWidth * imageNumber) + "px"; prev = document.getElementById("previous"); next = document.getElementById("next"); generatePager(imageNumber); prev.onclick = function() {onClickPrev();}; next.onclick = function() {onClickNext();}; }

function animate(opts){ var start = new Date(); var id = setInterval(function(){ var timePassed = new Date() - start; var progress = timePassed / opts.duration; if (progress > 1){ progress = 1; } var delta = opts.delta(progress); opts.step(delta); if (progress == 1){ clearInterval(id); opts.callback(); } }, opts.delay || 17); }

function slideTo(imageToGo){ var direction; var numOfImageToGo = Math.abs(imageToGo - currentImage);

direction = currentImage > imageToGo ? 1 : -1; currentPosition = -1 * currentImage * imageWidth; var opts = { duration: 300, delta: function(p) {return p;}, step:function(delta) { ul.style.marginLeft = parseInt(currentPosition + direction * delta * imageWidth * numOfImageToGo) + "px"; }, callback:function(){currentImage = imageToGo;} }; animate(opts); }

function onClickPrev(){ if (currentImage === 0){ slideTo(imageNumber - 1); } else { slideTo(currentImage - 1); } }

function onClickNext(){ if (currentImage == imageNumber - 1){ slideTo(0); } else{ slideTo(currentImage + 1); } }

function generatePager(imageNumber){ var pageNumber; var pagerDiv = document.getElementById("pager"); var pagerText = ['Welcome','The Problem','The Solution','The Project']//Length = number of images for (var i = 0; i < imageNumber; i++){ var li = document.createElement("li"); pageNumber = document.createTextNode(pagerText[i]); li.appendChild(pageNumber); pagerDiv.appendChild(li); li.onclick = function(i){ return function(){ slideTo(i);

                               var pagerUl = document.getElementById("pager"); /////////////////
                               var children = pagerUl.children;

                               //children[0].style.color = "#ff0000";

} }(i); } var computedStyle = document.defaultView.getComputedStyle(li,null); var liWidth = parseInt(li.offsetWidth); var liMargin = parseInt(computedStyle.margin.replace("px","")); pagerDiv.style.width = parseInt((liWidth + liMargin * 2) * imageNumber) + "px"; }

window.onload = init;