Viewers: in countries Watching now:
Download a copy of the finished web site here.
Now, we're going to add some thumbnail images. Let's get your cursor inside of the gallery_thumbnails div, after the k, in that default text we put in there. Come up to the Insert panel > Insert Image > acrobats_thumbnail.jpg. Click Choose. Enter some Alternate text. Click OK. I am going to click on this and select it. Down on the Properties panel, I am going to come down to the Link area here and I am going to create a hyperlink around this image. So let's click on the little folder, and we want to link it to the acrobats_fullsize.jpg. Then click Choose.
And when I click away, I can see this blue highlight around the outside, letting me know that this image actually contains a link to the high-resolution file. Let's test this. Choose File > Save All, and then Option+F12 or Alt+F12, Command+R or Ctrl+R to reload, and I can see my gallery here. Let's roll over the thumbnail. I get a little pointer. I click it, and it links me over to the full-sized JPEG. Then I can use the browser's Back button to go back. Now, in the introduction video, we talked about the fact we were going to progressively enhance this user experience.
So in here, let's close the browser. Let's come back to Dreamweaver. Let's switch over to Code view. Inside of Code view, we have, inside of gallery_thumbnails, we have our first anchor tag with the image inside of it. Let's delete that link text, and we want to add one more piece of code in here. We want to add a title attribute to the anchor tag. Titles are what actually show up on a hyperlink if you roll over it, so we're going to use this to create our captions. And I am just going to type 'Caption goes here for Acrobats'.
So at this point, we need to add the remaining 19 thumbnail images and link each corresponding thumbnail to its high-resolution file. I'll do that before the next movie, and then we'll continue on.
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.