Your SlideShare is downloading. ×
0
07 improving your images
07 improving your images
07 improving your images
07 improving your images
07 improving your images
07 improving your images
07 improving your images
07 improving your images
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

184

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
184
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

×