Ultimate Fade-in slideshow (v2.4) Image Overflow

1) Script Title: Ultimate Fade-in slideshow (v2.4)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nslideshow.htm

3) Describe problem: Images larger than wrapper div do not display completely. wrapper has 'overflow:hidden'

This is really not a bug because of this comment in the example :P

dimensions: [300, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image

4) Solution:

Code:

---

...
138: var imgdimensions=[$slideimage.width(), $slideimage.height()] //center align image
139: $slideimage.css({marginLeft: (imgdimensions[0]>0 && imgdimensions[0]<setting.dimensions[0])? setting.dimensions[0]/2-imgdimensions[0]/2 : 0})
140: $slideimage.css({marginTop: (imgdimensions[1]>0 && imgdimensions[1]<setting.dimensions[1])? setting.dimensions[1]/2-imgdimensions[1]/2 : 0})
    $slideimage.css({maxWidth: setting.dimensions[0]})
    $slideimage.css({maxHeight: setting.dimensions[1]})
141: if (setting.descreveal=="peekaboo" && setting.longestdesc!=""){ //if descreveal is set to "peekaboo", make sure description panel is hidden before next slide is shown
142:      clearTimeout(setting.hidedesctimer) //clear hide desc panel timer
143:      slideshow.showhidedescpanel('hide', 0) //and hide it immediately
144: }
...

---

This way the image will adapt to the wrapper.
However the proportion may not match the one of the wrapper div, in this case you should be able to set the wrapper's background color as it is hardcoded as 'black'.

Hope this helps someone, and that it can be included in the script.

DD thanks for all the great scripts, keep up the good work.

You need not edit the script for this. CSS style may be used, example (where fadeshow1 is the unique id, the wrapperid for the show):

Code:

---

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

#fadeshow1 .gallerylayer img { /* establishes max dimensions for images */
        max-width: 300px;
        max-height: 180px;
}
</style>

---

Put that in the head of the page or use its rules in an existing stylesheet for the page. Edit the color, width, and height values as desired. Be sure to use the !important keyword to override the scripted background color.

Great reply.

Haven't tought of that, i'm more a coder than a web designer :)