ultimate fade in slideshow loading time

1) Script Title: Ultimate Fade-in slideshow

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

3) Describe problem:

Dear all, I have a question about my website. I installed 5 ultimate fade in slideshows on the index page of my website.
When I load my page the content doesn't load all in once but you really see all the slideshows showing up one after each other (sometimes even four show up and one of them after a long time of waiting)

Does anyone now what the problem can be and how I can solve it? I really want all the slideshows to load in once. I do have a fast internet connection so that can't be the problem.

Thanks in advance

I really don't think there is a solution to get them all showing up quickly and running. The shows cannot start until the the first images are loaded. On slower connections, it would be much worse.

In all cases you are limited to a degree by the browser. A browser will only fetch so many resources at once (typically 2 to 4 depending upon its settings/capabilities). The page is a resource, external stylesheets are resources, external scripts are resources, images are resources, Flash is a resource. You may not have some of these. You might have others. Any tag or script that fetches anything to the page represents a resource that the browser must get as a distinct resource, as one of the however many at a time that it will download.

Things can be sped up by optimizing all of the images, and fortunately the shows will not even start loading until the scripts and the page have completed. But that leaves you with at least 5 resources competing for probably 4 or less slots as the shows attempt to begin. One will lag behind.

You could do a preload of all of the first images and then start the shows. They would all be delayed until all were ready to start at once. This isn't ideal, but perhaps better than what you've got. Optimizing the images would still be important.

Then they would all start at once and likely change in unison. But in some browsers that will be very jerky. So you would proably want to stagger them anyway, if only by a few 100 milliseconds, at least the length of a transition. In your code you have that set as:

Code:

---

fadeduration: 0, //transition duration (milliseconds)

---

But that 0 represents 'not', so defaults in the script to 500 milliseconds.

If you're interested in a preload and a staggered start, let me know.

Quote:

---

Thanks you so much for your detailed and clear explanation of the cause of my problem. I spend hours talking with my webhost about this problem (because I thought it had to do with their server) while the actual cause was explained here so quickly.

I am really interested in a preload and a staggered start. Is this also applied on the example page (http://www.dynamicdrive.com/dynamici...nslideshow.htm) because when I load this page all the slideshows appear in once.

You wrote that it will look a little yerkie in some browsers but don't you also think it will look better then how the situation is now?

I would appreciate your help with the preload and staggered start. You can send me a reply or post it in the topic so that maybe other people can also be helped.

---

The demo page only has 4 shows, many browsers can handle that. But more to the point, it really only has 2 shows from the point of view of the images used. So to start all 4 shows, only 2 resources must be downloaded.

The jerkiness I was referring to would only be if all five of your shows started at the same time and transitioned in unison, and only in some browsers and/or on some computers. It's worth avoiding I would think, unless you expect all of your users to be high end and tech savvy. Staggering the shows, if done right, will avoid that.

It will take a little time to work out the details. I've never done it with this particular script, but have with other slideshows and have done the same sorts of things that will be required for this script, just for different reasons and not all together at one time in the way this will require.

A lot of stuff will be combined. Like you should only have to have one style declaration to make all shows background white. Doing it individually for each show is only required if you want different background colors for each one. Similarly, since all of the shows share everything in common, except for the image sets and target division, one main slide show declaration that gets used over and over, each time with a different image set and wrapperid should suffice.

OK, I got it worked out. First of all, you're missing the loading image:

http://www.dynamicdrive.com/dynamicindex14/loading.gif

Right click and 'save as', then upload it to the same folder as your page.

Once you have that, change these styles:

Code:

---

<style type="text/css">
.slideshow {
 height: 100px;
 width: 100px;
 margin-right:0px;
 background-color: #FFF;
 float:left;
}
#fadeshow1, #fadeshow1 .gallerylayer  {
 background-color: white!important;
}
#fadeshow2, #fadeshow2 .gallerylayer  {
 background-color: white!important;
}
#fadeshow3, #fadeshow3 .gallerylayer  {
 background-color: white!important;
}
#fadeshow4, #fadeshow4 .gallerylayer  {
 background-color: white!important;
}
#fadeshow5, #fadeshow5 .gallerylayer  {
 background-color: white!important;
}</style>

---

to:

Code:

---

<style type="text/css">
.slideshow {
 float:left;
 width: 190px;
 height: 150px;
 background: url(loading.gif) center no-repeat;
}
.slideshow, .slideshow .gallerylayer{
 background-color: #fff!important;
}
</style>

