Chapter 6. Creating Slideshows and Sliders

Traditionally created in Flash, slideshows and sliders are a great way to show off photos, products, illustrations, portfolios, and more. Hands-down, creating slideshows is one of the most common tasks for jQuery developers. In this chapter, we'll take a look at how to create a simple slideshow from scratch and then we'll take a look at the Basic Slider plugin to add some more features to a slideshow. Finally, we'll take a look at the powerful and flexible Cycle2 plugin, which can be used to create many different types of slideshows and sliders.

In this chapter, we'll cover:

• How to plan a slideshow

• How to write a simple crossfading slideshow from scratch

• How to create a simple slideshow with controls using the Basic Slider plugin

• How to use the Cycle2 plugin to create animated slideshows

• How to create carousels with the Cycle2 plugin

• How to use the Cycle2 plugin to create a combination carousel/slideshow

Planning a slideshow or slider

There are a few things to consider when you're preparing to build a jQuery slideshow or slider.

1. First, you have to decide what the experience will be for users who have JavaScript disabled. The priority of the various pieces of content in the slideshow should be your guide. If the slideshow is simply featuring bits of content available elsewhere on the site, then it should be sufficient to simply show one featured photo or slide. If the slideshow is the only way to access the content, then you'll have to be sure to make that content available for users without JavaScript enabled. We'll take a look at both strategies in the various examples in this chapter.

2. Second, you have to determine the ideal size for your slideshow. The size and aspect ratio of the slideshow could be determined by the content, by the page layout, or even by the browser window's size. If your slideshow or slider contains only images, cropping all images to a certain size is simple enough,...

A simple crossfade slideshow

In this section, you'll learn how to build a simple crossfade slideshow. This type of slideshow is ideal for identically-sized images and can be displayed as a single image when JavaScript is disabled. Finally, this type of slideshow offers no control over the slideshow to your site visitors. They cannot pause the slideshow or manually move through the slides.

Time for action – creating a simple crossfade slideshow

Follow these steps to create a simple crossfading slideshow from scratch:

1. We'll get started by creating a basic HTML document and the associated files and folders just like we did in Chapter 1, Designer, Meet jQuery. In the body of the HTML document, include a list of images. Each list item will contain an image, which can optionally be wrapped in a link. In the sample code for the book, the images are cropped to 800 pixels by 450 pixels. Here's what the HTML looks like:

   <ul id="crossfade">
     <li><a href="http://en.wikipedia.org/wiki/Agua_Azul"><img src="images/AguaAzul.jpg"></a></li>
     <li><a href="http://en.wikipedia.org/wiki/Burney_Falls"><img src="images/BurneyFalls.jpg"></a></li>
     <li><a href="http://en.wikipedia.org/wiki/Deer_Leap_Falls"><img src="images/Deer_Leap_Falls.jpg"></a></li>  
   ...
   </ul>

2. Next, we'll write a few lines of...

Using the Basic Slider plugin

Our simple slideshow is nice and will be adequate for some situations, but we often want or need more features and flexibility out of our sliders and slideshows. There's no shortage of jQuery plugins out there to create sliders and slideshows. To avoid adding lots of unused code to projects, try to find the simplest slider that will do the job.

The Basic Slider, documented at and available for download at http://www.basic-slider.com/, is a relative newcomer to the scene. It's flexible, simple to use, and easy to style. It's a great fit for responsive designs. It can hold any kind of content, so we're not limited to images. We could use text, videos, images with text, or any other combination we can think up. The Basic Slider has got about a dozen options you can adjust, and for many projects, you'll find that's more than enough.

Time for action – building a Basic Slider

Follow these steps to create a slider using the Basic Slider plugin:

1. We'll get started by writing our HTML markup. Looking at the documentation for the Basic Slider plugin, we see that the plugin requires an unordered list wrapped in a <div> element. Each of our slides is going to contain a photo with a headline overlay, and each slide is going to link to pages with more information about what's contained in that slide. Here's what our markup looks like:

   <div id="slider">
     <ul class="bjqs">
       <li>
         <a href="http://en.wikipedia.org/wiki/Agua_Azul">
           <img src="images/AguaAzul.jpg">
           <div class="headline">
             <h2>Agua Azul</h2>
             <p>Tumbal&aacute;, Chiapas, Mexico</p>
           </div>
         </a>
       </li>
       <li>
         <a href="http://en.wikipedia.org/wiki/Burney_Falls">
           <img src="images/BurneyFalls.jpg">...

Creating a Cycle2 slideshow

Let's take a look at how to put the Cycle2 plugin from M. Alsup to good use. Cycle2 provides some nice transition effects between slides and offers lots of configuration options. The Cycle2 plugin is flexible and can hold many types of content. It can even gracefully handle content of different sizes and/or different aspect ratios, which the two sliders we've built so far could not.

There are options to include controls for your site visitors to move forward and backward, to pause the slideshow when the mouse is hovered over it, and to add pagination to allow site visitors to move easily to a specific slide. Additionally, there are options to allow touch gestures, to animate different transition effects, to include pagination or thumbnail navigation, and more. Compared to the Basic Slider, Cycle2 has dozens of more options. Cycle2 even has its own plugins that we can add to get more functionality, making it super flexible and adaptable to many different situations...

Time for action – building a slideshow with Cycle2

Follow these steps to build your first Cycle2 slideshow:

1. We'll get started by creating a basic HTML document and associated files and folders just like we did in Chapter 1, Designer, Meet jQuery. In the body of the HTML document, we'll create a container <div> and then wrap the markup for each slide in a <div>:

   <div class="cycle-slideshow">
     <div class="slide">
       <a href="http://en.wikipedia.org/wiki/Agua_Azul">
         <img src="images/AguaAzul.jpg">
       </a>
     </div>
     <div class="slide">
       <a href="http://en.wikipedia.org/wiki/Burney_Falls">
         <img src="images/BurneyFalls.jpg">
       </a>
     </div>
     ...
   </div>

   Notice that we've used a class cycle-slideshow on the container <div> and then a class slide on the <div> elements that contain the markup for each of our individual slides. These are important for the Cycle2 plugin. Remember that this...

The Cycle2 carousel

Cycle2 is flexible; you're not limited to simple slideshows. You can put Cycle2 to use to create a carousel that shows multiple images at one time. Let's take a look at how we might create a carousel of thumbnail images.

Time for action – building a Cycle2 carousel

Follow these steps to create a carousel with the Cycle2 plugin.

1. We'll get started, as we usually do, with using the HTML document and associated files and folders just like we did in Chapter 1, Designer, Meet jQuery. First up, we'll get the HTML markup for our carousel set up. Our HTML markup will be similar to the markup for the slideshow we set up in the previous example. We need a container <div> to hold the slideshow. Then, we also need individual <div> elements inside the external container for each individual slide or image that will appear in our slideshow:

   <div class="cycle-slideshow">
     <div class="slide">
       <a href="http://en.wikipedia.org/wiki/Agua_Azul">
         <img src="images/AguaAzul.jpg">
       </a>
     </div>
     <div class="slide">
       <a href="http://en.wikipedia.org/wiki/Burney_Falls">
         <img src="images/BurneyFalls.jpg">
       </a>
     </div>
     <div...

Combining a carousel with a slideshow

Not only can you include more than one Cycle2 slideshow on a single page, you can also set up those slideshows to "talk" to one another. Let's take a look at how we can set up a carousel to act as a controller for a slideshow. Here's an example of what we'll be building:

Clicking on one of the thumbnails in the carousel will load the full-size version of that image in the slideshow section.

Setting up the carousel

To make this a little bit easier to digest, we're going to break the process of creating the carousel/slideshow combo into three pieces. In this first piece, we'll get the carousel set up and working and look at the special considerations we have to make to ensure that it will work flawlessly with our slideshow component.

Time for action – creating the carousel controller

Follow these steps to create a Cycle2 carousel that can act as a controller for a slideshow:

1. First, we'll create the carousel. Once we have that on the page and it's functioning, we'll add the slideshow and then connect them together.

   Here's the HTML markup we'll use for the slideshow:

   <div id="carousel">
     <div class="cycle-slideshow">
       <div>
         <a href="images/AguaAzul.jpg">
           <img src="images/AguaAzul-thumb.jpg" width="140" height="100">
         </a>
       </div>
       <div>
         <a href="images/BurneyFalls.jpg">
           <img src="images/BurneyFalls-thumb.jpg" width="140" height="100">
         </a>
       </div>
       <div>
         <a href="images/Deer_Leap_Falls.jpg">
           <img src="images/Deer_Leap_Falls-thumb.jpg" width="140" height="100">
         </a>
       </div>
       </div>
   </div>

   We'll wrap the entire slideshow in a <div...

Time for action – adding the slideshow

Follow these steps to set up the slideshow component of our carousel/slideshow combo:

1. As usual, we'll get started with the HTML markup for our slideshow. Since we want the slideshow to be visible above the carousel, we'll place the slideshow into the code before the carousel code. Everything will work just fine if you choose to do things the other way around. Here's the HTML structure for the slideshow:

   <div id="slideshow">
     <div class="cycle-slideshow">
       <div data-cycle-title="Agua Azul" data-cycle-desc="Tumbal&aacute;, Chiapas, Mexico"><img src="images/AguaAzul.jpg"></div>
       <div data-cycle-title="Burney Falls" data-cycle-desc="Shasta County, California, USA"><img src="images/BurneyFalls.jpg"></div>
       <div data-cycle-title="Deer Leap Falls" data-cycle-desc="Dingmans Ferry, Pennsylvania, USA"><img src="images/Deer_Leap_Falls.jpg"></div>
       ...
     </div>
   </div>

   We...

Time for action – connecting the carousel and the slider

Follow these steps to connect the carousel and the slider:

1. We've done a lot so far with Cycle2 without writing much jQuery to make it all happen. We've finally found something we want to do with Cycle2 that will require us to write a few lines of jQuery. We want to load the full-size image in the slideshow when our site visitor clicks on the thumbnail in the carousel. So we'll get started with scripts.js by selecting all the slides in the carousel. Add the code to select those inside the document ready method, after the bit of code that we're using to change the <body> class:

   $(document).ready(function(){
     $('body').removeClass('jsOff').addClass('jsOn');
   
     $('#carousel .cycle-slide');
   });

   This little bit of code won't change anything on our page, but now we've got all the thumbnails in the carousel and we can work with them. The cycle-slide class is added to each individual slide in a slideshow by the Cycle2 plugin.

2. We want the...

Summary

In this chapter, we took a look at five different ways in which we can deal with slideshows and sliders on websites. We started off by building a simple crossfading slideshow from scratch without using a plugin. Next, we took a look at implementing the Basic Slider, which while being basic, has enough options and the ability to change its appearance via CSS, making it a great fit for many different types of projects.

For those projects that require fancy transition effects and even more options, we worked through three different types of sliders that we can build with the Cycle2 plugin. This flexible and extensible plugin will come in handy for many different types of slideshows on many different projects.

Next, we'll take a look at some techniques to use when working with responsive designs.