PDA

View Full Version : Ultimate Fade-In Slideshow with sound?



syrehn
11-23-2009, 09:51 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: Would it be possible to add a sound file to the slideshow with maybe play/stop features?

syrehn
11-24-2009, 03:05 PM
anyone know if this is possible?

jscheuer1
11-24-2009, 04:01 PM
Generally the two don't go together. You could play a sound on your page - always a good choice if your object is to annoy and drive away users, less so if it can at least be turned off, even less so if it starts out off and may be turned on - but for some kind of direct integration into a slide show, if synchronized timing is at all critical, use Flash. If timing isn't critical, just make the noise feature separate. If you attempt to integrate it with the show using javascript, due to load times varying between images and sound files, there is no guarantee things will mesh up very well.

For simple play/stop buttons for the slide show you may init your show something like so:


var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [468, 500], //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://stickmanlabs.com/images/kevin_vegas.jpg"],
["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: "fadeshow1toggler",
nav: function(num){
mygallery.navigate(num);
var dm = mygallery.setting.displaymode;
if(typeof dm.timer !== 'undefined'){
clearTimeout(dm.timer);
}
dm.timer = setTimeout(function(){
if(dm.type !== 'auto'){
dm.type = 'auto';
mygallery.showslide('next');
}
}, dm.pause);
}
})

Then you'll be able to use any or all of these buttons:


<input type="button" onclick="mygallery.navigate(mygallery.setting.imgindex);" value="Stop"><input type="button" onclick="mygallery.setting.nav(0);" value="1"><input type="button" onclick="mygallery.setting.nav(1);" value="2"><input type="button" onclick="mygallery.setting.nav(2);" value="3"><input type="button" onclick="mygallery.setting.nav(3);" value="4"><input type="button" onclick="mygallery.setting.nav(4);" value="5"><input type="button" onclick="var dm=mygallery.setting.displaymode;if(dm.type!=='auto'){dm.type='auto';mygallery.showslide('next');}" value="Go">

which may be placed anywhere on the page that you like.