<html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Image Gallery: Dissolve</title> <style type="text/css"> #trigger {position:absolute; left: 440px; top: 624px; width: 144px;} #photo-container > * { position: absolute; height: 480px; width: 640px; margin: 72 0 0 192; } #photo-container.initial .incoming { opacity: 0; -webkit-transform: translate3d(0, 0, 0); } #photo-container.initial .outgoing { opacity: 1; -webkit-transform: translate3d(0, 0, 0); } #photo-container.final .incoming { opacity: 1; -webkit-transform: translate3d(0, 0, 0); } #photo-container.final .outgoing { opacity: 0; -webkit-transform: translate3d(0, 0, 0); } #photo-container > img { -webkit-transition: -webkit-transform 1.0s; -webkit-transition-property: -webkit-transform, opacity; } </style> <script type="text/javascript"> var imageCount = 8; var imageIndex = 1; function changeImage() { document.getElementById('trigger').disabled = true; // get the photo container var photoContainer = document.getElementById('photo-container'); // assign the class of the photo container photoContainer.setAttribute('class','initial'); // set the attributes of the current image var outgoingImage = photoContainer.getElementsByTagName('img')[0]; outgoingImage.setAttribute('class','outgoing'); outgoingImage.setAttribute('id','outgoing'); // create and append a new image to the photo container // the incoming image if ( imageIndex == imageCount ) { imageIndex = 1; } else { imageIndex = imageIndex + 1; } var nextImageFilename = String(imageIndex) + ".jpg"; var incomingImage = new Image(); incomingImage.src = nextImageFilename; // assign attributes incomingImage.setAttribute('class','incoming'); incomingImage.setAttribute('id','incoming'); // attach event listener to new image so when the transition is done the cleanup handler is called incomingImage.addEventListener('webkitTransitionEnd', transitionDone, false); // insert the incoming image into the photo container photoContainer.appendChild(incomingImage); // kick off the transition by changing the class of the photo container window.setTimeout(function() { photoContainer.setAttribute('class','final'); }, 0); } function transitionDone(event) { // remove the outgoing content container var outgoingImage = document.getElementById('outgoing'); try { outgoingImage.parentNode.removeChild(outgoingImage); }catch(err){} // set the class of the photo container back to default var photoContainer = document.getElementById('photo-container'); photoContainer.removeAttribute('class'); // remove the class and id attributes from the child container setTimeout( function() { var incomingImage = photoContainer.getElementsByTagName('img')[0]; incomingImage.removeAttribute('class'); incomingImage.removeAttribute('id'); },0); document.getElementById('trigger').disabled = false; } </script> <script type="text/javascript"> var loadList = new Array(); var imageCount = 8; function addToLoadList() { loadList[loadList.length] = 1; var currentCount = loadList.length; if ( currentCount == imageCount ) { document.getElementById('trigger').value = 'NEXT IMAGE'; document.getElementById('trigger').disabled = false; loadList.length = 0; } else { document.getElementById('trigger').value = 'Loading ' + String(currentCount) + '/' + String(imageCount); } } function loadImages() { // preload images. Add these three lines for every image in your slideshow var image1 = new Image(); image1.onLoad = addToLoadList(); image1.src = "1.jpg"; var image2 = new Image(); image2.onLoad = addToLoadList(); image2.src = "2.jpg"; var image3 = new Image(); image3.onLoad = addToLoadList(); image3.src = "3.jpg"; var image4 = new Image(); image4.onLoad = addToLoadList(); image4.src = "4.jpg"; var image5 = new Image(); image5.onLoad = addToLoadList(); image5.src = "5.jpg"; var image6 = new Image(); image6.onLoad = addToLoadList(); image6.src = "6.jpg"; var image7 = new Image(); image7.onLoad = addToLoadList(); image7.src = "7.jpg"; var image8 = new Image(); image8.onLoad = addToLoadList(); image8.src = "8.jpg"; } </script> </head> <body onLoad="loadImages();"> <div id="photo-container"><img src="1.jpg"></div> <input type="button" value="Loading..." id="trigger" onclick="changeImage();" style="-webkit-user-select:none;"> <!-- <!~~ ALERTNATE METHOD: pre-load the images by adding them without showing ~~> <img src="1.jpg" width="640" height="480" style="display:none;"> <img src="2.jpg" width="640" height="480" style="display:none;"> <img src="3.jpg" width="640" height="480" style="display:none;"> <img src="4.jpg" width="640" height="480" style="display:none;"> <img src="5.jpg" width="640" height="480" style="display:none;"> <img src="6.jpg" width="640" height="480" style="display:none;"> <img src="7.jpg" width="640" height="480" style="display:none;"> <img src="8.jpg" width="640" height="480" style="display:none;"> --> </body> </html>