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