Can you put 2 slideshows on the same page

[mcolton]

I'm using w3.css slideshow http://www.w3schools.com/w3css/w3css_slideshow.asp
I have 1 working slideshow right now.
Is there a way to put a second one on the same page.
Thanks

[jscheuer1]

Not that one.

[mcolton]

Thanks. Any suggestion for a SIMPLE slideshow with options for captions

[styxlawyer]

This is about as easy as it gets and you can have as many as you like on a single page:

http://www.dynamicdrive.com/dynamici...nslideshow.htm

The only downside I have found is that you have to hack the JavaScript code to change the background colour as it's not possible to do it in the slide show settings and any attempts I made to do it with CSS failed.

[mcolton]

Thanks. I was looking at that one too

[jscheuer1]

You can use css to change the background color:

#fadeshow1 .gallerylayer {background-color: white !important;}

Where fadeshow1 is the wrapperid configured for the slideshow. Or omit the id selector from the style declaration and it will cover all slideshows.

[styxlawyer]

Thanks John. I'll try that.

[molendijk]

The background-color is the weak point of the slideshow in more than one respect. If you want the background to be transparent, then adding background-color: transparent!important to the styles results in a NON-TRANSPARENT BLACK background, because that's the default background given in the js-file. You can solve this problem by replacing all occurrences of background:'black' in the js-file with background:'transparent', but then another problem arises. If the images of the show don't have the same (original) dimensions - they don't have to, in a responsive version of the show - then fading from a bigger image into a smaller one gives a 'jerkish' non-fluid result. You can correct this by giving the show a non-transparent background (like background-color: white!important), but that's not what you wanted in the first place.

As for the possibility of having multiple slideshows on your page (post #1), you can use the same code over and over again by using a 'multiple-iframes approach'.

[jscheuer1]

The overriding keyword !important has always worked for me, even to set the background to transparent. But you also have to set the wrapperid selector to transparent as well*, because, yep you guessed it, it's also black. But it's true that if the images are of different sizes or have their own transparent areas that differ from each other, you still have a problem. You either need a fairly major overhaul of the script or you need to give the .gallerylayers the same background as what is behind the slideshow, which if it's an image can be tricky as far as positioning it to line up goes, and if it includes other content, very tricky, if not impossible. I've set some of these up for folks with background images. It is quite tricky sometimes.

*ex:

#fadeshow1, #fadeshow1 .gallerylayer {background-color: transparent !important;}

This strategy might even be best for when you want a solid color background, as the wrapperid div will otherwise still be black and might show for a moment or two as the slideshow loads.

[molendijk]

The overriding keyword !important has always worked for me, even to set the background to transparent.

But the real problem is that, when you have made everything transparent, then image-transition is not fluid anymore when going from a larger image to a smaller one. So fluid image transition depends on non-transparency with this script.