HANDOUT TITLE:



INTRODUCTION TO JQUERY – JQUERY PHOTOGALLERY WITH EFFECTS

You will now expand on the previous exercise to create a single-page photo gallery. You will be able to load a larger image onto the page when a visitor clicks a thumbnail image. In addition, you will use a couple of jQuery’s effect functions to make the transition between larger images more visually interesting. Clicking a thumbnail will make a larger image fade into view and the current image fade out.

The way the gallery works is pretty straightforward - click a thumbnail to see a larger image. However, this exercise shows you how to add a few features that make the presentation more interesting by using fade effects to swap larger images in and out of the page.

Another important technique you will use here is unobtrusive JavaScript. That simply means that users who have JavaScript turned off will still be able to access the larger versions of the photos. To achieve that, each thumbnail image is wrapped in a link that points to the larger image file. For those without JavaScript, clicking the link exits the current web page and follows the link to load the larger image file. It will not look fantastic, since the visitor has to leave the gallery page and will see just the single larger image, but the photos will at least be accessible.

For users who have JavaScript turned on, clicking a link will make the larger image fade into view on the page.

All of the action occurs when the link is clicked, so this script uses the link’s click event to achieve the following steps:

• Stop the default behaviour of the link. Normally, clicking a link takes you to another page. On this page, clicking the link around a thumbnail exits the web page and displays a larger image. Since you will use JavaScript to display the image, you can add some JavaScript code to prevent the browser from following that link.

• Get the href value of the link. The link actually points to the larger image. Thus, by retrieving the link’s href, you are also getting the path to the larger image file.

• Create a new image tag to insert into the page. This image tag will include the path from the href value.

• Fade the old image out while fading the new image in. The current image fades out of view as the large version of the clicked thumbnail fades into view.

This exercise expands on the previous one, but the starting web page has been reorganized a little. The thumbnails are now in a left column and a tag with an ID of photo has been added to the page.

The basic structure of the photo gallery. All of the thumbnail images are wrapped in links that point to the larger version of the photo. Clicking each link will load the larger image inside a tag with the ID of photo.

1. Locate, download and unzip the folder named jQuery Photogallery Site Files from BREO to your My Sites folder and rename the folder as jQuery_Photogallery.

2. Create a new Dreamweaver site pointing to this folder.

The folder jQuery_Photogallery contains all the files that you need – the jQuery library file, CSS files and all the images required.

3. Open the file photogallery\photogallery.html.

This file contains the programming from the previous exercise plus a new tag to display the large version of each thumbnail image. Since the process of displaying a gallery image is triggered by clicking one of the links wrapped around the thumbnail images, the first step is to create a selection of those links and add the click event to each.

4. Locate the JavaScript comment that reads “insert script below this line” and add the following code:

$('#gallery a').click(function(evt) {

}); // end click

The selector #gallery a selects all link tags inside another tag with the ID gallery. The .click is a jQuery function for adding an event handler.

In addition, the code passes an anonymous function to the click event. (Functions that are executed in response to an event automatically have the event object passed to them). In this case, the variable evt stores that event object. You will use it in the next step to stop the browser from following the clicked link.

5. Between the two lines of code you added above, type:

evt.preventDefault( );

Normally, clicking a link makes the web browser load whatever the link points to (a web page, graphic file, PDF document, and so on). In this case, the link is just there so that people who do not have JavaScript turned on will be able to go to a larger version of the thumbnail image. To prevent the web browser from following the link for those who have JavaScript enabled, you run the event object’s preventDefault( ).

Next, we will get the href attribute for the link.

6. Hit Return to create a new, blank line, and then type:

var imgPath = $(this).attr('href');

Your code will appear as shown below:

$('#gallery a').click(function(evt) {

evt.preventDefault( );

var imgPath = $(this).attr('href');

}); // end click

Here, $(this) refers to the element that is clicked - in other words, a link. A link’s href attribute points to the page or resource the link goes to. In this case, each link contains a path to the larger image. That is important information, since you can use it to add an image tag that points to the image file.

However, before you do that, you need to get a reference to the large image that is currently displayed on the page. After all, you need to know what it is so you can fade it out of view.

7. Hit Return and type:

var oldImage = $('#photo img');

