Lynda.COM Create an Interactive Photo Gallery with jQuery and Dreamweaver

Author:
Chris Converse

Duration:
01h 52m

Released on:
4/27/2011

Exercise files:
Yes


In Create an Interactive Photo Gallery with jQuery and Dreamweaver, author Chris Converse develops an interactive photo gallery for a web site using HTML, CSS, and the open-source JavaScript library jQuery. The course begins with tutorials on extracting different-sized images sets from an original photo collection, designing the site layout, and constructing the HTML and CSS. Then, following the progressive enhancement strategy, Chris utilizes JavaScript plug-ins to include lightboxes and other types of interactivity while maintaining backwards compatibility with older browsers and devices. Exercise files accompany the course.

Download a copy of the finished web site here.
Topics include:

    Preparing gallery photos using Adobe Bridge
    Adding and linking thumbnail images
    Creating the layout in HTML and CSS
    Downloading and adding jQuery to the project
    Creating preview images from anchor links
    Implementing the preload functionality
    Building a customized lightbox with the Fancybox plug-in
    Styling the zoom and contact links




Introduction
Previewing the project across browsers and devices           05m 32s
About the exercise files           02m 19s

1. Preparing the Gallery Photos
Renaming a series of files in Adobe Bridge           03m 07s
Using GREP for more intricate file renaming           06m 42s

2. Creating the Layout in HTML and CSS
Creating and linking HTML and CSS files           01m 32s
Save For Web & Devices in Photoshop           07m 02s
Creating empty CSS rules           03m 55s
Create, nest, and class DIV tags           06m 00s
Adding CSS properties for main container           04m 00s
Adding CSS properties for content area           04m 28s
Adding CSS properties for headings           02m 08s

3. Adding and Linking Thumbnail Images
Adding and linking the thumbnail images           02m 32s
Styling the thumbnail links with CSS           05m 15s
Downloading and adding jQuery to your project           02m 42s
Overriding the browser's default link behavior           05m 26s

4. Incorporating the Preview Images
Creating preview images from anchor links           01m 52s
Changing the preview when clicking thumbnails           05m 59s
Changing the caption when clicking thumbnails           03m 19s

5. Adding a Preloader
Adding an image preload plug-in for jQuery           02m 22s
Setting a dissolve transition between previews           04m 31s
Implementing the preload functionality           05m 07s

6. Adding a Lightbox
Adding a lightbox plug-in for jQuery           02m 02s
Creating a custom function for lightbox properties           07m 38s
Setting links to activate the lightbox feature           05m 40s

7. Taking Care of the Final Details
Initializing the gallery on page load           03m 40s

8. Styling the Hyperlinks
Adding icons and styles to the zoom and contact links           05m 11s

9. Where to go from here
Some ideas for further enhancements           02m 43s