Zoom! Zoom! Zoom!

JavaScript can be used to add zoom interactivity to your images. A zoom typically consists of a smaller image, which when rolled over with a mouse, reveals a larger, more detailed version of the image. JavaScript zooms are also often used when 'real estate' (space) issues exist on a webpage. Zooms are also used when image details need to be supplied to an audience.

Magic Zoom: Inner Zoom

MagicZoom is not a free JavaScript tool, but is well worth the cost. Users can download a trial version of the product and test it for functionality. If functionality needs are met, a commercial version of the product can be purchased. Users then simply replace the trial .js file with the commercial .js file. No additional page modifications need to be made. This pop-up effect, including instructions for use and file downloads can be found at:

In Adobe Bridge:

  1. Locate and select magic-zoom.jpg in the ‘site-working’ folder
  2. Right-click and choose open with Photoshop

In Adobe Photoshop:

  1. Highlight magic-zoom.jpg
  2. From the Menu Bar, go to Image > Image Size
  3. Set the image width value to 1600 pixels
  4. Set the interpolation to Bicubic Sharper
  5. From the Menu Bar, go to View > Actual Pixels
  6. From the Menu Bar, go to File > Save for Web & Devices...
  7. Set the save preset to JPEG Medium (quality of 30)
  8. Save the image as magic-zoom-big.jpg into the ‘site-media’ folder
  9. From the Menu Bar, go to Image > Image Size
  10. Set the image width value to 408 pixels
  11. Leave the interpolation on Bicubic
  12. From the Menu Bar, go to View > Actual Pixels
  13. From the Menu Bar, go to File > Save for Web & Devices...
  14. Set the save preset to JPEG High (quality of 60)
  15. Save the image as magic-zoom-small.jpg into the ‘site-media’ folder
  16. Close the magic-zoom.jpg file – do NOT save

In Adobe Dreamweaver:

  1. Open zoom.html
  2. Working in Design View
  3. Replace the page left image with magic-zoom-small.jpg from the ‘site-media’ folder
  4. Be sure the images is not scaled in the Properties Panel
  5. Link magic-zoom-small.jpg to magic-zoom-big.jpg in the Properties Panel

To add the MagicZoom functionality and CSS:

  1. Switch to Code View
  2. Make room the <head> section to add a link to an external .js file
  3. From the Menu Bar, Insert > HTML > Script Objects > Script
  4. Link to site-javascript/magiczoom-trial/magiczoom.js
  5. In the CSS Panel, click the Attach Style Sheet icon (chain links)
  6. Attach: site-javascript/magiczoom-trial/magiczoom.css

To add the MagicZoom effect:

  1. Working in Design View
  2. Select the magic-zoom-small.jpg image
  3. Switch to Code View
  4. Within the magic-zoom-small.jpg link tag, add
    class="MagicZoom" rel="zoom-position:inner;"
  5. Save your files
  6. Refresh your Firefox page
  7. Roll-over your MagicZoom’d image

Modify the default look:

  1. Within the magic-zoom.jpg link tag, change to:
    rel="zoom-position:right;"
  2. Save your files
  3. Refresh your Firefox page
  4. Roll-over your MagicZoom’d image
  5. Within the magic-zoom.jpg link tag, change to:
    rel="zoom-position:right;zoom-fade:true"
  6. Save your files
  7. Refresh your Firefox page
  8. Roll-over your MagicZoom’d image

Copyright © 2010 | Bill Morrison | All Rights Reserved