Javascript Slideshow Code

On By Neel (Abhranil Das)In Tech

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:

  1. The image element which changes in the slideshow should have a name=”photo” attribute (used on line 17 etc. of the JavaScript).
  2. 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.
  3. 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().
  4. 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.

4 thoughts on “Javascript Slideshow Code”

  1. Unfortunately I couldn’t find any preview of the slideshow code at the Artarium website. Found lots of beautiful artwork though! Thanks for sharing your code, I’ll give it a try and see if it got the look I’m searching for my website. 🙂

    Like

    1. Thanks a lot for dropping by and your comment.
      The transitions of the pictures when you are viewing a gallery happens through the js slideshow code I wrote here.
      Unfortunately right now it’s not in a separate .js file, but inside the source code of every gallery page. I am sure you can find it there.

      Like

Comments are closed.