Reader
You are here: Home / Archives for zoom

Zoom Areas in Images: Free Flash Magnifying Glass Effect

Last updated on by Gabriel Livan

If you need an application that magnifies specific areas in images, then Magnifying Glass Effect is the right choice for you. Images can be displayed in high resolution with no contrasts. You can define the image path, the display area size, and the lens size (XML or HTML). No Flash programming experience is necessary to edit the file, since all the settings are loaded from an external XML file (easy editable).

flabell-magnifying-glass-effect-floating-island

Features include:

  • Scalable lenses
  • Scalable display area
  • Scalable image

General details:

  • Opens with: Flash CS3+
  • Resolution: Resizable
  • Published size: 20kb
  • ActionScript version: AS3

The image is automatically resized to fit the entire display area, and this is the minimum zoom of the image. The large image is the maximum zoom of the image. Through the lenses the user can see the image at the highest resolution, without the need to wait for a different image to load.

Zoom Elements: ‘Anything Zoomer’ jQuery Plugin

Last updated on by Gabriel Livan

jquery-anything-zoomer

AnythingZoomer is a JQuery plugin useful to zoom specific areas such as text and images. You can customize the zoom area via CSS and also use multiple zoomers on the same page.

It’s flexible in many ways, in that the “small”, “large”, and “zoom” areas are all pretty easy to customize (via CSS). It’s inflexible in other ways, in that it doesn’t “automatically” work by cloning content or anything like that (which is arguably more flexible), and the HTML structure is fairly rigid.

Magnify Images using jQuery

Last updated on by Gabriel Livan

JQuery Image Magnify is a script by Dynamic Drive that enables any image to be magnified by a specific factor when clicked on using a sleek zoom in/out effect. The image is zoomed to the center of the user’s screen. You just have to set a smaller width and height for the image then apply the class ‘magnify’ to it.

This script is extremely easy to set up- to enable the “magnify” effect on any image, just give it a CSS class of “magnify”. It’s time to let you users take a closer look at images on your page!

jquery-image-magnify

JS LightBoxes with Fancy Zoom Effect

Last updated on by Gabriel Livan

Do you need to implement a lightbox that has the zoom effect when it is triggered? Take a look at the following resources! Some of the frameworks used to develop the scripts are JQuery, MooTools, and Prototype.

fancy-zoom.1.1

FancyZoom 1.1 is a LightBox designed to view images inline without reloading the web page. It provides a smooth, clean, truly Mac-like effect. It’s very simple to implement in the pages of your website and it doesn’t use any JavaScript libraries.

Features include:

  • Easy to implement (requires just two lines of code in your HTML page)
  • Focuses on the smoothest, most polished zooming animation possible
  • Preloads full-size images in the background on link mouseover
  • Offsets the full-size image from the page by drawing a nice drop shadow under it
  • Uses Safari 3’s “box-shadow” feature to draw the drop shadow natively, no images required

jquery-fancy-zoom

jQuery plugin: Fancy Zoom – This is the JQuery version of the FancyZoom script. It comes with a few changes:

  • Fixed the overlay bug in IE6
  • images are resized if size is bigger than document screen
  • FancyZoom can be applied directly on an image, no more link wrapper needed.

Zoomy JavaScript based loosely on Fancy Zoom by Cabel Sasser – Developer John Nunemaker rewrote the original FancyZoom script, making some changes to it such as:

  • Implementation of box rounded corners
  • Works with any HTML (images, text, headings, flash)
  • Width and Height of Zoom Box are configurable through optional setting or CSS

The package contains FancyZoom versions for JQuery, MooTools and Prototype.

Fancy Hover Box/Image Effect

Last updated on by Gabriel Livan

Hoverbox Image Gallery is a super light-weight (8kb) roll-over photo gallery that uses CSS. It pop outs an image without affecting the page’s layout.

Fancy Thumbnail Hover Effect w/ jQuery is a nice tutorial that teaches you how to add a nice hover effect to an image. A bigger image pops out above the thumbnail.