07 improving your images

914 views

Published on

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
914
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Very quick chapter to go through together, but the labs are substantial. So this is a very heavily hands-on chapter. You'll get lots of opportunity to experiment.
  • Ask … give me some examplesrollover swap out
  • pp. 207 – 209On a rollover image swap, I'd prefer doing it declaratively with CSS. But there are other times when we need an imperative or procedural swap-out.Mouseover is fine, but there's a better way coming up in a couple of pages.
  • pp. 209 – 210Problem: when you swap out images, there may be a loading delay while the browser fetches it from the server. To avoid that, pre-fetch it.
  • pp. 210 - 211
  • pp. 222 – 231Show the website demo. Then read through the steps on these pages.Sure, this has to do with images, but we're not saying fancybox is a standard. We're just picking fancybox to demonstrate how plug-ins can help you to save huge amounts of time.
  • pp. 223 – 225Many, many other ways to customize Fancybox but that isn't the point of this lecture. You'll get a chance to explore some of them in the tutorial.
  • 07 improving your images

    1. 1. CHAPTER 7:IMPROVING YOURIMAGES
    2. 2. To swap images, you change the srcattribute• Example:$(#goButton).mouseover(function () { $(#goButton).attr(src, newImg.png);});
    3. 3. 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
    4. 4. 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
    5. 5. Example of an image improvement plugincalled FancyBox
    6. 6. 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(); };
    7. 7. 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
    8. 8. Lab• Rollover tutorial – pp. 211 – 216• Photo gallery tutorial – pp. 216 – 222• Fancybox photo gallery tutorial – pp. 231 - 234

    ×