07 improving your images
-
Upload
rap-payne -
Category
Technology
-
view
712 -
download
0
Transcript of 07 improving your images
![Page 1: 07 improving your images](https://reader036.fdocuments.net/reader036/viewer/2022070321/558a681ad8b42a6d7a8b45e5/html5/thumbnails/1.jpg)
CHAPTER 7: IMPROVING YOUR IMAGES
![Page 2: 07 improving your images](https://reader036.fdocuments.net/reader036/viewer/2022070321/558a681ad8b42a6d7a8b45e5/html5/thumbnails/2.jpg)
One of the most common things we do with jQuery is manipulate images
![Page 3: 07 improving your images](https://reader036.fdocuments.net/reader036/viewer/2022070321/558a681ad8b42a6d7a8b45e5/html5/thumbnails/3.jpg)
To swap images, you change the src attribute
• Example:
$('#goButton').mouseover(function () { $('#goButton').attr('src', 'newImg.png');});
![Page 4: 07 improving your images](https://reader036.fdocuments.net/reader036/viewer/2022070321/558a681ad8b42a6d7a8b45e5/html5/thumbnails/4.jpg)
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
![Page 5: 07 improving your images](https://reader036.fdocuments.net/reader036/viewer/2022070321/558a681ad8b42a6d7a8b45e5/html5/thumbnails/5.jpg)
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
![Page 6: 07 improving your images](https://reader036.fdocuments.net/reader036/viewer/2022070321/558a681ad8b42a6d7a8b45e5/html5/thumbnails/6.jpg)
Example of an image improvement plugin called FancyBox
fancybox
![Page 7: 07 improving your images](https://reader036.fdocuments.net/reader036/viewer/2022070321/558a681ad8b42a6d7a8b45e5/html5/thumbnails/7.jpg)
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();};
![Page 8: 07 improving your images](https://reader036.fdocuments.net/reader036/viewer/2022070321/558a681ad8b42a6d7a8b45e5/html5/thumbnails/8.jpg)
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
![Page 9: 07 improving your images](https://reader036.fdocuments.net/reader036/viewer/2022070321/558a681ad8b42a6d7a8b45e5/html5/thumbnails/9.jpg)
Lab• Rollover tutorial – pp. 211 – 216• Photo gallery tutorial – pp. 216 – 222• Fancybox photo gallery tutorial – pp. 231 - 234