PDA

View Full Version : How to delay second slideshow



luudp
01-26-2012, 04:35 PM
1) Script Title: Ultimate Fade-in slideshow (v2.4)

http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

Hi,
On one and the same page I use 2 slideshows. Now I would like to delay the second slideshow so the slideshows alternate nicely. Any suggestions on how to realise this?

Many thanks,
Luud

jscheuer1
01-27-2012, 03:30 PM
Add the highlighted code to the beginning of the new fadeSlideShow section, example (add it only once, if you have two separate sections for this add it only to the first section):


<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">

fadeSlideShow.sync = function(){
fadeSlideShow.sync.gals = fadeSlideShow.sync.gals || [];
fadeSlideShow.sync.duration = fadeSlideShow.sync.duration || 0;
fadeSlideShow.sync.gals.push(this);
fadeSlideShow.sync.duration = Math.max(fadeSlideShow.sync.duration, this.setting.fadeduration);
if(fadeSlideShow.sync.gals.length !== fadeSlideShow.sync.numGals){return;}
var thegals = fadeSlideShow.sync.gals;
fadeSlideShow.sync.duration *= 1.1;

function over(e){
var id = this.id, typeBool = e.type === 'mouseenter', showHide = typeBool? 'show' : 'hide';
jQuery.each(thegals, function(i, gal){
if(gal.setting.wrapperid !== id){
gal.setting.ismouseover = typeBool;
if(gal.setting.descreveal === 'ondemand'){gal.showhidedescpanel(showHide);}
}
});
}

setTimeout(function(){
jQuery.each(thegals, function(i, gal){
gal.setting.$wrapperdiv.bind('mouseenter mouseleave', over);
gal.setting.playtimer = setTimeout(
function(){
gal.setting.displaymode.type = 'auto';
gal.showslide('next');
},
gal.setting.displaymode.pause + (gal.setting.displaymode.delay || 0));
});
}, fadeSlideShow.sync.duration);
};

fadeSlideShow.sync.numGals = 2; //required - set to number of galleries

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [550, 460], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["sunflower.jpeg", "", "", "Not . . .

Then, in one and only one of your two new fadeSlideShow calls add a delay to the displaymode, example:


var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [550, 460], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["sunflower.jpeg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
["flip-flops.jpeg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
["rubber-ring.jpeg"],
["sand-castle.jpeg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
],
displaymode: {type:'manual', pause:2500, cycles:0, wraparound:true, delay:1250},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: "",
oninit: fadeSlideShow.sync
})

Also add the oninit call as shown, but do that with both of them. Don't miss the added comma after the togglerid value.

Notice also that the displaymode type is 'manual', they should both be set that way, and ideally they should both have the same pause and fadeduration. The cycles should be 0 or at least the same between the two of them. And the wraparaound should be true for both as well.

The added delay that you use would then ideally be half of the pause.

If you want more help, please post a link to the page on your site that contains the problematic code so we can check it out.

luudp
01-27-2012, 04:22 PM
Many thanks John. Works just fine now.

katebellami
05-30-2012, 12:12 PM
Hi - I am actually combining this with another very helpful function you provided yesterday which tells the slideshow to stop on the last image. How do I marry the two?


<script type="text/javascript">

fadeSlideShow.sync = function(){
fadeSlideShow.sync.gals = fadeSlideShow.sync.gals || [];
fadeSlideShow.sync.duration = fadeSlideShow.sync.duration || 0;
fadeSlideShow.sync.gals.push(this);
fadeSlideShow.sync.duration = Math.max(fadeSlideShow.sync.duration, this.setting.fadeduration);
if(fadeSlideShow.sync.gals.length !== fadeSlideShow.sync.numGals){return;}
var thegals = fadeSlideShow.sync.gals;
fadeSlideShow.sync.duration *= 1.1;

function over(e){
var id = this.id, typeBool = e.type === 'mouseenter', showHide = typeBool? 'show' : 'hide';
jQuery.each(thegals, function(i, gal){
if(gal.setting.wrapperid !== id){
gal.setting.ismouseover = typeBool;
if(gal.setting.descreveal === 'ondemand'){gal.showhidedescpanel(showHide);}
}
});
}

setTimeout(function(){
jQuery.each(thegals, function(i, gal){
gal.setting.$wrapperdiv.bind('mouseenter mouseleave', over);
gal.setting.playtimer = setTimeout(
function(){
gal.setting.displaymode.type = 'auto';
gal.showslide('next');
},
gal.setting.displaymode.pause + (gal.setting.displaymode.delay || 0));
});
}, fadeSlideShow.sync.duration);
};

fadeSlideShow.sync.numGals = 2; //required - set to number of galleries



var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [760, 185], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["images/slide-1.png", "", "", ""],
["images/slide-2.png", "", "", ""],
["images/slide-3.png", "", "", ""],
["images/slide-4.png", "", "", ""],
["images/slide-5.png", "", "", ""],
["images/slide-6.png", "", "", ""],
["images/slide-7.png", "", "", ""],
["images/slide-8.png", "", "", ""]
],
displaymode: {type:'auto', pause:800, cycles:1, wraparound:false, delay:1250},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 400, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: "",
oninit: function(){
--this.setting.totalsteps;
}

})


</script>

jscheuer1
05-30-2012, 02:13 PM
Follow the same instructions in this thread, except for the oninit. It should look like so for both slideshows:


oninit: function(){
--this.setting.totalsteps;
fadeSlideShow.sync.call(this);
}

katebellami
05-30-2012, 05:55 PM
Thanks! It actually doesnt seem to be working. I only have 1 slideshow, so I changed it to 1 in the number area.


<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">

fadeSlideShow.sync = function(){
fadeSlideShow.sync.gals = fadeSlideShow.sync.gals || [];
fadeSlideShow.sync.duration = fadeSlideShow.sync.duration || 0;
fadeSlideShow.sync.gals.push(this);
fadeSlideShow.sync.duration = Math.max(fadeSlideShow.sync.duration, this.setting.fadeduration);
if(fadeSlideShow.sync.gals.length !== fadeSlideShow.sync.numGals){return;}
var thegals = fadeSlideShow.sync.gals;
fadeSlideShow.sync.duration *= 1.1;

function over(e){
var id = this.id, typeBool = e.type === 'mouseenter', showHide = typeBool? 'show' : 'hide';
jQuery.each(thegals, function(i, gal){
if(gal.setting.wrapperid !== id){
gal.setting.ismouseover = typeBool;
if(gal.setting.descreveal === 'ondemand'){gal.showhidedescpanel(showHide);}
}
});
}

setTimeout(function(){
jQuery.each(thegals, function(i, gal){
gal.setting.$wrapperdiv.bind('mouseenter mouseleave', over);
gal.setting.playtimer = setTimeout(
function(){
gal.setting.displaymode.type = 'auto';
gal.showslide('next');
},
gal.setting.displaymode.pause + (gal.setting.displaymode.delay || 0));
});
}, fadeSlideShow.sync.duration);
};

fadeSlideShow.sync.numGals = 1; //required - set to number of galleries



var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [760, 185], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["images/slide-1.png", "", "", ""],
["images/slide-2.png", "", "", ""],
["images/slide-3.png", "", "", ""],
["images/slide-4.png", "", "", ""],
["images/slide-5.png", "", "", ""],
["images/slide-6.png", "", "", ""],
["images/slide-7.png", "", "", ""],
["images/slide-8.png", "", "", ""]
],
displaymode: {type:'auto', pause:800, cycles:1, wraparound:false, delay:1250},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 400, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: "",
oninit: function(){
--this.setting.totalsteps;
fadeSlideShow.sync.call(this);
}

})


</script>

jscheuer1
05-30-2012, 11:28 PM
There could also be other problems but you have to set the displaymode type to manual:


displaymode: {type:'manual', pause:800, cycles:1, wraparound:false, delay:1250},

Not (as you have it):


displaymode: {type:'auto', pause:800, cycles:1, wraparound:false, delay:1250},

But with only one show, there's no reason to use the fadeSlideShow.sync code. Get rid of it and change the the init back to:


oninit: function(){
--this.setting.totalsteps;
}

However, I just tried this out to be sure and it works. If all you're going for an initial delay, that's what happens. If there's some other problem, and/or you want more help:

Please include a link to the page on your site that contains the problematic code so we can check it out.

katebellami
05-31-2012, 12:50 AM
thanks! there is only one slideshow, and I would like it to cycle once, but I would like a slight delay before playing. Here is the link to the site. thank you!!
http://www.be-eventproductions.com/temp/

jscheuer1
05-31-2012, 05:54 AM
Notice also that the displaymode type is 'manual', they should both be set that way, and ideally they should both have the same pause and fadeduration. The cycles should be 0 or at least the same between the two of them. And the wraparaound should be true for both as well.

I don't see the changes to the displaymode line as recommended (see above quote) in this thread. And of course you have to add the fadeSlideShow.sync.call(this); to the oninit From what the page is/was when I looked at it, change:


var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [760, 190], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["images/slide-1.png", "", "", ""],
["images/slide-2.png", "", "", ""],
["images/slide-3.png", "", "", ""],
["images/slide-4.png", "", "", ""],
["images/slide-5.png", "", "", ""],
["images/slide-6.png", "", "", ""],
["images/slide-7.png", "", "", ""],
["images/slide-8.png", "", "", ""]
],
displaymode: {type:'auto', pause:800, cycles:1, wraparound:false, delay:1250},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 400, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: "",
oninit: function(){
--this.setting.totalsteps;
}

})

to:


var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [760, 190], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["images/slide-1.png", "", "", ""],
["images/slide-2.png", "", "", ""],
["images/slide-3.png", "", "", ""],
["images/slide-4.png", "", "", ""],
["images/slide-5.png", "", "", ""],
["images/slide-6.png", "", "", ""],
["images/slide-7.png", "", "", ""],
["images/slide-8.png", "", "", ""]
],
displaymode: {type:'manual', pause:800, cycles:1, wraparound:true, delay:1250},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 400, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: "",
oninit: function(){
--this.setting.totalsteps;
fadeSlideShow.sync.call(this);
}

})

katebellami
05-31-2012, 11:52 AM
thanks! Unfortunately that actually delays the 2nd slide. So the first slide appears right away, then there is a long pause between the first and second slides. I posted the updated page at the same link.

jscheuer1
05-31-2012, 01:57 PM
Well, that's what the sync code does. If you want no slides at first, you don't want this code. You want a timeout for the entire slideshow.

For that -

To reserve space for the slideshow, put this in your stylesheet:


#fadeshow1 {width: 760px; height: 190px;}

And replace all of this:


<script type="text/javascript">

fadeSlideShow.sync = function(){
fadeSlideShow.sync.gals = fadeSlideShow.sync.gals || [];
fadeSlideShow.sync.duration = fadeSlideShow.sync.duration || 0;
fadeSlideShow.sync.gals.push(this);
fadeSlideShow.sync.duration = Math.max(fadeSlideShow.sync.duration, this.setting.fadeduration);
if(fadeSlideShow.sync.gals.length !== fadeSlideShow.sync.numGals){return;}
var thegals = fadeSlideShow.sync.gals;
fadeSlideShow.sync.duration *= 1.1;

function over(e){
var id = this.id, typeBool = e.type === 'mouseenter', showHide = typeBool? 'show' : 'hide';
jQuery.each(thegals, function(i, gal){
if(gal.setting.wrapperid !== id){
gal.setting.ismouseover = typeBool;
if(gal.setting.descreveal === 'ondemand'){gal.showhidedescpanel(showHide);}
}
});
}

setTimeout(function(){
jQuery.each(thegals, function(i, gal){
gal.setting.$wrapperdiv.bind('mouseenter mouseleave', over);
gal.setting.playtimer = setTimeout(
function(){
gal.setting.displaymode.type = 'auto';
gal.showslide('next');
},
gal.setting.displaymode.pause + (gal.setting.displaymode.delay || 0));
});
}, fadeSlideShow.sync.duration);
};

fadeSlideShow.sync.numGals = 1; //required - set to number of galleries