---

Next, replace these scripts:

Code:

---

<script type="text/javascript">
var mygallery=new fadeSlideShow({
 wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
 dimensions: [190, 150], //width/height of gallery in pixels. Should reflect dimensions of largest image
 imagearray: [
  ["chanel.jpg", "", "", ""],
  ["louboutin.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", ""]
 
 
 ],
 displaymode: {type:'auto', pause:10000, cycles:0, wraparound:false},
 persist: false, //remember last viewed slide and recall within same session?
 fadeduration: 0, //transition duration (milliseconds)
 descreveal: "ondemand",
 togglerid: ""
})

</script></script>
<script type="text/javascript">
var mygallery=new fadeSlideShow({
 wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
 dimensions: [190, 150], //width/height of gallery in pixels. Should reflect dimensions of largest image
 imagearray: [
  ["hermes.jpg", "", "", ""],
  ["manolo.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", ""]
 ],
 displaymode: {type:'auto', pause:10000, cycles:0, wraparound:false},
 persist: false, //remember last viewed slide and recall within same session?
 fadeduration: 0, //transition duration (milliseconds)
 descreveal: "ondemand",
 togglerid: ""
})

</script>
<script type="text/javascript">
var mygallery=new fadeSlideShow({
 wrapperid: "fadeshow3", //ID of blank DIV on page to house Slideshow
 dimensions: [190, 150], //width/height of gallery in pixels. Should reflect dimensions of largest image
 imagearray: [
  ["birkin.jpg", "", "", ""],
  ["wallet.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", ""]
 ],
 displaymode: {type:'auto', pause:10000, cycles:0, wraparound:false},
 persist: false, //remember last viewed slide and recall within same session?
 fadeduration: 0, //transition duration (milliseconds)
 descreveal: "ondemand",
 togglerid: ""
})

</script>
<script type="text/javascript">
var mygallery=new fadeSlideShow({
 wrapperid: "fadeshow4", //ID of blank DIV on page to house Slideshow
 dimensions: [190, 150], //width/height of gallery in pixels. Should reflect dimensions of largest image
 imagearray: [
  ["jacket.jpg", "", "", ""],
  ["scarf.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", ""]
 
 ],
 displaymode: {type:'auto', pause:10000, cycles:0, wraparound:false},
 persist: false, //remember last viewed slide and recall within same session?
 fadeduration: 0, //transition duration (milliseconds)
 descreveal: "ondemand",
 togglerid: ""
})

</script>
<script type="text/javascript">
var mygallery=new fadeSlideShow({
 wrapperid: "fadeshow5", //ID of blank DIV on page to house Slideshow
 dimensions: [190, 150], //width/height of gallery in pixels. Should reflect dimensions of largest image
 imagearray: [
  ["flats.jpg", "", "", ""],
  ["bracelet.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", ""]
 ],
 displaymode: {type:'auto', pause:10000, cycles:0, wraparound:false},
 persist: false, //remember last viewed slide and recall within same session?
 fadeduration: 0, //transition duration (milliseconds)
 descreveal: "ondemand",
 togglerid: ""
})

</script>

---

with:

Code:

---

<script type="text/javascript">
(function($){
        var ims = [], imsCount = 0, gallery = 0, galleryObj = {
        dimensions: [190, 150], //width/height of gallery in pixels. Should reflect dimensions of largest image
        displaymode: {type:'auto', pause:10000, cycles:0, wraparound:false},
        persist: false, //remember last viewed slide and recall within same session?
        fadeduration: 500, //transition duration (milliseconds)
        descreveal: "never",
        togglerid: "",
        oninit: function(){
                        if(gallery < galleryObjs.length){
                                setTimeout(function(){new fadeSlideShow($.extend(true, galleryObjs[gallery++], galleryObj));}, this.setting.fadeduration);
                        }
                        this.setting.$wrapperdiv.unbind('mouseenter mouseleave');
                }
        }, galleryObjs = [
                {
                        wrapperid: 'fadeshow1',
                        imagearray: [
                                ['chanel.jpg'],
                                ['louboutin.jpg']
                        ]
                }, {
                        wrapperid: 'fadeshow2',
                        imagearray: [
                                ['hermes.jpg'],
                                ['manolo.jpg']
                        ]
                }, {
                        wrapperid: 'fadeshow3',
                        imagearray: [
                                ['birkin.jpg'],
                                ['wallet.jpg']
                        ]
                }, {
                        wrapperid: 'fadeshow4',
                        imagearray: [
                                ['jacket.jpg'],
                                ['scarf.jpg']
                        ]
                }, {
                        wrapperid: 'fadeshow5',
                        imagearray: [
                                ['flats.jpg'],
                                ['bracelet.jpg']
                        ]
                }
        ];
        function startIt(){
                if(imsCount < ims.length){
                        setTimeout(startIt, 300);
                        return;
                }
                new fadeSlideShow($.extend(true, galleryObjs[gallery++], galleryObj));
        }
        $.each(galleryObjs, function(i, v){
                ims[i] = new Image();
                ims[i].onload = function(){
                        ++imsCount;
                };
                ims[i].src = v.imagearray[0][0];
        });
        startIt();
})(jQuery);
</script>

