Setting links to activate the lightbox feature
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
Setting links to activate the lightbox feature
We actually set this with these statements here, but again, they're inside the clickevent. In order to run these by themselves, we're going to put the thumbnail updater in its own function as well. So I'm going to come up here and I'm going to put two forward slashes in front of all of these statements. We're going to comment those out. Down here, lower in the page, we're going to create another custom function. I'm going to type function updateThumbnails, beginning and ending parentheses, beginning and ending bracket. Then we're going to just split this open.
Inside updateThumbnails, what we're going to do is we're going to actually test the state of the thumbnails. Since we're no longer in the click event, we lose the actual event that we were using before to assign the classes. So, what we're going to have to do is cycle through all the anchor tags first and then check to see which anchor tags match the preview image that's showing up. So to begin this, let's start with a Dollar sign, beginning and ending parentheses, string literal, gallery_thumbnails, space, a. I'm going to come outside of that, .each, beginning and ending parentheses, semicolon.
Inside of each, we're going to type function, beginning and ending parentheses, beginning and ending bracket. Now when we run the update function, the jQuery statement is going to run through every one of the anchor tags. And what we want to do is test the equality of the preview area to the actual anchor tag that's being tested. So we're going to type if, beginning and ending parentheses, beginning and ending bracket, and then we're going to split it.
Inside of the if statement, we're going to type a Dollar sign, string literal, .gallery_preview space a, .attr. beginning and ending parentheses, href. Two Equal signs, we're going to test the absolute equality of this statement and Dollar sign, this.attr, string literal inside of there, href.
So as we go through every one of the anchor tags, it's going to check the current one, which is the 'this' item and see if it matches what we wrote over into the gallery preview area. If they match, we're going to set jQuery statement; this, .addClass, string literal, 'selected'. On the next line, we want to fade out the child, the image tag that's inside of there.
this, children, beginning and ending parentheses. Actually, we're going to use fadeTo. We want to actually animate this down. Beginning and ending parentheses, semicolon. And then inside here we're going to say 250, so a quarter of a second, and then .4. That's going to be the transparency. Let me scroll down here a little bit.
Then we're going to type else, beginning and ending bracket. Let's open that up. Dollar sign, beginning and ending paretheses, this, .removeClass beginning and ending paretheses, string literal, selected, semicolon. Next line, this, .children, beginning and ending parentheses, .css beginning and ending parentheses, semicolon.
Inside here, one string literal, opacity, comma, another string literal, number 1. So this puts this in a completely separate function. Let's grab updateThumbnails. Let's copy that to the clipboard. Let's scroll up, and right after setFancyboxLinks, let's paste that function there as well. So basically, we have removed this functionality from being inside the click- event, and we moved it into its own function.
Now that we have the updateThumbnails out as separate function, this is going to allow us, in the next movie, to set up a statement that's going to autostart the gallery when the browser loads this.
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.