Responsive Fade-in Slideshow Example 3

New Revised CSS Library Forums Web Tools

FAQs Awards Usage Terms Contact

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

Demo #1 (images set to width:100%):

Summary:

dimensions[] option set to ['100%', 800], so width portion of slideshow expands to fill the parent container's width.
Images inside set to width:100% to span entirely the slidehow container's width. Height is set to "auto" to scale accordingly.

Setting pros and cons:

Pros: A fully responsive slideshow width wise.
Cons: Loss of resolution if image is significantly smaller than slideshow in terms of width, due to scaling up.
2) Height of slideshow remains unresponsive, fixed at 800px.

CSS Initialization Code:

<style>

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

</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:

Demo #2 (images set to max-width:100%):

Summary:

dimensions[] option set to a fixed dimension of [450, 350].
Images inside set to max-width: 100% so only those with width greater than 450px will be scaled down to 450px.

Setting pros and cons:

Pros:For a slideshow with images varying widely in their width, this ensures no scaling will occur unless necessary, when an image's width exceeds that of the slideshow's.

CSS Initialization Code:

<style>

#fadeshow3 .gallerylayer img{
max-width: 100%;
height: auto;
}

</style>

<script type="text/javascript">

var mygallery3=new fadeSlideShow({
wrapperid: "fadeshow3", //ID of blank DIV on page to house Slideshow
dimensions: [450, 350], //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: