PDA

View Full Version : Dynamic Fade in Slide show, auto start with controls...



rmastal
03-02-2012, 03:38 PM
Ultimate Fade-in Slideshow

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

Problem:
When implementing this script with 'auto' start and using custom buttons; is there a way to keep the slideshow going once a user has chosen to use the buttons? Currently; it works perfect on start and works perfect if a person is using the arrows to go forwards or back... but if the user decides to stop hitting the arrows; the slideshow stops where it's at... make sense?

My script:


<script type="text/javascript">

var mygallery=new fadeSlideShow({
wrapperid: "fadeslideshow", //ID of blank DIV on page to house Slideshow
dimensions: [1024, 768], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["images/awesomeness.jpg", "", ""],


["images/dewars-1.jpg", "", ""],
["images/dewars-2.jpg", "", ""],
["images/dewars-3.jpg", "", ""],
["images/logos-1.jpg", "", ""],
["images/peacock-home.jpg", "http://www.peacockhome.com", "_new"],
["images/peacock-2.jpg", "", ""],
["images/peacock-3.jpg", "", ""],
["images/CCA-logo.jpg", "", ""],
["images/CCA-print-1.jpg", "", ""],
["images/CCA-print-2.jpg", "", ""],
["images/CCA-1.jpg", "", ""],
["images/CCA-2.jpg", "", ""],
["images/CCA-3.jpg", "", ""],
["images/moliere.jpg", "", ""],
["images/nicole-jacob.jpg", "", ""],
["images/jim-beam-1.jpg", "", ""],
["images/jim-beam-2.jpg", "", ""],
["images/jim-beam-3.jpg", "", ""],
["images/FNCE-logos.jpg", "", ""],
["images/bopi-1.jpg", "", ""],
["images/bopi-2.jpg", "", ""],
["images/bopi-3.jpg", "", ""],
["images/GH-JC-1.jpg", "", ""],
["images/GH-JC-2.jpg", "", ""],
["images/GH-JC-3.jpg", "", ""],
["images/GH-IssueWaves-1.jpg", "", ""],
["images/GH-IssueWaves-2.jpg", "", ""],
["images/GH-IssueWaves-3.jpg", "", ""],
["images/resource-logo.jpg", "", ""],
["images/MetropolisStrategies-1.jpg", "", ""],
["images/MetropolisStrategies-2.jpg", "", ""],
["images/MetropolisStrategies-3.jpg", "", ""],
["images/TAG-1.jpg", "", ""],
["images/TAG-2.jpg", "", ""],
["images/TAG-3.jpg", "", ""] //<--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: "always",
togglerid: "slideshowtoggler"
})

</script>

jscheuer1
03-02-2012, 04:48 PM
See:

http://www.dynamicdrive.com/forums/blog.php?b=248

There are a lot options to fulfil this request. You could simply download and add the extra buttons script with no pend option and a pause with nextprevresume true, ex:


<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" src="extrabuttons.js">
// Extra Buttons Script (c)2011 John Davenport Scheuer
// as first seen in http://www.dynamicdrive.com/forums/
// add on for Ultimate Fade In Slideshow
// username: jscheuer1 - This Notice Must Remain for Legal Use
</script>
<script type="text/javascript">
var mygallery=new fadeSlideShow({
wrapperid: "fadeslideshow", //ID of blank DIV on page to house Slideshow
dimensions: [1024, 768], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["images/awesomeness.jpg", "", ""],
["images/ . . .

. . . G-1.jpg", "", ""],
["images/TAG-2.jpg", "", ""],
["images/TAG-3.jpg", "", ""] //<--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: "always",
extrabuttons: {pause: 6000, nextprevresume: true},
togglerid: "slideshowtoggler"
})

</script>

But after you see the options available you might want to do it another way. You might prefer that the next/prev buttons still stop the show, but add a pause/resume button, or any of various other possible setups. It's up to you.