IMPROVING YOUR IMAGES WITH JQUERY

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

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