---

That's it.

Any questions, feel free to ask.

Quote:

---

Originally Posted by jscheuer1

OK, I got it worked out. First of all, you're missing the loading image:

http://www.dynamicdrive.com/dynamicindex14/loading.gif

Right click and 'save as', then upload it to the same folder as your page.

Once you have that, change these styles:

Code:

---

<style type="text/css">
.slideshow {
 height: 100px;
 width: 100px;
 margin-right:0px;
 background-color: #FFF;
 float:left;
}
#fadeshow1, #fadeshow1 .gallerylayer  {
 background-color: white!important;
}
#fadeshow2, #fadeshow2 .gallerylayer  {
 background-color: white!important;
}
#fadeshow3, #fadeshow3 .gallerylayer  {
 background-color: white!important;
}
#fadeshow4, #fadeshow4 .gallerylayer  {
 background-color: white!important;
}
#fadeshow5, #fadeshow5 .gallerylayer  {
 background-color: white!important;
}</style>

---

to:

Code:

---

<style type="text/css">
.slideshow {
 float:left;
 width: 190px;
 height: 150px;
 background: url(loading.gif) center no-repeat;
}
.slideshow, .slideshow .gallerylayer{
 background-color: #fff!important;
}
</style>

---

Next, replace these scripts:

Code:

---

<script type="text/javascript">
var mygallery=new fadeSlideShow({
 wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
 dimensions: [190, 150], //width/height of gallery in pixels. Should reflect dimensions of largest image
 imagearray: [
  ["chanel.jpg", "", "", ""],
  ["louboutin.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", ""]
 
 
 ],
 displaymode: {type:'auto', pause:10000, cycles:0, wraparound:false},
 persist: false, //remember last viewed slide and recall within same session?
 fadeduration: 0, //transition duration (milliseconds)
 descreveal: "ondemand",
 togglerid: ""
})

</script></script>
<script type="text/javascript">
var mygallery=new fadeSlideShow({
 wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
 dimensions: [190, 150], //width/height of gallery in pixels. Should reflect dimensions of largest image
 imagearray: [
  ["hermes.jpg", "", "", ""],
  ["manolo.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", ""]
 ],
 displaymode: {type:'auto', pause:10000, cycles:0, wraparound:false},
 persist: false, //remember last viewed slide and recall within same session?
 fadeduration: 0, //transition duration (milliseconds)
 descreveal: "ondemand",
 togglerid: ""
})

</script>
<script type="text/javascript">
var mygallery=new fadeSlideShow({
 wrapperid: "fadeshow3", //ID of blank DIV on page to house Slideshow
 dimensions: [190, 150], //width/height of gallery in pixels. Should reflect dimensions of largest image
 imagearray: [
  ["birkin.jpg", "", "", ""],
  ["wallet.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", ""]
 ],
 displaymode: {type:'auto', pause:10000, cycles:0, wraparound:false},
 persist: false, //remember last viewed slide and recall within same session?
 fadeduration: 0, //transition duration (milliseconds)
 descreveal: "ondemand",
 togglerid: ""
})

</script>
<script type="text/javascript">
var mygallery=new fadeSlideShow({
 wrapperid: "fadeshow4", //ID of blank DIV on page to house Slideshow
 dimensions: [190, 150], //width/height of gallery in pixels. Should reflect dimensions of largest image
 imagearray: [
  ["jacket.jpg", "", "", ""],
  ["scarf.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", ""]
 
 ],
 displaymode: {type:'auto', pause:10000, cycles:0, wraparound:false},
 persist: false, //remember last viewed slide and recall within same session?
 fadeduration: 0, //transition duration (milliseconds)
 descreveal: "ondemand",
 togglerid: ""
})

