2013
Lynda
Chris Converse
1:50
English
Give your visitors a smart and dynamic experience when reviewing your photography. This course shows how to create a photo gallery that sorts and rearranges your photos based on keywords you add to the HTML. In addition, author Chris Converse shows how to use a lightbox to display larger photos, and even allow your visitors to navigate through the lightbox—giving them an alternate navigation option to review your photos.
This course was created and produced by Chris Converse. We are honored to host this training in our library.
Introduction 7m 15s
Previewing the final project 1m 46s
About the exercise files 1m 8s
The software you'll need to complete this course 38s
For those using Dreamweaver 2m 23s
Starting your project 1m 20s
1. Creating the Graphics 7m 6s
Slicing and exporting web graphics 2m 35s
Creating multiple images for a responsive design 1m 55s
Creating custom thumbnails 2m 36s
2. Hooking Up the CSS and JavaScript 7m 3s
Setting the viewport scale settings 1m 51s
Linking the CSS files 1m 3s
Linking the JavaScript files 1m 22s
Enabling earlier versions of Internet Explorer 2m 47s
3. Creating HTML for the Web Layout 11m 40s
Creating the HTML containers 2m 55s
Creating the sorting links 3m 3s
Creating a thumbnail link 2m 39s
Adding more thumbnail links 2m 7s
Adding the background image 56s
4. Styling the Design with CSS 12m 36s
Styling the text and the background image 2m 43s
Adding the title with CSS 1m 28s
Adding positioning to the gallery 57s
Styling the sorting container 2m 27s
Styling the sorting links 2m 41s
Styling the thumbnails 2m 20s
5. Positioning the Thumbnails with jQuery 19m 32s
Creating a custom function to position thumbnails 1m 52s
Preparing the initial settings 2m 16s
Measuring the thumbnails and the container 4m 23s
Calculating the remainders 3m 27s
Calculating the rows and columns 2m 16s
Positioning and animating the thumbnails 2m 37s
Resetting the size of the photo container 2m 41s
6. Sorting the Thumbnails 13m 57s
Activating the sorting links 2m 35s
The custom sorting function 2m 22s
Determining the keywords for each thumbnail 2m 36s
Searching for keywords in the thumbnails 2m 44s
Setting up the animation to hide thumbnails 2m 25s
Animating the sorted thumbnails 1m 15s
7. Making the Layout Responsive with CSS 8m 39s
Adding CSS3 media queries 2m 10s
Making the title graphic responsive 2m 10s
Making the sorting box and the links 4m 19s
8. Making the Layout Responsive with JavaScript 11m 8s
Creating a custom function to check the viewport 2m 17s
Calculating the sizes 1m 41s
Using a set interval to continually run the viewport function 4m 27s
Setting the sorting box to match the thumbnail width 2m 43s
9. Applying the Lightbox to the Links 10m 34s
Adding a custom class to the lightbox links 1m 43s
Creating a custom function to detect lightbox links 3m 12s
Removing the lightbox for small screens 4m 37s
Removing debug code 1m 2s
Conclusion 39s
Where to go from here 39s
http://www.lynda.com/jQuery-tutorials/Create-Sortable-Photo-Gallery-jQuery/114897-2.html

Download File Size:432.66 MB

---