Changing the preview when clicking thumbnails


show more Changing the preview when clicking thumbnails provides you with in-depth training on Developer. Taught by Chris Converse as part of the Create an Interactive Photo Gallery with jQuery and Dreamweaver show less
please wait ...

Changing the preview when clicking thumbnails

Now that we have our preview links set up in our CSS, let's come over to our JavaScript file. So now what we want to do is create those anchor links based on the image thumbnail that was already selected. So, let's add a few lines into our JavaScript file, and the first thing we are going to do is set up a few variables. We are going to type 'var photo_caption', and that's going to equal Dollar sign, this .attr, semicolon, and then inside there a string literal, title.

So, whichever anchor link we actually clicked on, we are going to pull into a new variable called photo_caption the title attribute of that object. That's going to give us our caption. var photo_fullsize. It's going to be equal Dollar sign this .attr, and in here we are going to put href, the actual link destination of full size, because we took the thumbnail images and actually linked them to the high-resolution full-size image.

That's where that variable is going to set up. Then lastly, photo_pre...

Changing the preview when clicking thumbnails
Video duration: 5m 59s 1h 55m Intermediate

Viewers:

Changing the preview when clicking thumbnails provides you with in-depth training on Developer. Taught by Chris Converse as part of the Create an Interactive Photo Gallery with jQuery and Dreamweaver

please wait ...