PDA

View Full Version : Ultimate Fade-in slideshow / Start with closed description-panel?



Jongen
09-13-2011, 10:38 PM
1) Script Title: Ultimate Fade-in slideshow (v2.4)

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

3) Describe problem: I have set the descreveal-settings to "always".

Now I really would like to start the slide-show with a closed (not hidden) description-panel. So the user sees the 'full' image and can decide him/herself to open the description. Is it possible to do so?

FrickenTrevor
09-13-2011, 11:11 PM
Im guessing you want the description to pop in and out when the user wants it too?

In the main javascript, change what ever you have to the highlighted



<script type="text/javascript">

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: ""
})


</script>


Basically change descreveal: always to descreveal: ondemand

Jongen
09-13-2011, 11:23 PM
Thank you FrickenTrevor but that's not what I meant.

With the "ondemand"-setting the panel appears and disappears on moving in and out the image.

The nice thing about the "always"-setting is that the caption hides or stays in place while going back and forth the images. The 'problem' is that as a default the caption shows up at the start. And I would like the caption-panel to be closed at the start.

jscheuer1
09-14-2011, 12:53 AM
OK, put this stylesheet in the head of the page, or put its rule in an existing stylesheet for the page:


<style type="text/css">
.fadeslidedescdiv div {
display: none;
}
</style>

Then, for your new fadeSlideShow() call add the highlighted:


<script type="text/javascript">
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: "always",
togglerid: "",
oninit: function(){
this.showhidedescpanel('hide');
var d = this.setting.$descpanel.find('div');
setTimeout(function(){d.css({display: 'block'});}, fadeSlideShow_descpanel.slidespeed + 10);
}
})
</script>

Don't miss the added comma (red) after the togglerid value.

Jongen
09-14-2011, 07:09 AM
Thank you John!

I didn't describe my 'problem' clear, I'm affraid, so I added a screendump.
I would like to start my slideshow with the panel as in image 2, not image 1, as it is now.
I hope you can and will help me.

http://members.casema.nl/lisettevanboxel/images/captionsfadeinslideshow.jpg

jscheuer1
09-14-2011, 07:47 AM
I already did. Use the style and code as explained in my previous post. If there's a problem implementing it, give us a link to the page.

I know it works as I tested it here and it works. What happens is the show loads up with no description visible, only the restore description icon, like in your image 2. Clicking on it will show the description.

Demo:

http://home.comcast.net/~jscheuer1/side/ufade_2/index_always_start_hidden.htm

Jongen
09-14-2011, 11:51 AM
THANK YOU!!!
(And apologise, I made a mistake with the stylesheet.)

I really appreciate your help John, and the help and expertise you give hundreds of others! I will donate to the IRC.

jscheuer1
09-14-2011, 01:47 PM
In testing here, that stylesheet/style only seems to be important in IE. In that browser without that style the description is seen albeit quite briefly when the page first loads.