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

Like this? Share it with your network

Share

07 improving your images

  • 457 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
457
On Slideshare
457
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
3
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