PDA

View Full Version : Swiss Army slideshow - multiple image sets



Grafixation
03-08-2009, 06:57 PM
1) Script Title: Swiss Army Image Slideshow

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/swissarmy/index.htm

3) Describe problem: I've downloaded and configured the Swiss Army slideshow routine and it works very well indeed - many thanks for your work. What I'm trying to acheive is this: I have several sets of images (each one based on a common theme) and I'd like to have a row of thumbnails/links above the Swiss Army container which allows the visitor to choose a set to view. Each one needs to display in the same single Swiss Army container below.
All the images in all the sets are the same size, 640 x 480. I'm using the slide3 option with the back/play/next buttons below the images. I can't show you my code at this point because I haven't published it yet - it's working well with one set of pictures though.
I know some Javascript but I don't want to start hacking the code if there's a simple solution.

Thanks in advance for any suggestions.
Mo

jscheuer1
03-09-2009, 12:06 PM
You can swap the image sets, but the results are unpredictable. Since the script already allows for multiple slide shows on a page, you could just make all but the one you want the user to see display none.

Grafixation
03-09-2009, 02:20 PM
Thank you John, I'll try that.

jscheuer1
03-09-2009, 03:34 PM
If you go down that road, all of the shows should start in stopped mode as in the third demo (slides3) on the demo page does. Since this is the one you say you are using, that much should be fine. However, it would also be a good idea to stop each show when it becomes display none because otherwise, unless it's images are already loaded, odd things may happen in some browsers. There could be competition over incremental preloading, or a lack of it. The first will bog down the displaying show, the second could result in images displayed incorrectly or as missing image tokens.

Each slide show is represented in the iss array by a number corresponding to the order in which it appears in the page's source code:


iss[0]

would be the first slide show.

To stop it, use this code:


if(iss[0].playing)
iss[0].gostop(document.getElementById('gostp0'));

Or, to stop any show by its number:


function stopShow(n){
if(iss[n].playing)
iss[n].gostop(document.getElementById('gostp' + n));
}

Usage:


stopShow(0);

Grafixation
03-11-2009, 11:40 PM
Thank you John, you are a star. I'll take your input on board tomorrow when I carry on with the development and I'll be happy to share the results with this community.

I only have 1 page that uses your Javascript, the rest of the site doesn't need it. I'm using Dreamweaver this time so I can slot it into the template if needed.

I have 12 image sets and have already put the parameters at the start of the swissarmy.js rather than in the <head><script> of the HTML.

I wrote a loop that changes the clicked thumbnail make the show# div style "visibility:block" and the rest "visibility:hidden" as you suggested. Thanks.


function sw(x,z)
{
document.getElementById(x).style.display='block';
for (var y = 1; y < numshow; y++)
{
if (y != z)
{
document.getElementById('show'+y).style.display='none';
}
}
}

x is "show#" and z is just the #, so passed parameters are onclick="sw('show1','1')" or onclick="sw('show2','2')" etc.
I'm sure there's a subtle way of doing this but it ain't broken so far.

I also have common parameters for the 12 image sets (size, buttons, etc.) and I put those into a Javascript {if} loop which saves having 12 sets of slides#.parameter=#;

I've only uploaded a test to a web server and took it back down because the load was so slow but I'm still dabbling and, so far, so good.

Let me digest your input and get back to you with queries or - possibly - an addition to the script if you would allow me to be so bold.

PS. </script></head> :D