Join Chris Converse for an in-depth discussion in this video Some ideas for further enhancements, part of Create an Interactive Photo Gallery with jQuery and Dreamweaver.
- View Offline
So now that you've completed programming your own photo gallery, there are some things you…might want to consider to further increase the functionality.…One of the things to take a look at is inside the Fancybox framework,…there was that index file.…We're going to open that up again.…Down here under the set of examples, there's a group where we can take a series…of images and load a series up in the lightbox.…So by assigning a whole bunch of images to the same relative group, which…we'll take a look at in the code for a moment, when we load up the lightbox,…when we move to the right, we'll see that we have an arrow where I can click…and go to the next picture.…
Now, when I roll side to side, I can go to the previous picture or the next…picture, and I can cycle through any number of images.…So basically, I can go from high-res file to high-res file.…The way that this is set up,…I am going to take a look at the index file in a text editor.…I'm going to scroll down here and we're going to take a look at where this is…
Download a copy of the finished web site here.
- 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