Dynamic Swiss Army Slideshows

[djr33]

1) Script Title: Swiss Army Slideshow

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

3) Describe problem: No problem. Trying to set the images dynamically onMouseover.

I want to dynamically change the images when a viewer of the site clicks on an image below (thumbnails).

The idea of this gallery is to show different aspects of the production of the movie I'm working on, so I want to fade through without any manual controls, something like would happen with flash. The options I have set are right. The gallery was working except that I tried to make it dynamic.

Here's my idea:

setgallery(name):
called once onLoad, blank, setting the default.
called again onMouseover from any link/image on the rest of the page (not to worry... nothing complex about setting it from within the slideshow itself, though this might not be hard, anyway.)
This function sets the slides array with the values from another array, based on the name value and on the previously set array of the same value.


Here's the code for what I have changed:

<script type="text/javascript">
//If using image buttons as controls, Set image buttons' image preload here true
//(use false for no preloading and for when using no image buttons as controls):
var preload_ctrl_images=false;
//And configure the image buttons' images here:
var previmg='left.gif';
var stopimg='stop.gif';
var playimg='play.gif';
var nextimg='right.gif';

//config for each gallery by name
var imgs = [];
imgs['test'][0] = ["test0.jpg"];
imgs['test'][1] = ["test1.jpg"];
imgs['test'][2] = ["test2.jpg"];
imgs['def'][0] = ["def0.jpg"];
imgs['def'][1] = ["def1.jpg"];

var slides=[];
function setgallery(name) {
if (name == "") {
name = "test";
}
slides = imgs[name];
//optional properties for these images:
slides.controls_top=0; //use for top controls
slides.counter=0; //use to show image count
slides.width=640; //use to set width of widest image if dimensions vary
slides.height=320; //use to set height of tallest image if dimensions vary
slides.no_auto=0; //use to make show completely user operated (no play button, starts in stopped mode)
slides.use_alt=0; //use for descriptions as images alt attributes
slides.use_title=0; //use for descriptions as images title attributes
slides.nofade=0; //use for no fade-in, fade-out effect for this show
slides.border=0; //set border width for images
slides.border_color='lightblue'; //set border color for images
slides.no_descriptions=1;
slides.random=0;
slides.no_controls=1;
};
</script>

I could put a demo page up, but there is no point as nothing happens right now. I'm sure I did something wrong in setting it and it'll be a fairly easy fix.



Also, can I remove the img loading stuff at the top since I don't want any controls at all?


Thanks, and sorry for my lack of knowledge about JS. At least I tried.



EDIT:
By the way, the three errors I get with the FF javascript console:
images.test has no properties (from above code)
imgs has no properties (from swissarmy.js)
slides has no properties (from above code)

[djr33]

Any ideas?

I don't mind doing it with another method, but what I basically need is a way, through a function call, to change the images contained in the slideshow.

[jscheuer1]

Since the script is object oriented, allowing for multiple shows on a page and because several things are done during the progression of the script that depend upon the image array and how it was when that particular show was initialized, it would probably be better to set up each array with its own show. You could then place each show in a separate div and dynamically change the display property of the container divisions. To prevent too much from going on at once, hidden shows could be put in stop mode. When they are revealed, they could be started and, even be jumped to a particular image number if desired.

To start or stop a given show (it's an on/off toggle):

iss0.gostop();

If controls are used:

iss0.gostop(iss0.go('gostp0'));

The 0 refers to the slide show instance. The first one on a page is 0, the second one is 1, then 2, and so on.

To determine if a slide show is running or not, test this:

if (iss0.playing)

[jscheuer1]

Oh, and I almost forgot. If you are needing to jump to a particular image in a particular show, you can use this:

iss0.jumper(number);

The 0 refers (as before) to the slide show instance. Replace number with a number. This will refer to the image array entry that you wish to jump to in that show.

[djr33]

That makes sense.

But is it not possible to change which images are used? I don't need different slideshows, just a way to change which images are in the specific slideshow.

This seems to be a simpler solution with less code to use.

Perhaps it isn't possible, though.

[jscheuer1]

I'm not sure it is simpler or less code. You are dealing with a multidimensional array. You could change only the image in the array*:

iss0.imgs[0][0]='some.jpg';

for instance would change the image entry for the first entry for the first show's image array on a page. However, the old value may already be temporarily 'cached' in the course of execution of the script (the script queues current/next/previous by writing out the innerHTML for the next division to be revealed while at the same time caching, if need be, the next image after that).

You could try it both ways and see which works better.



*iss0 refers to the first show on a page.
iss0.imgs refers to its array.
iss0.imgs[0] refers to its first entry which is also an array (img, description, optional entries).
iss0.imgs[0][0] refers to the first entry (the image source or URL) in this sub-array.

[djr33]

Thanks for the info.

This seems quite complex and considering I don't need multiple shows on one page or so many options, I'm going to look at some other options first then get into that if it doesn't work.

Thanks.

[jscheuer1]

Well, sometimes things seem a little more complex than they are when you are just talking about it. Experimentation will usually cut through that. If you get a demo (working or not) together, I would be happy to have a look at it.

[djr33]

Thanks.


With Tech_Support's help, I now have a working page, though it's not using the Swiss Army Slideshow.

http://truthandliesmovie.com/gallery/

It works basically the same way, but the fade is less smooth. Any ideas there?

[jscheuer1]

The way to smooth a transition is to play with the values. Like, if it repeats every 90 milliseconds and changes 10 degrees of opacity each time, try it with repeating every 45 milliseconds and changing only 5 degrees each time.

BTW, it looked pretty smooth to me in Opera. Also, FF is notorious for not doing things like that very smoothly.