Home Image slide show Ultimate Fade-in slideshow script Guide to Responsive Fade In Slideshow Example 2
Demo:
Summary:
dimensions[]
option set to
['100%', 400], so width portion of slideshow expands to fill the parent
container's width **.max-width
property to set an upper bound on
how much the slideshow can expand width wise.Setting pros and cons:
Initialization Code:
<script type="text/javascript">
var mygallery3=new fadeSlideShow({
wrapperid: "fadeshow3", //ID of blank DIV on
page to house Slideshow
dimensions: ['100%', 400], //width/height of
gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["1.jpg", "", "", "There is beauty to be found in nature not just in
grand landscapes, but in the petals of an unassuming flower"],
["3.jpg", "", "", "The iconic telephone booths of London now in a very
unfamiliar place."],
["7.jpg", "", "", "A piano not played is a piano that's wasting away. "],
["4.jpg", "", "", "Alone and being lonely. It's a state of mind. Which
one does this image evoke in you?"] //<--no trailing comma after very last image
element!
],
displaymode: {type:'auto', pause:3000, cycles:1, wraparound:false},
persist: false, //remember last viewed slide and recall within same
session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "peekaboo",
togglerid: ""
})
</script>
Images used: