Some ideas for further enhancements
Video: Some ideas for further enhancementsSo 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.
Viewers: in countries Watching now:
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
Some ideas for further enhancements
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 set up. Down here in Image Gallery, they have a relative attribute here with an example_group. Every one of these items is part of the example_group.
By simply grabbing another object, I'll take the last one and just paste it in again, so we'll have two copies of 12_b, which is a picture of that camera. I'll hit Save, come back to the browser, hit Reload. Notice I have now two pictures of the camera. No matter which image I click on, that's the one that starts. So I can go Previous, Next. We can also use the scroll wheel. So I am rotating the scroll wheel on my mouse. There are the two different pictures of the camera. Where we might want to use this in this particular gallery is perhaps we don't use the preview area at all, and we use just the series of thumbnails, and every one of these thumbnails is part of a relative group.
So then bypassing the preview altogether, we click on a thumbnail and just bring up the lightbox where we can then go through all of the high-res images by either using the scroll-wheel or the right and left clicks. The next thing you might want to do is do a Google search on other photo galleries that you can download. A lot of people have put together plug-ins that will do a lot of the functionality that we've just gone through. So once you've spent the time to learn the techniques, you can either program your own and continue extending this project or start dissecting other projects. So typically, I'll go into Google and search for different types of slideshow galleries that I want to start from.
So I can scroll down here and I can see a bunch of different plug-ins that I can download; some have some similar functionality. Or I can also use some of the user experiences of these to incorporate into my particular project. Well, at this point, I'm concluding this course, and I really appreciate you watching.
Find answers to the most frequently asked questions about Create an Interactive Photo Gallery with jQuery and Dreamweaver .
Here are the FAQs that matched your search "" :
- Q: The finished state of the interactive photo gallery in this course shows a clickable preview. When you click on the preview image, or on the view larger icon, a larger lightbox image appears. Chris's example has a close button and border surronding the large image, but mine doesn't. Did I miss a step?
- A: The functionality you describe is part of FancyBox plug-in we use in this course. It's a custom lightbox tool, which I've included in the exercise files and also available for download at fancybox.net. It's free and highly customizable.
By default, FancyBox adds a border to images (at least in the version of FancyBox we're using), but there are many options that can be turned on when you set up your fancybox initialization script, including the close button, which is invoked using the showCloseButton property. This is all covered in the "Creating a custom function for lightbox properties" movie.
If you want to customize your gallery further, look at the list of the customizable properties at http://fancybox.net/api.
- Q: This course was updated in April, 2013. What changed?
- A: Since the release of this course, Internet Explorer 9 and 10 have been released, and sometimes these browsers do not activate interactive HTML content. To remedy this problem, the author has added a movie to Chapter 10 that will show you how to:
- Update the HTML to HTML5
- Update the version of jQuery
- Use the Google html5shiv to keep compatibility with Internet Explorer 7 & 8
Sorry, there are no matches for your search "" —to search again, type in another word or phrase and click search.