CHAPTER 7: IMPROVING YOUR IMAGES

One of the most common things we do with jQuery is manipulate images

To swap images, you change the src attribute

• Example:

$('#goButton').mouseover(function () { $('#goButton').attr('src', 'newImg.png');});

You can preload your images to avoid a visual delay by populating a fake object's src property

var tempImg = new Image();tempImg.src = 'images/car1.png';• Simply setting its source will ask for the image and cache

it

Use the hover event for an image rollover effect

• Example:

var btn = $('#goButton');btn.hover(function () { btn.attr('src', 'images/goBtnOn.png'); }, function () { bnt.attr('src', 'images/goBtnOff.png'); }});• Remember that any element's event handler can affect

any other element; it doesn't have to be the same one

Example of an image improvement plugin called FancyBox

fancybox

To set up Fancybox, follow a few simple steps

1. Download Fancybox from fancyapps.com/fancybox• Unzip and save the script, css, and images

2. Create your web page

3. Add links with a common class<a href='images/photo1.jpg" class='gallery'></a><a href='images/photo2.jpg" class='gallery'></a>…

4. Add a script link to fancybox.js and a style link fancybox.css<link rel='stylesheet' href='fancybox.css /><script src='jquery.fancybox-x.x.x.min.js'></script>

5. Call fancybox from jQuery's ready() function$document.ready(function () { $('a.gallery').fancybox();};

Conclusion• There are many ways jQuery can make your pages

visually pleasing and easier to use• Mouseovers can be done using hover()• Preloading images will prevent distracting page-ins• Fancybox is a jQuery plug-in that easily creates a

compelling image gallery

Lab• Rollover tutorial – pp. 211 – 216• Photo gallery tutorial – pp. 216 – 222• Fancybox photo gallery tutorial – pp. 231 - 234