Setting a dissolve transition between previews
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 a dissolve transition between previews
These are going to be set up vars from thumbnail. Then down here, these two statements we made earlier, the update preview and gallery_caption, we are actually going to use these inside of another function. I am going to save my document so far, and let's come in here. And the first thing we want to do, once we click on of these functions--and remember we are still working inside of the anchor tag clickEvent-- the first thing we are going to do, add a Dollar sign, beginning and ending parentheses, two tick marks, .gallery_caption.
We are going to take the caption div. We are going to use jQuery slideUp. This is going to animate the caption upward, because once we click on an item, we want to caption to fade away. Another line, Dollar sign, beginning and ending parentheses, two tick marks, string literal. We are going to say gallery_preview, fadeOut, beginning and ending parentheses, semicolon.
500 ticks in there as well. So when we click it, the caption will slide up. The gallery preview area, the area holding the anchor tag with the image in the background, will now fade out. Now inside of fadeOut, I am going to get my cursor after the 500. I am going to put a comma, space, add a function, beginning and ending parentheses, beginning and ending bracket. By putting this function inside of this fadeOut function here, this is going to happen on what we call a callback. So once the animation has faded out over half a second, it's going to run this function.
Let's put that on the brackets. So inside of here is what's going to happen after the fade-out occurs. So once the fade-out occurs what we are going to do is come down, grab the two statements down here, we are going to cut these to the clipboard and paste them up here. So we are going to set the gallery image preview of the HTML to the new photo size based on the variables we set up in the vars up here. Then we are going to set the gallery_caption as well.
Once that's happened, we are going to fade the gallery back up. So let's come over here, grab gallery_preview, copy to the clipboard, paste it down here. I will type fadeIn, over half a second, add a new line, gallery_caption, slideDown, which is going to show this content, beginning and ending parentheses, semicolon, 500 ticks inside of there.
Let's choose File > Save. This should create the animation that we were looking for, click a link, slide up the caption, fade out the preview, switch the HTML for both preview and caption, and then fade up the preview and slide down the caption. Let's come out to the operating system. Let's double-click the index file, Command+R or Ctrl+R to reload, click on an item. And if you are looking at the caption area, each time I click, the caption slides up, changes, and fades back down-- or slides down, rather, and the image fades out. We switch the HTML and the image fades back up.
Now that this behavior is working as we want, in the next movie we are going to add preload into this script, so that when we click on a thumbnail we will preload the preview image first and then fade it up to make sure that it's fully loaded and we get a nice smooth transition.
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.