Responsive Fade-in Slideshow Example 1

Home Image slide show Ultimate Fade-in slideshow script Guide to Responsive Fade In Slideshow Example 1

Demo:

Summary:

dimensions[] option set to ['100%', 800], so width portion of slideshow expands to fill the parent container's width.
Images all shown in their native dimensions, which are 1000px or more in width and around 800px tall.

Setting pros and cons:

Pros: 1) Easy way to take advantage of the user's full horizontal display area to show images that are large in dimensions.
2) Images are shown in their native dimensions with no scaling/ potential lost of resolution.
Con: 1) Portion of each image may be hidden if parent container isn't wide enough.
2) Portion of image will be hidden in devices with width less than each image's width, or many mobile devices.

Initialization Code:

<script type="text/javascript">

var mygallery3=new fadeSlideShow({
wrapperid: "fadeshow3", //ID of blank DIV on page to house Slideshow
dimensions: ['100%', 800], //width/height of gallery in pixels or "percentage" (for fluid dimensions).
imagearray: [
["fullpageslideshow/img/img3.jpg", "", ""],
["fullpageslideshow/img/img5.jpg", "", ""],
["fullpageslideshow/img/img2.jpg", "", ""],
["fullpageslideshow/img/img0.jpg", "", ""] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:3000, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
togglerid: ""
})

</script>

Images used: