07 improving your images
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

07 improving your images

on

  • 433 views

 

Statistics

Views

Total Views
433
Views on SlideShare
433
Embed Views
0

Actions

Likes
0
Downloads
3
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

07 improving your images Presentation 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