IMPROVING YOURIMAGES WITH JQUERY
One of t         he mostthings w           common         e do witmanipul          h jQuery        ate imag          is   ...
To swap images, you change the srcattribute•  Example:$(#goButton).mouseover(function () {!  $(#goButton).attr(src, newImg...
You can preload your images to           avoid a visual delay by populating a           fake objects src propertyvar tempI...
Use the hover event for an image rollovereffect•  Example:var btn = $(#goButton);!btn.hover(function () {!       btn.attr(...
Example of an image improvement plugincalled FancyBox
To set up Fancybox, follow a few simplesteps1.  Download Fancybox from fancyapps.com/fancybox   •  Unzip and save the scri...
Conclusion•  There are many ways jQuery can make your pages   visually pleasing and easier to use•  Mouseovers can be done...
Lab•  Rollover tutorial – pp. 211 – 216•  Photo gallery tutorial – pp. 216 – 222•  Fancybox photo gallery tutorial – pp. 2...
Upcoming SlideShare
Loading in...5
×

07 improving your images

191

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
191
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

07 improving your images

  1. 1. IMPROVING YOURIMAGES WITH JQUERY
  2. 2. One of t he mostthings w common e do witmanipul h jQuery ate imag is es
  3. 3. To swap images, you change the srcattribute•  Example:$(#goButton).mouseover(function () {! $(#goButton).attr(src, newImg.png);!});!
  4. 4. You can preload your images to avoid a visual delay by populating a fake objects src propertyvar tempImg = new Image();!tempImg.src = images/car1.png;!•  Simply setting its source will ask for the image and cache it
  5. 5. Use the hover event for an image rollovereffect•  Example:var btn = $(#goButton);!btn.hover(function () {! btn.attr(src, images/goBtnOn.png);! }, function () {! bnt.attr(src, images/goBtnOff.png);! }!});!•  Remember that any elements event handler can affect any other element; it doesnt have to be the same one
  6. 6. Example of an image improvement plugincalled FancyBox
  7. 7. To set up Fancybox, follow a few simplesteps1.  Download Fancybox from fancyapps.com/fancybox •  Unzip and save the script, css, and images2.  Create your web page3.  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 jQuerys ready() function $document.ready(function () {! $(a.gallery).fancybox();! };!
  8. 8. 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
  9. 9. Lab•  Rollover tutorial – pp. 211 – 216•  Photo gallery tutorial – pp. 216 – 222•  Fancybox photo gallery tutorial – pp. 231 - 234
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×