Viewers: in countries Watching now:
Download a copy of the finished web site here.
Inside our Click function for all of the images, I want to add a second statement, and we are going to update HTML that's part of the gallery caption as well. So let's start off with a Dollar sign, string literal 'gallery_caption.html', beginning and ending parentheses, semicolon. Inside here, let's start our string literal. Let's start off with a beginning and ending P tag. Inside of our paragraph tag, the first thing we are going to add is going to be an anchor tag.
Let's end the anchor tag, set an href attribute inside, open the letter x in there. And in here, we are actually going to say View larger. Come after the P tag. Let's start a new p tag and an ending p tag. And inside of here, we are going to put a letter x. Now back in our href tag, let's add in title attribute, two quotes and the letter x. Now are going to come in here and replace these with the actual variables. So the href, this is going to be a text link which will also link to the full-size preview, and we will add classes later to initiate the lightbox function on that.
Command+C or Ctrl+C to copy the variable, photo_fullsize. href, two tick marks, two Plus signs, paste. The caption, we are going to grab this. We are also going to put this in this anchor tag, two tick marks, two Plus signs, paste. The lightbox functionality actually pulls the title attribute from the anchor link and puts the caption in the overlay as well, since we need to actually pass that along to the large image that's showing up in the lightbox.
Now, we have photo_caption on the clipboard. Let's come over to the x here, two tick marks, two Plus signs, paste. Let's choose File > Save. Let's go back to the operating system. Let's open this up in our browser, hit reload, and now each I click these links, we get a View larger link, so this actually links to swatches full size. If I click this, it links to that full-size image. Here's my browser's back button. 888, rose, lantern, then the caption and again, the link is updating to lantern as well.
So at this point, we are dynamically generating anchor links of the main preview image, which I can click to go to full size, we are generating a text-based link going to the same destination, and we are pulling out the caption data from the title attribute of the original thumbnail that we clicked on and populating the text down here as well. What we need to work on now is to set up our preload. We are actually going to use a jQuery plug-in called far IN space Image Preloader to preload the images so that when we fade the images up and down, we make sure that the image has been downloaded first before we do that special effect.
So in the next movie, we are going to start by adding a plug-in to help us to preload images.
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.