Multiple fade-in slideshows

**Digihound** · 05-05-2006, 03:42 PM

I have a site which needs 'Ultimate' fade-in slideshows on a number of pages. The is being built using Dreamweaver's nested template system, so I have to work out how to allow for the different photos to be used on each page.

As it stands at the moment I have to use a different version of the slideshow script for each page (now converted into an external javascript file), because the script includes the data for the images.

Dreamweaver allows you to include editable regions in the <head> but not optional regions. So, I can change the name of the script, but I can't miss it out on pages that do not use it.

Someone on another forum suggested using:

Code:

@@(optionJS==""?'':'<script src="'+optionJS+'" 
type="text/javascript"></script>')@@

in the head, and then using Modify>Template to add the necessary script each time. But this seems rather long-winded - particularly since there are are more pages that do have slideshows than don't.

I thought that, if I was to create a javascript which runs but does nothing (effectively a null javascript), and then edit the head to point to that when no slideshow is needed, that could solve the problem. This could then replace the name of slideshow.js But what's the minimum I could include in that file to ensure it didn't crash?

Or is there some way of running the same script, but getting it to call different data fles for the image data?

Or can anyone suggest another way round it?

Your comments are very much appreciated. I'm gradually learning!

**jscheuer1** · 05-05-2006, 04:05 PM

The Ultimate fade-in script uses different arrays, configured at the beginning of the script. These arrays could all be defined there in one external version and then be called only on the pages where they are needed as the part of the script that goes in the body of the page is the part that determines which array is to be used.

Alternately, the script could be used externally with no arrays, then on each individual page where it is to be used, the array(s) for that page could be defined in a separate script, as long as that script was above the in body call for the script. Example script with array only:

Code:

<script type="text/javascript">
 
var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["photo1.jpg", "", ""] //plain image syntax
fadeimages[1]=["photo2.jpg", "http://www.cssdrive.com", ""] //image with link syntax
fadeimages[2]=["photo3.jpg", "http://www.javascriptkit.com", "_new"] //image with link and target syntax

</script>

The array(s) for the page could also be defined in with the in body call for the script:

Code:

<script type="text/javascript">

var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["photo1.jpg", "", ""] //plain image syntax
fadeimages[1]=["photo2.jpg", "http://www.cssdrive.com", ""] //image with link syntax
fadeimages[2]=["photo3.jpg", "http://www.javascriptkit.com", "_new"] //image with link and target syntax
 

//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 140, 225, 0, 3000, 1, "R")
 
</script>

To answer your question about how much code must be included in a 'dummy' external script to avoid an error, none. If you have a call like this in the head:

<script type="text/javascript" src="dummy.js"></script>

and no file by the name of dummy.js exists, then there will be no error and, of course, it will have no effect on the page.

**Digihound** · 05-10-2006, 04:54 PM

John, what an immaculate explanation!

First of all, sorry I've taken so long to call back, but I've been having problems with internet access.

Thank you for spelling this out so simply. I knew what I wanted to do, and that it could be done, but not how.

I think I'll go for the separate script in the page defining the arrays. With a couple of hundred photos involved, it would be too much in a .js, and the other might distort the page. Presumably the 'script in page' could be included in the <head>?

The only other thought in the back of my mind is about preloading the images. If they are pre-loaded (say with the Dynamic Drive preloader) do they have to be referenced at a specific location, or are they simply there in the browser for any part of the page or any script included in it to call on?

What I'm thinking is, can I easily preload all my images (included in the slideshow script or not) so that my visitors don't have to wait once the initial loading is done. Or would this involve storing them in specific locations and then calling them from those specific locations - which could get quite complicated with a couple of hundred images on the site.

Thanks again
Phil

**jscheuer1** · 05-10-2006, 06:13 PM

This part of the script has to be in the body of the page, it goes in the flow of the document, in the spot where you want the slideshow(s) to appear (example with one slideshow):

Code:

<script type="text/javascript">

//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 140, 225, 0, 3000, 1, "R")
 
</script>

Including the array definition for that slideshow, just above the call as I mentioned before will not 'distort' the page but may be a problem if you are managing your pages in FrontPage or possibly in some of the other WYSIWYG HTML editors out there. This is a separate issue and has a separate solution, if it even applies. Using a separate script in the head for the array(s) is fine but the call (above) must go in the body.

Preloading images is generally best done piecemeal and just in time for when they are needed. However, all preloading depends upon your having one and only one copy of each image on the server. Preloading (or even loading) an identical image from a different location on the server, or from anywhere on the web, is seen as a separate image by the browser.

Once an image is preloaded, preloading it again will take no time.

Preloading images is still loading images and will take as long as it would without preloading, the only advantage is, if you strategically preload only those images that might be a problem if allowed to load normally, you avoid that problem.

I like to preload a few key navigational images sometimes and I do it on a page prior to the page that uses them.

The best strategy for preloading with these slideshows is the one already employed by the script. Under certain circumstances, it can be advantageous to only preload a few images at a time, loading others as the show is running.

DDadmin worked this out in another post somewhere, I'll see if I can find that, rather than duplicate the effort.

**Digihound** · 05-10-2006, 06:50 PM

Thanks John,
The problem I'm having is that with 3x15k images and 2x3x5k images, the autochange on the slideshow starts running before the images are loaded - so the viewer only sees half an image loaded, before the script changes to the next one. This happens a couple of times before everything is up and running and loaded.
I thought perhaps that if I used a preloader with a progress bar, this would hold back the action on the page until the images were all ready to go.
If you can locate the other post, I'd appreciate it, or suggest how I might delay the script starting until the images are loaded.
Thanks again
Phil

**jscheuer1** · 05-10-2006, 07:00 PM

With the situation you describe, you would need a preloading bar type thing or other preloader that delays the page load. Delaying the preloads further (as ddadmin's mod does) would not be useful here for obvious reasons.

**Digihound** · 05-11-2006, 12:40 PM

I take your point on that one John, it all adds weight to the page.

You said in your last email:

Preloading images is generally best done piecemeal and just in time for when they are needed.

I have three rolling fades on my page, which are all needed as soon as the page loads. It would look much tidier (contrary to what others might need) if they were all loaded before the script started rotating them - as I've already said, it looks messy because they half load and then swap.

I've searched the previous posts and found one or two that are similar, but there seemed to be no solution for them. What I need really is to move back to how the script originally was (before it began loading the image only just prior to displaying it) in a sense it would be better with rotating blank spaces than half-formed pictures. But how to do that when it's been amended for progressive loading I don't know.

Can you John, or anybody else help?

**jscheuer1** · 05-11-2006, 03:12 PM

What version of this script are you using? The one from the demo page (Ultimate Fade-in Slideshow) preloads everything at one pass, however, preloading takes as long as loading does, so if the script starts displaying everything before each image is loaded, you have a problem. How many bytes are each of your images on average? Could you preload them on a previous page? In any case, you could preload with progress bar and that should take care of it.

**Digihound** · 05-12-2006, 10:25 AM

Thanks John,

As mentioned earlier, I have 2 shows of 3x5kb and 1 show of 3x15kb. These are compressed as far as they will go. Sadly the client wants them on the index page, so there isn't an option of preloading on a previous page.

I guess I and the client have to accept the status quo.

Just thinking about it, there isn't a way to put a timer in the script, is there, so that it doesn't run until after a certain length of time after loading?

Thanks again
Phil

**jscheuer1** · 05-13-2006, 06:26 AM

I'm not sure what exactly you mean by (though I have an idea):

2 shows of 3x5kb and 1 show of 3x15kb

But, I took my own advice and found that it was wrong. If I preloaded an image in one way and peloaded it again in another (particular if that 'another way' was the slideshow's native method), it still took time to to load the images and if the slideshow were not delayed (for lower speed connections at least), the problems you already described would occur.

So, I adapted my favorite preload with progress bar script to the slideshow script and here is a demo of the result. Usage is the same as the original.

Thread: Multiple fade-in slideshows

Thread Tools

Search Thread

Multiple fade-in slideshows

Bookmarks

Bookmarks

Posting Permissions