CSS Codes
CSS Layouts

Guide to Responsive Ultimate Fade In Slideshow

With version 2.6+ of Ultimate Fade In Slideshow, you can now display slideshows that are responsive in nature to the browser size or device screen size to optimize the user's viewing experience. The key to enabling this to is the slideshow's ability to take either a px or percentage value when specifying its dimensions, for example:

var mygallery3=new fadeSlideShow({
 wrapperid: "fadeshow3", //ID of blank DIV on page to house Slideshow
 dimensions: ['90%', 400], //width/height of gallery in pixels or "percentage" (for fluid dimensions).
 "
 "
})

Here the dimensions[] option line in red sets the slideshow to 90% of its parent container's width by 400px (note the quotes around percentage values). When you set at least one side of the slideshow to a percentage value, the slideshow becomes responsive, with that side's value changing based on the slideshow's parent container's dimension.

You can set the dimensions[] option to either all pixels (non responsive), one of its values being in percentage, or both:

dimensions: [300, 200], // 300px by 200px

dimensions: ['80%', 200] // 80% of parent container size by 200px

dimensions: ['90%', '80%'] // 90% by 80% of parent container size

Which combination to use will be the focus of this guide. We'll also look at setting the actual images' dimensions via CSS, and using CSS media queries to create break points that trigger an alteration in the slideshow's dimensions. At the end of the day it's all about finding the best way to showcase the images inside your slideshow regardless of the user's browser or device size.

Fluid Slideshow dimensions, native image dimensions

The basic implementation of a responsive slideshow, this involves simply setting one or both values of the dimensions[] option to a percentage value while leaving the dimensions of the images inside untouched. The slideshow's dimensions then becomes dependent on its parent container's, while the images contained inside remain their native width/height for each image. Such a setup is adequate when you are showcasing images with large native dimensions that you wish the slideshow to expand as much horizontally as possible to accommodate whilst not scaling the images inside it.

In the below example, I'm displaying images that are all greater than 1000px in width and around 800px in height. For this I'll set the slideshow's dimensions[] option to ['100%', 800]; with the slideshow placed in a fluid container such as the BODY itself,  as much of each image horizontally will be revealed based on the available screen estate. Vertically I've set the slideshow to 800px in height, which ensures that every portion of each image vertically will be seen.

Dynamic Slideshow dimensions, native image dimensions

We can raise the basic fluid dimensions concept a few IQ points up by using CSS or CSS media queries on top of it. This lets us  set a limit on the maximum/minimum value applied to dimensions, or even selectively apply different dimension values to the slideshow. Such a dynamic dimension can be achieved using one of the following ways:

  • Using CSS max-width, min-width, max-height, or min-height properties
  • Using CSS media queries.

The first approach is sufficient if all you need is to set a cap on the width or height of the slideshow in terms of upper or lower limit, such as a fluid slideshow that should never exceed 800px in width.  For anything more descriminating, you can turn to CSS media queries. Both methods entail defining a style sheet targeting the slideshow's main wrapper ID, and most importantly, using the CSS keyword !important to ensure the defined styles take precedence over those defined automatically by the slideshow script. To illustrate given the below slideshow with its initial dimensions[] setting to ['100%', 400]:

<script type="text/javascript">

var mygallery3=new fadeSlideShow({
 wrapperid: "fadeshow3", //ID of blank DIV on page to house Slideshow
 dimensions: ['100%', 400], //width/height of gallery in pixels. Should reflect dimensions of largest image
 imagearray: [
  ["1.jpg", "", "", "There is beauty to be found in nature not just in grand landscapes, but in the petals of an unassuming flower"],
  ["3.jpg", "", "", "The iconic telephone booths of London now in a very unfamiliar place."],
  ["7.jpg", "", "", "A piano not played is a piano that's wasting away. "],
  ["4.jpg", "", "", "Alone and being lonely. It's a state of mind. Which one does this image evoke in you?"] //<--no trailing comma after very last image element!
 ],
 displaymode: {type:'auto', pause:3000, cycles:1, wraparound:false},
 persist: false, //remember last viewed slide and recall within same session?
 fadeduration: 500, //transition duration (milliseconds)
 descreveal: "peekaboo",
 togglerid: ""
})

</script>

<div id="fadeshow3"></div>

By default the slideshow's width will span 100% of the parent container's. Lets set an upper bound to this, so that it expands up to 800px and not beyond:

max-width example<style>

#fadeshow3{
max-width: 800px !important;
}

</style>

Click here to see an example of a fluid slideshow with its width limited by CSS's max-width property.

As mentioned, you can also make use of CSS media queries in your stylesheet to add more complex conditions dictating the slideshow's dimensions. We'll see an example of this later.

Dynamic image dimensions

Lets move our responsiveness talk to the next half of the equation- the images themselves. So far regardless of how the slideshow dimensions change to our delight, the images themselves are still presented in their native size, which could be the dead end on our way to a truly responsive slideshow. Luckily thanks to CSS the size of the images can also be manipulated, just like with slideshow container housing them.

With images, you'll mostly be using a combination of CSS's:

  • width:100% or max-width:100% for width, and
  • height: auto for height

These settings allow the images to expand to the width of the slideshow's while maintaining their proportions. A value of width:100% scales every image inside the slideshow to cover 100% of the slideshow horizontally. Compare that to max-width: 100%, which will only scale the image and downwards only if the image's width is greater than the width of the slideshow, so it always fits fully within the slideshow container. If the image's native width is smaller than the slideshow's, no scaling occurs. In both cases, you should also define height: auto so the image's height is scaled accordingly and in proportion to the width.

The following two stylesheets target the images of our slideshow with wrapper ID "fadeshow2" in the two different ways mentioned:

width:100% example<style>

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

</style>

max-width:100% example<style>

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

</style>

Observe the way to target the images inside a Fade Slide Show- by referencing the slideshow's wrapper ID first, then the .gallerylayer class, and finally, the img tag.

Click here to see two examples of a slideshow, one with its images set to width:100%, and the other, max-width:100%.

Use width:100% when images within your slideshow all share similar dimensions and are not too far off from those of the slideshow's. Otherwise, the difference in resolution/ quality of some or all of your images will become discernable to viewers.

Use max-width:100% instead if your slideshow's images are more varied in sizes and retaining their native dimensions is a consideration to prevent loss of resolution when they're shown. With max-width:100%, an image will NOT be scaled to fit the slideshow unless the image's width is larger than the slideshow's (whether by default or due to the slideshow being fluid in dimension and resized). For images that are smaller, they will simply be shown in their original sizes.

CSS media queries

And last but not least, we arrive at CSS media queries, the most configurable tool in our responsive arsenal. Used in combination with the techniques above, we can add custom breakpoints for when the slideshow or its images should be a certain dimension. Please read Introduction to CSS Media Queries first if you're not already familiar with the general concepts.

Consider the first slideshow example on this page- if you resize the page downwards, you'll notice the height of the slideshow remains fixed, creating an increasingly unnecessary vertical black space. We can use CSS media queries to dynamically change that height value based on how wide the parent container- in this case simply the document itself- is at any time. There's no point in having a 800px tall slideshow if the width of the document is 400px and the images inside the slideshow are all wider than they are taller is there? The way to fixing this is with media queries, by setting breakpoints for the height of the slideshow based on the width of the document:

<!doctype html>

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

Click here to see an example of a fluid slideshow with width set to 100% and its height dynamically changing based on the width of the document.

Table Of Contents