var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [760, 190], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["images/slide-1.png", "", "", ""],
["images/slide-2.png", "", "", ""],
["images/slide-3.png", "", "", ""],
["images/slide-4.png", "", "", ""],
["images/slide-5.png", "", "", ""],
["images/slide-6.png", "", "", ""],
["images/slide-7.png", "", "", ""],
["images/slide-8.png", "", "", ""]
],
displaymode: {type:'manual', pause:800, cycles:1, wraparound:true, delay:1250},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 400, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: "",
oninit: function(){
--this.setting.totalsteps;
fadeSlideShow.sync.call(this);
}

})


</script>

With:


<script type="text/javascript">
setTimeout(function(){
window.mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [760, 190], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["images/slide-1.png", "", "", ""],
["images/slide-2.png", "", "", ""],
["images/slide-3.png", "", "", ""],
["images/slide-4.png", "", "", ""],
["images/slide-5.png", "", "", ""],
["images/slide-6.png", "", "", ""],
["images/slide-7.png", "", "", ""],
["images/slide-8.png", "", "", ""]
],
displaymode: {type:'auto', pause:800, cycles:1, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 400, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: "",
oninit: function(){
--this.setting.totalsteps;
}

});
}, 1250);
</script>

Notice the red 1250 at the end there? That's the number of milliseconds delay for the show. You might want it to be like 2500 for a more dramatic effect.

katebellami
05-31-2012, 08:42 PM
Thanks! I think it is still slightly off. It looks like the first slide is now 'blinking' at the begining of the script. It shows up and then 'blinks' and then the rest of the slideshow plays out.

http://www.be-eventproductions.com/temp/index2.html

jscheuer1
05-31-2012, 09:38 PM
There's garbage from a poor job of cut and paste (most likely) or left over somehow from before, or I cannot be certain how it got there. But in the page's source code there's this:


<script type="text/javascript">

fadeSlideShow.sync = function(){
fadeSlideShow.sync.gals = fadeSlideShow.sync.gals || [];
fadeSlideShow.sync.duration = fadeSlideShow.sync.duration || 0;
fadeSlideShow.sync.gals.push(this);
fadeSlideShow.sync.duration = Math.max(fadeSlideShow.sync.duration, this.setting.fadeduration);
if(fadeSlideShow.sync.gals.length !== fadeSlideShow.sync.numGals){return;}
var thegals = fadeSlideShow.sync.gals;
fadeSlideShow.sync.duration *= 1.1;

function over(e){
var id = this.id, typeBool = e.type === 'mouseenter', showHide = typeBool? 'show' : 'hide';
jQuery.each(thegals, function(i, gal){
if(gal.setting.wrapperid !== id){
gal.setting.ismouseover = typeBool;
if(gal.setting.descreveal === 'ondemand'){gal.showhidedescpanel(showHide);}
}
});
}

setTimeout(function(){
jQuery.each(thegals, function(i, gal){
gal.setting.$wrapperdiv.bind('mouseenter mouseleave', over);
gal.setting.playtimer = setTimeout(
function(){
gal.setting.displaymode.type = 'auto';
gal.showslide('next');
},
gal.setting.displaymode.pause + (gal.setting.displaymode.delay || 0));
});
}, fadeSlideShow.sync.duration);
};

fadeSlideShow.sync.numGals = 1; //required - set to number of galleries



var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [760, 190], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["images/slide-1.png", "", "", ""],
["images/slide-2.png", "", "", ""],
["images/slide-3.png", "", "", ""],
["images/slide-4.png", "", "", ""],
["images/slide-5.png", "", "", ""],
["images/slide-6.png", "", "", ""],
["images/slide-7.png", "", "", ""],
["images/slide-8.png", "", "", ""]
],
displaymode: {type:'manual', pause:800, cycles:1, wraparound:true, delay:1250},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 400, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: "",
oninit: function(){
--this.setting.totalsteps;
fadeSlideShow.sync.call(this);
}

})


</script>With:


Code:

That doesn't belong. Get rid of it.

katebellami
06-01-2012, 12:47 AM
thank you! i have been working on this site on little sleep and am going crosseyed at this point! :)