</script>
<script type="text/javascript">
var mygallery=new fadeSlideShow({
 wrapperid: "fadeshow5", //ID of blank DIV on page to house Slideshow
 dimensions: [190, 150], //width/height of gallery in pixels. Should reflect dimensions of largest image
 imagearray: [
  ["flats.jpg", "", "", ""],
  ["bracelet.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", ""]
 ],
 displaymode: {type:'auto', pause:10000, cycles:0, wraparound:false},
 persist: false, //remember last viewed slide and recall within same session?
 fadeduration: 0, //transition duration (milliseconds)
 descreveal: "ondemand",
 togglerid: ""
})

</script>

---

with:

Code:

---

<script type="text/javascript">
(function($){
        var ims = [], imsCount = 0, gallery = 0, galleryObj = {
        dimensions: [190, 150], //width/height of gallery in pixels. Should reflect dimensions of largest image
        displaymode: {type:'auto', pause:10000, cycles:0, wraparound:false},
        persist: false, //remember last viewed slide and recall within same session?
        fadeduration: 500, //transition duration (milliseconds)
        descreveal: "never",
        togglerid: "",
        oninit: function(){
                        if(gallery < galleryObjs.length){
                                setTimeout(function(){new fadeSlideShow($.extend(true, galleryObjs[gallery++], galleryObj));}, this.setting.fadeduration);
                        }
                        this.setting.$wrapperdiv.unbind('mouseenter mouseleave');
                }
        }, galleryObjs = [
                {
                        wrapperid: 'fadeshow1',
                        imagearray: [
                                ['chanel.jpg'],
                                ['louboutin.jpg']
                        ]
                }, {
                        wrapperid: 'fadeshow2',
                        imagearray: [
                                ['hermes.jpg'],
                                ['manolo.jpg']
                        ]
                }, {
                        wrapperid: 'fadeshow3',
                        imagearray: [
                                ['birkin.jpg'],
                                ['wallet.jpg']
                        ]
                }, {
                        wrapperid: 'fadeshow4',
                        imagearray: [
                                ['jacket.jpg'],
                                ['scarf.jpg']
                        ]
                }, {
                        wrapperid: 'fadeshow5',
                        imagearray: [
                                ['flats.jpg'],
                                ['bracelet.jpg']
                        ]
                }
        ];
        function startIt(){
                if(imsCount < ims.length){
                        setTimeout(startIt, 300);
                        return;
                }
                new fadeSlideShow($.extend(true, galleryObjs[gallery++], galleryObj));
        }
        $.each(galleryObjs, function(i, v){
                ims[i] = new Image();
                ims[i].onload = function(){
                        ++imsCount;
                };
                ims[i].src = v.imagearray[0][0];
        });
        startIt();
})(jQuery);
</script>

---

That's it.

Any questions, feel free to ask.

---

Thank you very much for your reply John. I'm always amazed how many people are willing to help others here at dynamic drive.

I always thought you had to specify everything in the script all over again for the different slideshows so good to learn that this isn’t necessary at all.

I changed the script and now the loading image is visible. However, the slideshows are still appearing after each other (so one by one) . It is nice that they now appear in order but I was wondering if it is possible to actually make them all appear in once. It doesn’t matter if this is after some seconds of loading.

I really appreciate it if you can take a look at it. Thank you for your effort so far.

Rosalie

I know it's a lot to take in at one time. You can do that. But, if you do, you will have adverse situations in some browsers and/or computers:

Quote:

---

Originally Posted by jscheuer1

The jerkiness I was referring to would only be if all five of your shows started at the same time and transitioned in unison, and only in some browsers and/or on some computers. It's worth avoiding I would think, unless you expect all of your users to be high end and tech savvy. Staggering the shows, if done right, will avoid that.

---

To do what you want risks that. You can get it though, or close to it by changing:

Code:

---

setTimeout(function(){new fadeSlideShow($.extend(true, galleryObjs[gallery++], galleryObj));}, this.setting.fadeduration);

---

to:

Code:

---

setTimeout(function(){new fadeSlideShow($.extend(true, galleryObjs[gallery++], galleryObj));}, 0);

---

If that's still not fast enough, I can make it even faster. Let me know.

Quote:

---

Originally Posted by jscheuer1

I know it's a lot to take in at one time. You can do that. But, if you do, you will have adverse situations in some browsers and/or computers:



To do what you want risks that. You can get it though, or close to it by changing:

Code:

---

