Watching:

About the exercise files


show more About the exercise files provides you with in-depth training on Developer. Taught by Chris Converse as part of the Create an Interactive Photo Gallery with jQuery and Dreamweaver show less
please wait ...

About the exercise files

When you download the exercise files, there's going to be two folders contained inside of that download: an Art Templates directory, which is going to contain all of the source Photoshop files we're going to use to create the assets for our photo gallery, and in addition there's going to be Photos for Gallery, which is going to contain all of the higher-resolution photography we're going to use to load inside of the Lightbox. This is going to be the highest-resolution previews we're going to offer though our web gallery. The page_template.psd contains all of the artwork we're going to use for the outer shell to create the design of our gallery.

And the two Photoshop files-- preview_sizes and thumbnail_sizes--are going to be the custom cropping that we're going to use to get the optimal design and cropping of each of our photographic images for our gallery. Inside of Final Project is going to be all the files we're going to create by the end of the class. We're going to be creating the file index.html, but I've also included the non-JavaScript version and the non-JavaScript and non-CSS version. When we looked at the introduction video, we saw how this particular technique is going to progressively enhance our user experience.

But I wanted to include these files so you could take a look at these and see what the site would look like on a browser that doesn't support JavaScript or CSS. Inside of the includes directory we're going to download a copy of jQuery 1.5. We're also going two download two additional plug-ins. We're going to get a copy of Fancybox, which is a jQuery plug-in which allows us to add a lightbox to our gallery, and a copy of far IN space, which is a plug-in that allows us to target a particular div and preload all of the images inside so that we can preload images before we do our fade-up and fade-down of our preview images.

And then lastly, inside of the images directory we're going to have a template directory, which is going to contain all of the artwork that's going be used in the outer shell and design of our gallery. And inside of the gallery directory itself is going to be all of the photography that's going to be used in the gallery. Every one of the photographs is going to have three different versions. We're going to have a full-size version, which is going to be the graphic we load into the lightbox. We've got the preview graphic, which going to be the graphic on the far right. And then we've got the thumbnails which are the small graphics we're going to have on the left-hand side of our design. Let me close up these folders, and the first thing we're going to do is start from one of our Art Template directories inside Photo Galleries, and we're going to create some folders on the desktop and start our project.

About the exercise files
Video duration: 2m 19s 1h 55m Intermediate

Viewers:

About the exercise files provides you with in-depth training on Developer. Taught by Chris Converse as part of the Create an Interactive Photo Gallery with jQuery and Dreamweaver

please wait ...