Viewers: in countries Watching now:
Download a copy of the finished web site here.
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 "" :
Sorry, there are no matches for your search "" —to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.