Learn it fast with expert-taught software and skills training at lynda.com. See what you can learn

By Chris Converse | Thursday, June 12, 2014

Create a jQuery Slideshow

figure_1_slideshow_anatomy-600

The general goal of a web-based slideshow is to give your site visitors an optimized, easy-to-navigate image viewing experience. Since navigation can take up valuable screen real estate, many slideshows opt to use an overlay, or lightbox effect, to give users the option of viewing a larger version of an image.

The anatomy of a slideshow

Slideshows most commonly consist of three components: the navigation elements, an image preview area, and a lightbox overlay. Some slideshows only use navigation and a lightbox overlay, but depending on the user experience you have in mind, either can be quite effective.

This is a possible layout for a slideshow with a three-part user experience.

figure_1_slideshow_anatomy-600

See a demo

Interact with a working demo of the figure above.

Creating thumbnails

When putting together a slideshow, it’s highly effective to use small thumbnail versions of your images for the navigation. This gives the user a quick overview of the images in a given slideshow, and makes it easy to refer back to a particular image.

figure_2_thumbnails-600

While it can be tempting to reuse the large image as the thumbnail, this can have two drawbacks. First, the page download will be significantly larger as the user will have to download the entire gallery when they visit the page. This could be a daunting task, especially for mobile devices. Second, when scaling large images down to thumbnail size, it can be difficult to identify the contents of a particular image at a smaller resolution.

When creating image thumbnails, consider creating them all at the same size. This makes it easier to adapt your thumbnails to your layout. In addition to scaling the images down, you’ll want to re-crop each thumbnail and attempt to preserve the main focus of the image as best you can.

Adding a preview area

When a user clicks on your navigation items, you can choose to have the image load in a preview area, or in a lightbox overlay. Using a preview allows your users to see a version of the full-size image without leaving the navigation system. This experience will give your users a very fast way to browse your images.

Watch a video

Learn how to update the preview area of a web page based on which thumbnail your visitor clicks.

Adding a lightbox

A lightbox effect basically loads the full-sized image from your server and displays it in a lightbox over the contents of your web page. In theory, a lightbox seems simple; but in practice, it’s quite a bit of work to write from scratch. You need to preload the graphic from the server, gather the file dimensions, add additional HTML and CSS to your page, size and position the graphic over all of the content on the page, and finally center it within the user’s browser.

Fortunately, there are several lightbox plug-ins available which cover all the features mentioned above, plus a lot more. Some offer options like the ability to browse images while the lightbox is open, add captions to images, and even use other media like animations, third-party web pages, or video clips.

Watch a video

After you add a lightbox plug-in, see how quickly you can activate the effect on your images.

Using slideshow and lightbox plug-ins

There are lots of plug-ins for creating slideshows and lightboxes. Some slideshow plug-ins include their own lightbox as well. Here are 10 slideshow plug-ins and 10 lightbox plug-ins you should check out.

Slideshow plug-ins

Lightbox plug-ins

Learn it from the experts.

With online video courses at lynda.com, you can reach your goals faster. Learn software, improve your skills, and get an inside look at how the professionals work.

See what you can learn


Share this article:

Tags: , , , , ,

Get the latest news

  •   New course releases
  •   Pro tips and tricks
  •   News and updates
  
New releases submit clicked

You can change your email preferences at any time. We will never sell your email. More info

Featured articles

A lynda.com membership includes:

Unlimited access to thousands of courses in our library
Certificates of completion
New courses added every week (almost every day!)
Course history to track your progress
Downloadable practice files
Playlists and bookmarks to organize your learning
Become a member

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.