Chris Converse |
Thursday, June 12, 2014
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.
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.
Interact with a working demo of the figure above.
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.
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.
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.
Learn how to update the preview area of a web page based on which thumbnail your visitor clicks.
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.
After you add a lightbox plug-in, see how quickly you can activate the effect on your images.
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.
Tags: Chris Converse, Jquery, jQuery Plug-in, jQuery Slider, User Experience, UX
Check out these popular Web courses.
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:
Keep up with news, tips, and latest courses with emails from lynda.com.
We've updated our terms and conditions (now called terms of service).Go Review and accept our updated terms of service.