New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact

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

Summary:

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: