Responsive Fade-in Slideshow Example 4

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

Demo (Slideshow with height breakpoints using CSS media query):

Summary:

dimensions[] option set to ['100%', 800], so width portion of slideshow expands to fill the parent container's width.
CSS media queries defined to alter the height of the slideshow based on selected breaking points.
Images inside set to width:100% to span entirely the slidehow container's width. Height is set to "auto" to scale accordingly.

CSS and Initialization Code:

<style>

#fadeshow2 .gallerylayer img{
width: 100%;
height: auto;
}

@media screen and (max-width: 860px){ /* when document is 860px or less */
#fadeshow2{
height: 573px !important;
}
}

@media screen and (max-width: 600px){ /* when document is 600px or less */
#fadeshow2{
height: 400px !important;
}
}

@media screen and (max-width: 480px){ /* when document is 480px or less */
#fadeshow2{
height: 320px !important;
}
}

</style>

<script type="text/javascript">

var mygallery2=new fadeSlideShow({
wrapperid: "fadeshow2", //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: