Implementing the preload functionality
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
Implementing the preload functionality
We're going to set the HTML, beginning and ending parentheses, a semicolon. Inside of here, we are going to set a string literal, image, source, equals, two quotes, forward slash, end bracket. And inside there, we're going to put a letter x. So what we're going to do is take the preload area and put an image tag in that area. Let's grab photo_preview variable, select the X, hit Delete, two tick marks, two Plus signs.
We're going to concatenate the string, photo_preview. On the next line, I am going to copy the declaration, picking that div. So we're going to say Dollar sign, .gallery_ preload_area img, so we are going to target all images that are inside the preload area, which we just added one on the line above. Now, we're going to use imgpreload.
This is the name of the actual function that's part of the far In image preload tool. Beginning and ending parentheses, then a semicolon. So this statement, this is the name of the plug-in. So once we hooked in the farinspace into our page, we can call this just like any other function and this will actually perform a preload on all of the images that are inside of preload area. Inside of here, let's add a function, beginning and ending parentheses, beginning and ending bracket.
This function is callback function, and it's only going to run after all the preload has happened. So let's open this up a little bit. So these are all of the things we want to have happen only after the preload has taken place. So, let's cut all this to the clipboard, put our cursor inside here, and let's paste all of this inside here. I will tab some of this in, so we can see the structure. So now when our full script happens, the anchor tags get clicked. We prevent the default.
We set the states of the thumbnails. We defined variables based on the thumbnail you clicked, which is this statement. We created a photo_preview URL because we don't actually use that in our HTML. We set the gallery_caption to slide up, we fade out the picture. Then we take the preload area, we put an image tag in it, then we run a preload on that to make sure that's been loaded. Then we update the HTML for the preview, update the HTML for the caption, and then we show the preview and show the caption. Let's hit File > Save. Let's come out to our operating system.
Let's double-click index.html, Command or Ctrl to reload. Now when I click on these images, the preload will happen and the type will fade up. Now, open this window up a little bit, and if we put this up on a web server where we have maybe a little bit of a slower Internet connection, or we put a really heavy preview file, a file with a big file size, we will actually see the preload happening. But also notice down here I have the image preload area, which is where the first image tag is getting written.
So as I click these, notice that on the right-hand side when the image fades out, we see the picture down below switch, and then we get the fade-up. So now what we need to do is set a CSS rule that hides that particular div. Let's come back over to Dreamweaver. Let's create a new CSS rule. This is going to be a class. We're going to set .gallery_preload_ area, click OK, Block properties, set the Display to None--we don't want the user to ever see that.
Let's choose File > Save All. Let's go back to our browser. We will hit Reload. Now, I can click on the images. The image will get written into that area we just set to be hidden with CSS, the preload happens, and then the content will fade back up. Now that our preload is working, now we want to add in our lightbox plug-in and set our overlay links.
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.