PDA

View Full Version : Change the PAUSE behaviour ....



luisbernas
03-02-2010, 04:14 PM
1) Script Title: Ultimate Fade-in slideshow (v2.1)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

3) Describe problem: First of all, thank you VERY MUCH for the existence of Dynamic HTML. I've been using it for many time !!!!

Ok, my question is : I'm using this slideshow to show images very fast, as you can see in this the link www.montanashoplisboa.com/slide.htm (http://www.montanashoplisboa.com/slide.htm) ....

Is is possible, instead making a PAUSE on mouse over, reduce the speed of the slideshow (Pause = Original value x 10) ...i don't know if i am making me understand .....

(i'm sorry about my bad english ..........:( )

Thanks in advanced,
Luis Bernardo.

ddadmin
03-03-2010, 02:26 AM
You can easily change the pause between image changes in your config code:


var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
["http://i30.tinypic.com/531q3n.jpg"],
["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})

Change 2500 to the desired pause in milliseconds.

jscheuer1
03-03-2010, 04:22 AM
That will only change the 'pause' (rotation rate) for the entire show. I think that what luisbernas wants though is to change the mouseover pause (which currently actually stops the show temporarily) to a mouseover slowing of the rotation rate to one that's 10 times slower than the configured rate. Then on mouseout, instead of what it currently does (which is resume the show), instead of that, speed back up to the configured rate.

If I have that much right, we need to change (from the source code of www.montanashoplisboa.com/slide.htm):


<script type="text/javascript">

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [450, 600], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["tee/1.jpg"],
["tee/2.jpg"],
["tee/3.jpg"],
["tee/3.jpg"],
["tee/4.jpg"],
["tee/5.jpg"],
["tee/6.jpg"],
["tee/7.jpg"],
["tee/8.jpg"],
["tee/9.jpg"],
["tee/10.jpg"] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:500, cycles:0, wraparound:false,randomize:true},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 10, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})

</script>

to (additions highlighted):


<script type="text/javascript">

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [450, 600], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["tee/1.jpg"],
["tee/2.jpg"],
["tee/3.jpg"],
["tee/3.jpg"],
["tee/4.jpg"],
["tee/5.jpg"],
["tee/6.jpg"],
["tee/7.jpg"],
["tee/8.jpg"],
["tee/9.jpg"],
["tee/10.jpg"] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:500, cycles:0, wraparound:false,randomize:true},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 10, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: "",
oninit: function(){
var show = this.setting, inst = this, savedpause = show.displaymode.pause;
show.$wrapperdiv.unbind('mouseenter mouseleave').hover(function(){
clearTimeout(show.playtimer);
show.displaymode.pause = savedpause * 10;
show.playtimer = setTimeout(function(){inst.showslide(++show.curimage);}, show.displaymode.pause);
}, function(){
clearTimeout(show.playtimer);
show.displaymode.pause = savedpause;
inst.showslide(++show.curimage);
});
}
})

</script>

Notes: Be sure not to miss the added comma (red) here:


togglerid: "",

Also, further refinement may be required.

luisbernas
03-03-2010, 10:48 AM
John,

THANK YOU VERY MUCH !!!!!

I have no words to express what i felt when I saw my slideshow working the way I wanteded !!!!!

John rules !!!!