setTimeout(function(){new fadeSlideShow($.extend(true, galleryObjs[gallery++], galleryObj));}, this.setting.fadeduration);

---

to:

Code:

---

setTimeout(function(){new fadeSlideShow($.extend(true, galleryObjs[gallery++], galleryObj));}, 0);

---

If that's still not fast enough, I can make it even faster. Let me know.

---

Thanks for your reply John! I changed my script and the slideshows load indeed a lot faster. I am already really happy with the result but I still have a question for you.

It is great that the slideshows load so fast. However, is it also possible that all the slideshows wait untill all the resources (images) are downloaded and then start all at the same time. So, if you open the page you first see the 5 loading images and then all the slideshows are shown simultaniously.
Because now they start after each other which also implies that the images change after each other and not all at the same time.

I hope you understand what I mean and that you can help me.

Thanks

To actually get everything to start simultaneously (one exception see below*) would be impossible because each show takes time to init (3 to 18 milliseconds, which varies widely due to all sorts of things), and no two shows can init at the very same time. And, just so you're aware, I want to restate that doing it the way we already have it is too close to simultaneous to avoid the jerkiness I spoke of from occurring in/on some browsers/computers. Though I'm amazed how stable it is on all the browsers I've tested with on my new laptop. I'm sure some will look horrible.

That said, we can leave the initialization about where it is, but eliminate even the 0 timeout (which does add a nanosecond), and change all the shows over to manual and use our own recurring interval to change the slides. Changing the slides is much quicker than initializing, so the differences do not appear to be apparent to the eye (at least not to mine):

Code:

---

<script type="text/javascript">
(function($){
        var ims = [], imsCount = 0, galleries = [], galleryObj = {
        dimensions: [190, 150], //width/height of gallery in pixels. Should reflect dimensions of largest image
        displaymode: {type:'auto', pause:10000, cycles:0, wraparound:false},
        persist: false, //remember last viewed slide and recall within same session?
        fadeduration: 500, //transition duration (milliseconds)
        descreveal: "never",
        togglerid: "",
        oninit: function(){
                        this.setting.displaymode.type = 'manual';
                        this.setting.$prev = this.setting.$next = $('<div>');
                        if(this.setting.wrapperid === 'fadeshow1'){
                                setInterval(function(){
                                        $.each(galleries, function(i, v){
                                                v.navigate('next');
                                        });
                                }, this.setting.displaymode.pause);
                        }
                        this.setting.$wrapperdiv.unbind('mouseenter mouseleave');
                }
        }, galleryObjs = [
                {
                        wrapperid: 'fadeshow1',
                        imagearray: [
                                ['chanel.jpg'],
                                ['louboutin.jpg']
                        ]
                }, {
                        wrapperid: 'fadeshow2',
                        imagearray: [
                                ['hermes.jpg'],
                                ['manolo.jpg']
                        ]
                }, {
                        wrapperid: 'fadeshow3',
                        imagearray: [
                                ['birkin.jpg'],
                                ['wallet.jpg']
                        ]
                }, {
                        wrapperid: 'fadeshow4',
                        imagearray: [
                                ['jacket.jpg'],
                                ['scarf.jpg']
                        ]
                }, {
                        wrapperid: 'fadeshow5',
                        imagearray: [
                                ['flats.jpg'],
                                ['bracelet.jpg']
                        ]
                }
        ];
        function startIt(){
                if(imsCount < ims.length){
                        setTimeout(startIt, 300);
                        return;
                }
                $.each(galleryObjs, function(i, v){
                        galleries.push(new fadeSlideShow($.extend(true, v, galleryObj)));
                });
        }
        $.each(galleryObjs, function(i, v){
                ims[i] = new Image();
                ims[i].onload = function(){
                        ++imsCount;
                };
                ims[i].src = v.imagearray[0][0];
        });
        startIt();
})(jQuery);
</script>

---

*The one exception: Combine all the images of the 1st slots into one image, and all of the images of the 2nd slots into another image and have only one slideshow. This would actually be more efficient for the browser, probably avoid the problem I was talking about as to jerkiness, and avoid the need for any modifications other than the style ones.

The only drawbacks I can think of are - It's some work in the image editor for you or an assistant to set up, and each time an image might need to be updated it would be a hassle, less flexible overall.

Quote:

---

Originally Posted by jscheuer1

