AnythingZoomer²

Download

• Calendar
• Image
• Swap
• Text
• Double
• Usage
• Playground
• Issues

Sections: Basics | HTML | CSS | Parameters | Methods | Callbacks ^

Basics

This is a jQuery plugin, so you'll need to load the jQuery library first, then the plugin file, then invoke the new function on the area you wish to have zooming. There is a specific HTML structure and some required CSS to have all this work correctly, so read on. The full list of parameters is also below.

<link rel="stylesheet" href="css/anythingzoomer.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/jquery.anythingzoomer.js"></script>
<script>
  $(function(){
    $("#zoom").anythingZoomer();
  });
</script>

* The minimum supported jQuery version is 1.3.2.

The HTML

The only required HTML is the wrapper and the small area. The large area is required if you don't clone the small area.

<div id="zoom">
  <div class="small">
    <img src="demo/rushmore_small.jpg" alt="small rushmore" />
  </div>
    <-- the large content can be cloned from the small content -->
   <div class="large">
      <img src="demo/rushmore.jpg" alt="big rushmore" />
   </div>
</div>

There are five parts to the actual zoomable area. The idea is to allow for a good amount of flexibility in customizing each part. This includes the "small" area having different content from the "large" zooming area.

• The Wrap (#zoom) - goes around everything.
• Overlay (.az-overlay) - small image overlay; the "az-overlay" class is only applied when hovering.
• Small Area (.small) - the default viewable area, that you mouse over to zoom.
• Large (.large) - the content that is viewable through the zoomer.
• Zoom (.az-zoom) - the zooming box that follows the mouse around.

This is the HTML after the plugin has been applied.

<div id="zoom" class="az-wrap">
  <span class="az-wrap-inner">

    <div class="small az-small">
      <div class="az-overly az-overlay"></div>
      <span class="az-small-inner">
        <img src="demo/rushmore_small.jpg" alt="small rushmore">
      </span>
    </div>

    <div class="az-zoom az-windowed">
      <div class="large az-large">
        <img src="demo/rushmore.jpg" alt="big rushmore">
      </div>
    </div>

  </span>
</div>

The CSS

The widths, heights, borders and things like that can be altered to your needs. The positioning, z-index, overflow, and top/left values should stay as it is here to function properly.

Modify the .az-zoom definition as desired:

• Adjust the width and height to set the initial zoom window size.
• Add a border radius of 50% to make it round.
• Change the background color to adjust the color outside of the zoomed element.
• Adjust the border or box shadow color, or remove them if you don't like it.
• It's all defined in the CSS!

Image Demo CSS Example

.zoom      { width: 500px; }
.small img { width: 250px; height: 167px; }
.large img { width: 500px; height: 333px; background: white; }

anythingzoomer.css

/* AnythingZoomer */
.az-wrap, .az-small, .az-large {
  position: relative;
}
.az-wrap-inner {
	display: block;
	margin: 0 auto; /* center small & large content */
}
/* This wraps the large image and hides it */
.az-zoom {
	background: #fff;
	border: #333 1px solid;
	position: absolute;
	top: 0;
	left: 0;
	width: 110px;
	height: 110px;
	overflow: hidden;
	z-index: 100;
	display: none;
	-moz-box-shadow: inset 0px 0px 4px #000;
	-webkit-box-shadow: inset 0px 0px 4px #000;
	box-shadow: inset 0px 0px 4px #000;
}
/* Class applied to az-mover when large image is windowed */
.az-windowed {
	overflow: hidden;
	position: absolute;
}
/* Class applied to az-mover when large image is fully shown */
.az-expanded {
	height: auto;
	width: auto;
	position: static;
	overflow: visible;
}

/* overlay small area */
.az-overlay {
	background-color: #000;
	opacity: 0.3;
	filter: alpha(opacity=30);
	z-index: 10;
}

/* fade out small content when hovering
.az-hovered > * {
	opacity: 0.5;
	filter: alpha(opacity=50);
}
*/

/* edit mode coordinate styling */
.az-coords {
	display: none; /* hidden when expanded */
}
.az-zoom .az-coords {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	background: #000;
	background: rgba(0,0,0,0.5);
	color: #fff;
}

All Parameters

$("#zoom").anythingZoomer({
  // content areas
  smallArea   : 'small',    // class of small content area; the element with this class name must be inside of the wrapper
  largeArea   : 'large',    // class of large content area; this class must exist inside of the wrapper. When the clone option is true, it will add this automatically
  clone       : false,      // Make a clone of the small content area, use css to modify the style

  // appearance
  overlay     : false,      // set to true to apply overlay class "az-overlay"; false to not apply it
  speed       : 100,        // fade animation speed (in milliseconds)
  edge        : 30,         // How far outside the wrapped edges the mouse can go; previously called "expansionSize"
  offsetX     : 0,          // adjust the horizontal position of the large content inside the zoom window as desired
  offsetY     : 0,          // adjust the vertical position of the large content inside the zoom window as desired

  // functionality
  switchEvent : 'dblclick', // event that allows toggling between small and large elements - default is double click
  delay       : 0,          // time to delay before revealing the zoom window

  // edit mode
  edit        : false,      // add x,y coordinates into zoom window to make it easier to find coordinates

  // callbacks
  initialized : function(event, zoomer){}, // AnythingZoomer done initializing
  zoom        : function(event, zoomer){}, // zoom window visible
  unzoom      : function(event, zoomer){}  // zoom window hidden

});

Methods

Enable or Disable AnythingZoomer

To enable or disable AnythingZoomer, call the plugin with the appropriate text:

$('.zoom').anythingZoomer('disable'); // disable AnythingZoomer
$('.zoom').anythingZoomer('enable');  // enable AnythingZoomer

This method is demonstrated in the Double demo page. What isn't shown there is that when AnythingZoomer is disabled, the zoom window automatically closes and the small area content is shown.

Control Zoom Window Externally

You can open the zoom window using an external link using these methods. This would be useful to highlight portions of the content in say instructions on how to use an app or name the presidents in the image demo.

// TARGET X,Y COORDINATE
// $('.zoom').anythingZoomer( x, y, [ w, h ] );
// x, y = left and top coords to target (will be centered in the zoom window)
// w, h = width and height of the zoom window, if not defined, it will default to the css definition
// Example: $('.zoom').anythingZoomer( 88, 51, [200,200] );
// 88, 51 will target George Washington; [200,200] will make the zoom window 200px x 200px in size

$('.zoom').anythingZoomer( 88, 51, [200,200] );

// TARGET AN OBJECT
// $('.zoom').anythingZoomer( 'selector', [ xOffset, yOffset ], [zoomW, zoomH] );
// 'selector' - jQuery selector targeting the element
// [xOffset, yOffset] - by default the zoom window will center itself on the element, if you want to move the window, change the offset values (negative values are okay)
// [zoomW, zoomH] - width and height of the zoom window

// Example: $('.zoom').anythingZoomer( '.day[rel=2009-08-26]', [0, 0], [200, 200] );
// '.day[rel=2009-08-26]' targets the table cell with day class name and rel attribute of "2009-08-26"
// [ 0, 0 ]  has no x or y offset; this can be replaced with '' (empty string); or if only one number is included, like [-1] this sets the xOffset only
// [200,200] will make the zoom window 200px x 200px in size

$('.zoom').anythingZoomer( '.day[rel=2009-08-26]', [0, 0], [200, 200] );

Image Demo Example

<a href="#" class="president" rel="88,51">George Washington</a>,
<a href="#" class="president" rel="114,62">Thomas Jefferson</a>,
<a href="#" class="president" rel="133,80">Theodore Roosevelt</a> or
<a href="#" class="president" rel="160,78">Abraham Lincoln</a>

$('.president')
  // prevent the link from doing anything
  .bind('click', function(){
    return false;
  })
  // click or mouseover the link to show the zoom window
  .bind('mouseover click', function(){
    // get coordinates from rel attribute
    var loc = $(this).attr('rel');
    if (loc && loc.indexOf(',') > 0) {
      loc = loc.split(',');
      // send the coordinates to anythingZoomer
      $('.zoom').anythingZoomer( loc[0], loc[1] );
    }
    return false;
  });

Callbacks and Events

These callbacks were added to allow further customizations.

Callback functions

$('#zoom').anythingZoomer({
  // initialized occurs after AnythingZoomer has initialized
  initialized : function(e, zoomer){},
  // zoom occurs when the zoom window is visible
  zoom        : function(e, zoomer){},
  // unzoom occurs when the zoom window is hidden
  unzoom      : function(e, zoomer){}
});

Events

Bind to the AnythingZoomer's events as follows:

$('#zoom').bind('initialized', function(e, zoomer){
  // do something after AnythingZoomer has initialized
});

$('#zoom').bind('zoom unzoom', function(e, zoomer){
  // do something when the zoom toggles
  if (e.type === "zoom") {
    // do something when zoomed
  } else {
    // do something when unzoomed
  }
});

Callback and Events Arguments and Functions

These arguments and functions are available from the callback or event methods, or from the zoomer data object.
Access the AnythingZoomer object from outside of callbacks and events as follows:

var zoomer = $('#zoom').data('zoomer');