Traditionally created in Flash, slideshows 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 explore three powerful plugins that create gorgeous, dynamic, and full-featured slideshows.
In this chapter, we'll cover the following:
- How to plan a slideshow
- How to write a simple crossfading slideshow from scratch
- How to use the CrossSlide plugin to create a panning and zooming slideshow
- How to use the Nivo Slider plugin to create a slideshow with fun transition effects
- How to use the Galleriffic plugin to create a thumbnail slideshow
There are a few things to consider when you're preparing to build a jQuery slideshow. They are as follows:
- First, you have to decide what will be the experience 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 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.
- Second, you have to determine if all items in your slideshow will be of the same size or of different sizes. For obvious reasons, it's easiest to handle items that are all the same size and aspect ratio, but sometimes, it's impractical or impossible to identically size all items. I'll cover which slideshows are ideal for same-sized content and which are ideal for variable-sized content as we go along.
- Next, you need to consider if your site visitors need to have any kind of control over the slideshow. Sometimes, it's handy to simply have your images on automatic rotation. Other times, it's helpful to allow site visitors to pause the slideshow, or manually move forward and backward through the slides. I'll tell you how much control each of these slideshow approaches offers your site visitors.
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.