Follow these steps to create a slideshow using the Galleriffic plugin:
First up, we're going to make some extra effort to plan out how the slideshow will appear for site visitors with and without JavaScript enabled. If the site visitor doesn't have JavaScript, we'll present them with a grid of thumbnails with captions beneath. Clicking on a thumbnail will show them the full-size version of the photo.
The page will look like the following screenshot:
For users with JavaScript, though, I want to show a smaller grid of thumbnails beside a main slideshow area like in the following screenshot:
The captions aren't important in the case of thumbnails because they'll be displayed below the slideshow rather than below the photos.
Keeping in mind how we want the page to appear, we'll get started by setting up an HTML file and associated files and folders, just like we did in Chapter 1, Designer, Meet jQuery. Create a set of 100x100 thumbnails for each...