Your SlideShare is downloading. ×
07 improving your images
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

07 improving your images

176
views

Published on


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

  • Be the first to like this

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. IMPROVING YOURIMAGES WITH JQUERY
  • 2. One of t he mostthings w common e do witmanipul h jQuery ate imag is es
  • 3. To swap images, you change the srcattribute•  Example:$(#goButton).mouseover(function () {! $(#goButton).attr(src, newImg.png);!});!
  • 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. 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. Example of an image improvement plugincalled FancyBox
  • 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. 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. Lab•  Rollover tutorial – pp. 211 – 216•  Photo gallery tutorial – pp. 216 – 222•  Fancybox photo gallery tutorial – pp. 231 - 234