To actually get everything to start simultaneously (one exception see below*) would be impossible because each show takes time to init (3 to 18 milliseconds, which varies widely due to all sorts of things), and no two shows can init at the very same time. And, just so you're aware, I want to restate that doing it the way we already have it is too close to simultaneous to avoid the jerkiness I spoke of from occurring in/on some browsers/computers. Though I'm amazed how stable it is on all the browsers I've tested with on my new laptop. I'm sure some will look horrible.

That said, we can leave the initialization about where it is, but eliminate even the 0 timeout (which does add a nanosecond), and change all the shows over to manual and use our own recurring interval to change the slides. Changing the slides is much quicker than initializing, so the differences do not appear to be apparent to the eye (at least not to mine):

Code:

---

<script type="text/javascript">
(function($){
        var ims = [], imsCount = 0, galleries = [], galleryObj = {
        dimensions: [190, 150], //width/height of gallery in pixels. Should reflect dimensions of largest image
        displaymode: {type:'auto', pause:10000, cycles:0, wraparound:false},
        persist: false, //remember last viewed slide and recall within same session?
        fadeduration: 500, //transition duration (milliseconds)
        descreveal: "never",
        togglerid: "",
        oninit: function(){
                        this.setting.displaymode.type = 'manual';
                        this.setting.$prev = this.setting.$next = $('<div>');
                        if(this.setting.wrapperid === 'fadeshow1'){
                                setInterval(function(){
                                        $.each(galleries, function(i, v){
                                                v.navigate('next');
                                        });
                                }, this.setting.displaymode.pause);
                        }
                        this.setting.$wrapperdiv.unbind('mouseenter mouseleave');
                }
        }, galleryObjs = [
                {
                        wrapperid: 'fadeshow1',
                        imagearray: [
                                ['chanel.jpg'],
                                ['louboutin.jpg']
                        ]
                }, {
                        wrapperid: 'fadeshow2',
                        imagearray: [
                                ['hermes.jpg'],
                                ['manolo.jpg']
                        ]
                }, {
                        wrapperid: 'fadeshow3',
                        imagearray: [
                                ['birkin.jpg'],
                                ['wallet.jpg']
                        ]
                }, {
                        wrapperid: 'fadeshow4',
                        imagearray: [
                                ['jacket.jpg'],
                                ['scarf.jpg']
                        ]
                }, {
                        wrapperid: 'fadeshow5',
                        imagearray: [
                                ['flats.jpg'],
                                ['bracelet.jpg']
                        ]
                }
        ];
        function startIt(){
                if(imsCount < ims.length){
                        setTimeout(startIt, 300);
                        return;
                }
                $.each(galleryObjs, function(i, v){
                        galleries.push(new fadeSlideShow($.extend(true, v, galleryObj)));
                });
        }
        $.each(galleryObjs, function(i, v){
                ims[i] = new Image();
                ims[i].onload = function(){
                        ++imsCount;
                };
                ims[i].src = v.imagearray[0][0];
        });
        startIt();
})(jQuery);
</script>

---

*The one exception: Combine all the images of the 1st slots into one image, and all of the images of the 2nd slots into another image and have only one slideshow. This would actually be more efficient for the browser, probably avoid the problem I was talking about as to jerkiness, and avoid the need for any modifications other than the style ones.

The only drawbacks I can think of are - It's some work in the image editor for you or an assistant to set up, and each time an image might need to be updated it would be a hassle, less flexible overall.

---

Hi John,

thanks for the help again. I changed the script but now my slideshows aren't showing up anymore (at least not in firefox and internet explorer). The only thing I see are the loading images. Did I had to change something in the script?

Rosalie

You've got some sort of typo and/or other screwup (perhaps caused by the editor) in implementing the new code. From the source code:

Code:

---

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="fadeslideshow.js">
/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
<script _wpro_type="text/javascript" type="text/wpro">
(function($){
        var ims = [], imsCount = 0, galleries = [], galleryObj = {
        dimensions: [190, 150], //width/height of gallery in pixels. Should reflect dimensions of largest image
        displaymode: {type:'auto', pause:10 . . .

---

There's no closing </script> tag for the external tag of fadeslideshow.js and the opening tag (highlighted) for the on page script below it is invalid. It should look like so:

Code:

---

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="fadeslideshow.js">
/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
<script type="text/javascript">
(function($){
        var ims = [], imsCount = 0, galleries = [], galleryObj = {
        dimensions: [190, 150], //width/height of gallery in pixels. Should reflect dimensions of largest image
        displaymode: {type:'auto', pause:10 . . .

---