The variable oldImage holds a jQuery selection containing the tag inside the photo . Now it is time to create a tag for the new image.

8. Hit Return again and add:

var newImage = $('');

to the script.

There are quite a few things going on here. jQuery lets you select an element that is in the page’s DOM. For example, $('img') selects all images on the page.

In addition, the jQuery object can add a new element to the DOM. For example, $('Hello') creates a new paragraph tag containing the word Hello.

This line creates a new tag and stores it in a variable named newImage.

Since the jQuery object expects a string as an argument ('Hello', for example), this line of code concatenates or combines several strings to make one.

The first string (surrounded by single quotes) is . Taken altogether, they add up to an HTML tag:

When the script passes it to the jQuery object like this, $(''), the browser creates a DOM element.

It is not displayed on the page yet, but the browser is ready to add it to the page at anytime.

9. Add the code listed below:

newImage.hide( );

$('#photo').prepend(newImage);

newImage.fadeIn(1000);

The code should appear as shown below:

$('#gallery a').click(function(evt) {

evt.preventDefault( );

var imgPath = $(this).attr('href');

var oldImage = $('#photo img');

var newImage = $('');

newImage.hide( );

$('#photo').prepend(newImage);

newImage.fadeIn(1000);

}); // end click

The newly created image (which is stored in the variable newImage) is hidden using the hide() function. This step is necessary because if you just added the image tag created in the previous line, the image would be immediately visible on the page. Therefore, you first hide the image, and then add it to the page inside the photo . The prepend( ) function adds HTML inside a tag. Specifically, it adds the HTML at the very beginning of the tag.

At this point, there are two images on the page inside the photo . The image on top is invisible, but the fadeIn( ) function makes the image slowly fade in over the course of 1,000 milliseconds (1 second).

To achieve the effect where two photos appear in the same spot on the page, but one photo fades in and another fades out, you need to use some creative CSS. Absolute positioning lets an element sit above the page, and even on top of another element. In this case, both images are absolutely positioned within the tag, making them float one on top of the other. The style sheet gallery.css has all the CSS required - make sure to check out the #photo img style.

Now it is time to make the original image fade out.

10. Press Return and then add these three lines of code:

oldImage.fadeOut(1000,function( ){

$(this).remove( );

});

You have already created a variable named oldImage and stored a reference to the original image on the page into it. That is the image we want to fade out. Therefore, you apply the fadeOut( ) function. You pass two arguments to the function. The first is the duration of the effect - 1,000 milliseconds (1 second); and the second is a callback function. The callback function runs after the fade out effect finishes and removes the tag for that image.

Note: The remove( ) function actually removes the tag from the DOM which erases the HTML from the browser’s memory freeing up computer resources. If you did not take this step, each time your visitor clicks a thumbnail a new tag would be added but the old one would simply be hidden - not deleted. You would end up with lots of hidden tags still embedded in the web page slowing down the responsiveness of the web browser.

There is one final step - loading the first image. Currently the tag where the photo goes is empty. You could type an tag in that spot so when the page loads there would be a larger image for, say, the first thumbnail. However, you can use JavaScript….

11. Add one last line after the end of the click( ) function:

$('#gallery a:first').click( );

The code should appear as shown below:

$('#gallery a').click(function(evt) {

evt.preventDefault( );

var imgPath = $(this).attr('href');

var oldImage = $('#photo img');

var newImage = $('');

newImage.hide( );

$('#photo').prepend(newImage);

newImage.fadeIn(1000);

oldImage.fadeOut(1000,function( ){

$(this).remove( );

});

}); // end click

$('#gallery a:first').click( );

This last statement has two parts. First the selector - #gallery a:first - selects just the first link only in the gallery . Next is the click( ) function. So far, you have used jQuery’s click() function to assign a function that runs when the event occurs. However, if you do not pass any arguments to an event function jQuery simply triggers that event causing any previously defined event handlers to run. Thus, this line triggers a click on the first link that makes the web browser run the function that you created earlier. That is, it makes the larger image for the first thumbnail fade into view when the page loads.

12. Save the page and preview it in a web browser. Not only do the thumbnails change colour when you mouse over them, but clicking a thumbnail makes its associated large image fade into view.

[pic]

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download