Log in

View Full Version : Ultimate Fade-in slideshow (v2.6) - can't work multiple page slideshows


seanie_morris
03-11-2016, 11:41 AM
I know that this one is going to hit me like a tonne of bricks, but for now, I am stumped.

I want to use the slideshow on multiple pages, each page with its own set of images. In my index.php page, I have the following code in the <head> (I will portray this using just 2 pages as an example to not fill this post with code):


#fadeshow-breakfast #fadeshow-lunch .gallerylayer img{
width: 100%;
height: auto;
}

@media screen and (max-width: 860px){ /* when document is 860px or less */
#fadeshow-breakfast #fadeshow-lunch {
height: auto;
}
}

@media screen and (max-width: 600px){ /* when document is 600px or less */
#fadeshow-breakfast #fadeshow-lunch {
height: auto;
}
}

@media screen and (max-width: 480px){ /* when document is 480px or less */
#fadeshow-breakfast #fadeshow-lunch {
height: auto;
}
}

</style>

<script type="text/javascript" src="http://www.sitename.com/fadeslideshow/fadeslideshow.js">
</script>

<script type="text/javascript">
var mygallery=new fadeSlideShow({
wrapperid: "fadeshow-breakfast", //ID of blank DIV on page to house Slideshow
dimensions: ['100%', 330], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://www.sitename.com/media/fade-breakfast1.jpg"],
["http://www.sitename.com/media/fade-breakfast2.jpg"],
["http://www.sitename.com/media/fade-breakfast3.jpg"],
["http://www.sitename.com/media/fade-breakfast4.jpg"] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:5000, cycles:0, wraparound:true},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
})
</script>

<script type="text/javascript">
var mygallery2=new fadeSlideShow({
wrapperid: "fadeshow-lunch", //ID of blank DIV on page to house Slideshow
dimensions: ['100%', 330], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://www.sitename.com/media/fade-lunch1.jpg"],
["http://www.sitename.com/media/fade-lunch2.jpg"],
["http://www.sitename.com/media/fade-lunch3.jpg"],
["http://www.sitename.com/media/fade-lunch4.jpg"] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:5000, cycles:0, wraparound:true},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
})
</script>

Then, I insert the only bit of code needed in a div, as follows:
page 1 (Breakfast) I use
<div id="fadeshow-breakfast"></div>
page 2 (Lunch) I use
<div id="fadeshow-lunch"></div>

There are 8 pages in this manner, however, the slideshow only works in the Breakfast page. In each instance in the <head> code in index.php, I have tried var mygallery=new fadeSlideShow and var mygalleryX=new fadeSlideShow where X is a sequential instance number (1 to 8), but to no avail.

The only change I made to fadeslideshow.js was to remove the black background.

Can anyone help please?


Regards,

Seanie.
jscheuer1
03-11-2016, 06:42 PM
You're not getting the alert about the missing wrapper division? Or did you also edit that out? Unless you did take that out there's an error like a missing script, or some syntax problem so great, we never get to it (the alert).

All I can tell you for sure from what you have presented here is that it's not the ideal way to go about it. You should only create an instance (new fadeSlideShow) of a slideshow on a page if you are going to use it on that page. You can make up all the properties in a global file and then only make an instance out of the one you want on a particular page, like:


var breakfastshow = {
wrapperid: "fadeshow-breakfast", //ID of blank DIV on page to house Slideshow
dimensions: ['100%', 330], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://www.sitename.com/media/fade-breakfast1.jpg"],
["http://www.sitename.com/media/fade-breakfast2.jpg"],
["http://www.sitename.com/media/fade-breakfast3.jpg"],
["http://www.sitename.com/media/fade-breakfast4.jpg"] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:5000, cycles:0, wraparound:true},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
};
var lunchshow = {
wrapperid: "fadeshow-lunch", //ID of blank DIV on page to house Slideshow
dimensions: ['100%', 330], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://www.sitename.com/media/fade-lunch1.jpg"],
["http://www.sitename.com/media/fade-lunch2.jpg"],
["http://www.sitename.com/media/fade-lunch3.jpg"],
["http://www.sitename.com/media/fade-lunch4.jpg"] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:5000, cycles:0, wraparound:true},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
};


The above script, jQuery and the fadesliseshow.js could be available to all pages. Now these (above) only represent the properties for each potential show, nothing has been set in motion (no instance has been created). Then on a given page you could have (inside script tags):


var mygallery = new fadeSlideShow(breakfastshow);

or:


var mygallery = new fadeSlideShow(lunchshow);

With PHP only supplying the highlighted, and of course the desired wrapper division in the HTML part of the page for that show.

But, regardless of how you work it out, between PHP and javascript and several instances of that script being used on several pages, there are many workable, and unworkable ways to do it. And one mistake can often male a workable method do nothing. The only way to really troubleshoot problems is to look at the live page(s).

So, if you want more help, please link us to the problem page(s) so we can check them out.
seanie_morris
03-16-2016, 10:39 AM
You're not getting the alert about the missing wrapper division? Or did you also edit that out? Unless you did take that out there's an error like a missing script, or some syntax problem so great, we never get to it (the alert).

Thanks for getting back to me.

I put back in the error alert in fadeslideshow.js and what I get on each page is the error:


Error: DIV with ID “fadeslideshow-breakfast” not found on page

Error: DIV with ID “fadeslideshow-lunch” not found on page

Error: DIV with ID “fadeslideshow-desserts” not found on page
...and so on.

Now, on 'Lunches' for example, the DIV error will not list lunches as one of the missing DIVs, and when I click on 'OK' on each error box, and it runs out of boxes, the images THEN load up accordingly for each page.

I also edited the var mygalleryX=new fadeSlideShow with and without the sequential X value, no effect.

The link to see what's going on (under construction, but viewable) is www.bitsandbites.ie/wb and look under 'Menu' for the links to the subpages where I an applying the slide show. It's using the Websitebaker CMS 2.8.5


Seanie.
jscheuer1
04-27-2016, 09:33 PM
Looks like you figured it out. If not, let me know. Sorry to be so long getting back to you, the forum had automatically moderated your response so it wasn't visible to me. That has been happening with a lot of folks. So I'm now on a hunt for any others it has happened to. Sorry.

So, I'm assuming that the you had commented out/removed the alert before, but had done so in a way that broke the script. Now I'm thinking you've worked it out one way or another. If you do want more help, let us know.

And again, sorry we didn't see your response for so long.