Home
Image slide show
Ultimate Fade-in slideshow script
Guide to Responsive Fade In
Slideshow
Example 3.1 and 3.2
Summary:
dimensions[]
option set to
['100%', 800], so width portion of slideshow expands to fill the parent
container's width.width:100%
to span entirely the slidehow
container's width. Height is set to "auto
" to scale accordingly.Setting pros and cons:
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:
Summary:
max-width: 100%
so only those with width greater
than 450px will be scaled down to 450px.Setting pros and cons:
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: