Tags
artarium, code, html, image, javascript, slide, slideshow, transition
I prefer writing all my web-design code from scratch. So I use only text editors to write HTML directly, and raw JavaScript (no jQuery etc). While working on a javascript slideshow for Artarium, I came across a lot of problems in transitioning the images. My javascript was changing the src for the image, but I needed to also resize it to the dimensions of the new image before displaying it. Finally, after a lot of time, effort and fruitless migrations to online tutorials and troubleshooters, I came up with the exact configuration that works. On a transition the image disappears, resizes, then reappears. In between this, if the next image takes too long to load, you could display some loading animation, as I did. Just put an animated gif there permanently with a lower z-index than the photo. This will cause it to show between transitions. For the transitions itself you could use a CSS3 transition of opacity as I did and not have to worry about further code for transition effects.
Here is the JavaScript code with some explanatory comments. I have added a preloading function and keyboard navigation. I have not explained everything in detail as I have assumed the user will have standard web-designing experience, in which case this should very well suffice.
JavaScript:
function keyNavigate(e) //to enable slideshow navigation using right and left arrow keys
{
if(e.which==39)
pre_next();
else if (e.which==37)
pre_previous();
}
var i=0,imax=n; //put the # of slideshow images as n here
function imagearray() //prepares things on page load and starts preloading images
{
preloader=new Image()
var j=0;
captions = new Array();
captions = ['caption1', 'caption2', ... 'caption n'];
document.photo.src="directory/photo1.jpg"; //assumes photos are in 'directory'
document.getElementById('navigation-count').innerHTML="0/"+(imax); //sets slide number
for(j=1; j {
filename="directory/photo"+j+".jpg"; //assumes photos are 'photo1.jpg', 'photo2.jpg' etc
preloader.src=filename;
}
}
var imgHeight;
var imgWidth;
var newImg;
function resize() //to resize as image changes
{
imgHeight = this.height;
imgWidth = this.width;
if (imgWidth/imgHeight < 2.25) //any desired criterion
{
document.photo.style.height='355px'; //or whatever else
}
else
{
document.photo.style.width="95%";
}
document.photo.style.opacity=1; //photo appears only after it has been resized
document.getElementById('caption').innerHTML=captions[i-1]; //caption changes
document.getElementById('caption').style.opacity=1; //caption appears
document.getElementById('navigation-count').innerHTML=(i)+"/"+(imax); //slide count changes
return true;
}
function pre_next() //to ensure resizing occurs after picture disappears
{
document.photo.style.opacity=0;
document.getElementById('caption').style.opacity=0;
setTimeout("next()",500);
}
function next()
{
if (i==imax)
{i=0;}
i++;
newImg=new Image();
newImg.src="directory/photo"+i+".jpg";
document.photo.src=newImg.src;
newImg.onload = resize; //resize function is called
}
function pre_previous()
{
document.photo.style.opacity=0;
document.getElementById('caption').style.opacity=0;
setTimeout("previous()",500);
}
function previous()
{
if (i==1)
{i=imax+1;}
i--;
newImg=new Image();
newImg.src="directory/photo"+i+".jpg";
document.photo.src=newImg.src;
newImg.onload = resize;
}
This JavaScript alone does not suffice. Here’s some things you need to do with the HTML for this to work:
- The image element which changes in the slideshow should have a name=”photo” attribute (used on line 17 etc. of the JavaScript).
- Add <body onload = “imagearray(), next()” onkeydown=”keyNavigate(event)”> to the HTML body. The next() is required to display the first photo and initialize the caption and slide count.
- The slide transition occurs by pre_next() and pre_previous() functions. So any event that you want will trigger a transition should call these functions (as used in the keyboard navigation part), not next() or previous().
- The ‘caption’ div in the HTML holds the caption, while the ‘navigation-count’ div holds the slide number. Place them as you require.
You can find this code at work in any gallery at Artarium, unless I change it in the future. If you hit a block using this code, there’s nothing a couple of Google searches won’t clear for you. If there’s a problem that persists even after you have done your research thoroughly, leave a comment (be specific) with your e-mail and I promise to try to help.
