Jive Factory: Responsive Slideshow

Topics Covered in This Mobile & Responsive Web Design Tutorial:

Getting the Slideshow Working, Styling the Slideshow Content & Controls, Preventing Hidden Images from Loading

Exercise Preview

Exercise Overview

In this exercise, you’ll learn how to create a responsive slideshow using a free jQuery plugin called FlexSlider2.

1. We’ll be using a new folder of provided files for this exercise. It contains the same Jive Factory page you’ve been working on in previous exercises, except we’ve added some starter content for the slideshow. Close any files you may have open in your code editor to avoid confusion.
2. In your code editor, open index.html from the Jive Responsive Slideshow folder. Be sure to go into the right folder!

3. The slideshow code starts on line 53. Take a moment to get familiar with it. The ul tag offers a class called slides. Each list item has a slide class. Each list item contains:

   • A div with a photo class and an inlined style that loads the image as a background.

   • A div with an overlay class containing the band name and show details.

   Why are we using CSS background images instead of HTML images? It has to do with how images are loaded. We’ve set the slideshow div to display: none on mobile devices to save screen space. If we used image tags, the images will be downloaded, even when they aren’t displayed. That means mobile devices would still download them even though they can’t see them! One workaround is to use background images. You must be careful though. Setting a div (with a background image) to display: none will still load the image! You must set the parent of the div with the background image to display: none so the image will not be loaded. In an earlier exercise we set the slideshow div to display: none on mobile devices. The photo divs are inside of the slideshow div, so using background images will allow us to better optimize the loading time of mobile devices. You can visit tinyurl.com/asset-downloading for more info on loading issues.

4. Preview index.html in a browser and make sure the browser window is set to the phablet breakpoint or wider so you can see the slideshow.

   The overlay text for our four slides is showing, but the photos aren’t. That’s because background images don’t take up space. They only appear in the visible part of a div. With no content in those div tags, they collapse and we don’t see anything. At first you’d think we can simply set a width/height. But our layout is fluid, so fixed sizes don’t work! One workaround is to add a percentage of top padding (which is inside the div). The exact percentage depends on the aspect ratio of the image. Our images are 1876 wide X 1108 tall. 1108/1876 = 0.5906. We’ll round that down to 0.59, so 59% is what we’ll need!

5. In your code editor, open main.css from the css folder.

6. In the min-width: 480px media query, above the footer.copyright rule (around line 319), add the following rule:

   .slideshow.slide.photo {
      padding-top: 59%;
      background-size: cover;
   }

   NOTE: background-size: cover tells the background image to fill the entire div.

   How Padding is Calculated

   You may expect that because the object has a height of zero, that a percentage-based top padding would still be zero. The reason this works is because all padding (top, right, bottom, or left) is calculated based on the object’s width, never height. It actually makes sense if you think about it. 5% padding is 5% of what? If the 5% is based on height and width, the top/bottom padding would be different from the left/right padding (unless the object is a perfect square). Different vertical or horizontal padding would look odd. To keep consistent padding around all sides, the percentage is based on the width. That’s why this trick works!

7. Save the file.

8. Preview index.html. Good! Now that our images are showing, we can start to work with the slideshow plugin we’ll be using.

Linking to the Provided Files

FlexSlider2 is a free jQuery slideshow plugin. There are many slideshow plugins available, but this one can handle flexible widths and touch inputs for sliding between images. We’ve already downloaded FlexSlider2 and included the files in the Jive Responsive Slideshow folder. You can visit flexslider.woothemes.com to download these files, find helpful documentation, usage tips, and other support.

At a minimum, FlexSlider2 requires three files to run—jQuery, the FlexSlider2 JavaScript file, and the FlexSlider2 CSS file. The provided index.html already has a link to jQuery, so we just need to link to the other two.

1. We’ll start by linking to the FlexSlider2 CSS file. In your code editor, go back to index.html.

2. At the top of the file, link to the FlexSlider2 CSS file by adding the following bold code:

   <link rel="stylesheet" href="css/normalize.min.css">
   <link rel="stylesheet" href="flexslider/flexslider.css">
   <link rel="stylesheet" href="css/main.css">

3. Next we’ll link to the FlexSlider2 JavaScript file. Scroll to the bottom of the code.

4. Above the link to main.js, add the following bold code:

   <script src="flexslider/jquery.flexslider-min.js"></script>
   <script src="js/main.js"></script>

   NOTE: We’re using the compressed (minified) version of FlexSlider2 because it’s a smaller file size and therefore downloads faster.

5. Save the file.

Starting the Slideshow

1. Now that the page is linked to all the required files, we can start using FlexSlider2. We’ll start with some code we got from the FlexSlider2 website. We saved this code into a file for you. In the snippets folder inside the Jive Responsive Slideshow folder, open slider-example.js in your code editor.
2. Select all the code.
3. Copy it.
4. Close the file.
5. In your code editor, open main.js from the js folder inside the Jive Responsive Slideshow folder.
6. Paste the code.

7. Change the placeholder selector to target the .slideshow div instead:

   $(document).ready(function(){
      $('.slideshow').flexslider({
         animation: "slide", 
         directionNav: false
      });
   });

   Note the following:

   • $('.slideshow').flexslider() enables the flexslider() function on the.slideshow div. In your own site you would need to target the element you set as your container element. Use standard CSS syntax to target the element.

   • animation: "slide" sets the animation to slide, instead of the default fade.

   • directionNav: false disables the next/prev arrows which we don’t want in our design.

8. Save the file.

9. Save and preview index.html in a browser. Wait a few seconds until it switches to the next slide. The slideshow is working! Inside the slideshow area, notice there are no current slide indicator dots which are typically found at the bottom of many sliders. The slider has this feature, but we need to adjust our CSS to get them to appear. We’ll also need to improve the style of the captions below the photos.

Styling the FlexSlider Navigation Control

FlexSlider has a built-in indicator dot navigation control. Let’s get the controls to appear. They have been set with absolute positioning, but they need to be positioned relative to their parent .slideshow div.

1. Switch back to main.css.

2. In the min-width: 480px media query, find the .slideshow.slide.photo (around line 319). Above that rule, add the following:

   .slideshow {
      position: relative;
   }

3. Let’s position the navigation control to the bottom right of the slideshow. Below the .slideshow.slide.photo rule (around line 322), add the following code to position the FlexSlider nav:

   .slideshow.flex-control-nav {
      bottom: 20px;
      right: 20px;
      width: auto;
      z-index: 100;
   }

   NOTE: flex-control-nav is a class that was added by FlexSlider.

4. Save the file.
5. Preview index.html in a browser. The dots are black and hard to see, but they’re there at the bottom right of the slideshow. Let’s set a more appropriate color for the controls.
6. Return to main.css in your code editor.

7. After the .slideshow.flex-control-nav rule (around line 326), add the following code:

   .slideshow.flex-control-nav li a {
      background: #fcb802;
   }

8. We need to show which slide is currently active. After the .slideshow.flex-control-nav li a rule, add the following code:

   .slideshow.flex-control-nav li a.flex-active {
      background: #fff;
   }

   NOTE: flex-active is another class that the FlexSlider JavaScript add the active slide.

9. Save and preview index.html in a browser. The slideshow navigation is now easier to see and actually useful! Click a dot to jump to that slide.

Styling the Caption Overlays

Let’s style the caption overlays for the slideshow. Each overlay should be positioned on top of each slide. We should declare a position property for the .slide parent element so we can position the overlay relative to the slide’s bottom.

1. Above the .slideshow.slide.photo rule, add the following code (around line 322):

   .slideshow.slide {
      position: relative;
   }

2. Now let’s position the overlay. Below the .slideshow.slide rule (around line 322), add the following code:

   .slideshow.slide.overlay {
      position: absolute;
      background: rgba(0,0,0,.5);
      z-index: 100;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 20px;
      border-top: 1px solid #7e5c01;
   }

3. Save the file.
4. Preview index.html in a browser. Looks great, but the band names could use more emphasis. They are wrapped in strong tags, so let’s style them.

5. Back in main.css, after the .slideshow.slide.overlay rule, add the following code:

   .slideshow.slide.overlay strong {
      text-transform: uppercase;
      color: #fcb802;
      margin-right: 15px;
   }

6. Save the file.
7. Preview index.html in a browser.
8. Resize the window to a smaller phablet size (just a bit larger than the mobile layout). The longer band names crash into the controls at this point. It would look nicer if the band name was on its own line.

9. Back in main.css, edit the .slideshow.slide.overlay strong rule by adding the following bold code:

   .slideshow.slide.overlay strong {
      display: block;
      text-transform: uppercase;
      color: #fcb802;
      margin-right: 15px;
   }

10. Save the file.
11. Preview index.html in a browser. Better! Resize the browser window to the tablet breakpoint. Notice that the band name and show date could be a little bigger here. They also don’t have to break onto two lines.
12. Return to your code editor.
13. In the min-width: 740px media query, find the aside rule (around line 406).

14. Above the aside rule, add the following new rules:

    .slideshow.slide.overlay {
       font-size: 1.4rem;
    }.slideshow.slide.overlay strong {
       display: inline;
    }

15. Save the file.

16. Preview index.html in a browser. Resize the window to see the tablet and desktop styles and check out the responsive slideshow. Nice!

Preventing the Images from Loading on Mobile

1. Preview index.html in Chrome.
2. CTRL–click (Mac) or Right–click (Windows) on the page and choose Inspect.
3. If you’re still in device emulation mode, click the Toggle device toolbar button .

4. We want to dock the DevTools to the right side of the window. At the top right of the DevTools panel click this button and choose Dock to right as shown below:

   

5. Resize the available space on the left of the DevTools, so you are seeing the mobile styles (with the DevTools on the right).
6. Reload the page.
7. In the DevTools, click the Resources tab at the top. If you don’t see it, click the overflow >> button to the right of the available tabs (Elements, Network, etc.) and choose Resources from the menu that appears.
8. Expand the Frames folder if it isn’t already expanded.
9. Expand the (index.html) folder.

10. Expand the Images folder and notice that our four slideshow images (they begin with slideshow-) are listed here. That means they are being loaded on the site. Our slideshow’s structure goes like this: div.slideshow > li.slide > div.photo

    The div.photo has the background image. We mentioned earlier that setting display: none on a parent element would prevent the loading of background images on child elements. That should have worked, and was working before adding the JavaScript for the slideshow. The slideshow JS is interfering, because the JS targets the same .slideshow div we set to display: none. Luckily we can set the display: none on a different parent div.

11. Leave the Chrome window open exactly as it is.
12. Switch back to main.css.

13. In the max-width: 479px media query, edit the .slideshow rule (around line 267) to add the following selector (don’t miss the comma):

    .slideshow,.slideshow.slide {
       display: none;
    }

14. Save the file.
15. Switch back to Chrome.
16. Our index.html should still be there with the Inspector open to the Resources tab. Click the Reload button, expand the Images folder, and notice that the four slideshow images disappear from the list. Awesome!

17. Save and close any files you have open.