PDA

View Full Version : Ultimate Fade-in slideshow (v2.4) => minor modifications



vian&flo
07-07-2010, 09:35 AM
I'm trying to get the amazing "Ultimate Fade-in slideshow (v2.4)" on my web site, like introduction page. It works properly, with all default parametres. But using only 1 cycle, I want the script not comes back to the first picture when the cycle is completed, but stays on the last pic. How can I modify the fadeslideshow.js file to ?

Moreover, can we change the DIV's black background color just closed to the start of the scirpt ?

Hopping you will understand my question.
Many thanks,

Vian&Flo
France :)

jscheuer1
07-07-2010, 02:45 PM
For the first question, add an onslide function, as highlighted and shown below (don't miss the added comma, red, after the togglerid entry):


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:1, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: "",
onslide: function(){
if(this.setting.currentstep === this.setting.totalsteps - 1){
this.navigate(this.setting.imagearray.length - 1);
}
}
})

Your other question is unclear. What color is closed? I think you meant close, in which case you mean to change the background color.

That can be done in a stylesheet placed in the head of your page:


<style type="text/css">
#fadeshow1, #fadeshow1 .gallerylayer {
background-color: white!important;
}
</style>

where fadeshow1 is the wrapperid for your slide show. You can use any valid css color name, hex, or rgb, designation in place of white in the above, except transparent. Transparent will cause the images to bleed through in some cases. Make sure to use the highlighted !important keyword. It's required to override the scripted background color (black).

If you already have a stylesheet for the page, you can add the rule:


#fadeshow1, #fadeshow1 .gallerylayer {
background-color: white!important;
}

to it instead of creating a new stylesheet.

vian&flo
07-08-2010, 07:15 AM
Thank you very much jscheuer1, it's exactly that I want to do for both questions.
Thanks for your quick answer, and sorry for the wrong topic category !

See you,
By
Vian&Flo