Initializing the gallery on page load
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
Initializing the gallery on page load
I am going to hit Copy, copy this to the clipboard. Now, I need to stay within the document ready but outside of the anchor tag clickevent. That goes from here to here. So let's come outside of that area. Still inside the document ready. Let's put a comment for ourselves. We'll just say initialize gallery on load, hit Return, Command+V or Ctrl+V for paste, and we're going to paste in all of these instructions.
So at the very top, we have these declarations. I am actually going to remove these tabs in here, get this formatted so now I can see this ending bracket here ends this statement here. So to begin, let's come up here, and the first four variables, let's just change these to have first_ in front of them.
So let's copy, paste, paste, paste. We're also going to paste these in front of all of the variables within the script. So this becomes first photo preview, on line 43, this becomes first_photo_fullsize, first caption, first photo, first_photo_fullsize, first_photo_caption, first_photo_caption. Next, for the variables up here, since we're not inside that clickevent we don't know which object was actually clicked.
So we're going to change the 'this' in here. Let's delete that, put in two quotes for a string literal. We're going type '.gallery_thumbnails a'. Outside of the parentheses, we're going to type.first(), and then the dot attribute, then the title string literal. This is jQuery's way of going through all of the anchor links and finding the first one in all of the anchor tags inside of the gallery_thumbnails div.
Let's select this entire statement, copy it, come down to fullsize and hit Paste, change title string literal to href. Then just like in the other function, we're actually going to take photo preview and concatenate that by taking photo_ fullsize, doing a string replacement on the full-size text, and putting in preview. Everything else in here is going to run pretty much the same. Let's hit File Save. Let's come over to our browser. Hit Reload.
What we'll see right away is the very first image fades up once it preloads. So I'll just click a few other images here. Let's come back, hit Reload. So now our initial state is working great. Now that our gallery is initializing on load, let's go add an email link and let's add some style to our View larger link.
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.