JavaScript Forum

**Burnsie** · 02-12-2010, 08:29 AM

Hi all
I am after something quite specific that I have been (as yet) unable to find!

I was hoping to place a small slideshow on a page (this is not a stand alone show I just want it as a page feature). When the page loads it displays a random picture from a folder but then I would like to be able to move sequentialy through the folder via 'forward' and 'back' buttons.
So if the initial picture loaded is 'picture 5' i would like to go on to 6, 7, 8 or back 4, 3 2. Also I would like it to loop.
There are masses of codes out there that provide random images or sequential slideshows with a myriad of features but I can't find one that does this. (I did find one but it doesn't provide the code to place on the page that displays the slideshow and I couldn't work it out!)

As always thanks in advance

Burnsie

**chrishirst** · 02-12-2010, 10:09 AM

Javascript cannot choose the images from a folder, it would need server side code to do that.

**Burnsie** · 02-14-2010, 10:49 AM

Hi
I have this script (thanks Brandon Burkett), which allows me to cycle through a folder of images. It should also start from a randomly selected image. However, I can't get that bit to work as I can't work out what code is required in my html. I guess it needs to go in the src="" part of the img tag!
Here is my code:

var rotate =
{
// class attributes/properties
image_url: new Array(),
arrayLength: null,

changeImage: function(type)
{
// fade current image out

$('#currentImage').animate({ width: 1, opacity: 0.1}, 'slow', function()
{
var thisNum = parseInt($('#currentImage').attr('alt').replace(/Image Number /g,''));
var newImageId = 0;

if(type == 'prev')
{
// determine next image

newImageId = (thisNum > 0) ? (thisNum-1) : rotate.arrayLength;
}
else
{
// determine next image
newImageId = (thisNum < rotate.arrayLength) ? (thisNum+1) : 0;
}

// force image to load

var nextImage = new Image();
nextImage.src = rotate.image_url[newImageId];

if(nextImage.complete)
{
// fade new image in
$('#currentImage').attr('src', rotate.image_url[newImageId]).attr('alt', 'Image Number '+newImageId);
$('#currentImage').animate({width: 500, opacity: 1}, 'slow');
}
else

{
nextImage.onload = function()
{
// fade new image in
$('#currentImage').attr('src',rotate.image_url[newImageId]).attr('alt', 'Image Number '+newImageId);
$('#currentImage').animate({width: 500, opacity: 1}, 'slow');
}
}
});
},

// initalizer method

init: function()
{
rotate.image_url[0] = 'images/image_01.jpg';
rotate.image_url[1] = 'images/image_02.jpg';
rotate.image_url[2] = 'images/image_03.jpg';
rotate.image_url[3] = 'images/image_04.jpg';
rotate.image_url[4] = 'images/image_05.jpg';

// store array length - 1
rotate.arrayLength = rotate.image_url.length;
rotate.arrayLength -= 1;

// add event next / previous divs

$('#previous').bind('click', function() { rotate.changeImage('prev'); });
$('#next').bind('click', function() { rotate.changeImage('next'); });

// add background images to divs if js enabled

$('#previous').html('<img src="images/minus.gif" alt="Previous Image" />');
$('#next').html('<img src="images/plus.gif" alt="Next Image" />');
}
}

$(document).ready( function(){ rotate.init() });

Here is my code in my body tag;

<BODY>
<DIV id=container>
<DIV class=image><IMG id=currentImage alt="Image" src="" width=124 height=35></DIV>
<DIV id=infoContainer>
<DIV id=previous class=imgLeft onClick=""><IMG alt="Previous Image" src="images/minus.gif"></DIV>
<DIV id=next class=imgRight ><IMG alt="Next Image" src="images/plus.gif"></DIV>
</DIV>
</DIV>
</BODY>

Im pretty certain the script works I think I am just missing something quite basic. Oh! the script has a weird swooshing fade in/out feature when loading the new image, does anyone know how to remove this?

cheers

**chrishirst** · 02-14-2010, 11:14 AM

Quote:

Oh! the script has a weird swooshing fade in/out feature when loading the new image, does anyone know how to remove this?

At a guess it's probably it will be something to do with the sections of code that start with

Code:

// fade current image out

And

Code:

// fade new image in