#AnythingZoomer jQuery Plugin
- Latest AnythingZoomer demo.
- Documentation.
- Original post at CSS-Tricks.
- Have an issue? Submit it here.
- In the text demo, you can resize the large area content dynamically. At 2x, the top left corner of the large content matches the top left corner of the small content. But as the size increases (up to 4x), the spacing of the content from the top left corner increases. This happens with any content. I'm still looking for a fix.
- AnythingZoomer can now be updated to change both the small and large content dynamically.
- To update the content, just call anythingZoomer without any options:
$('#zoom').anythingZoomer();
. - Added a Swap image demo to show this in action!
- To update the content, just call anythingZoomer without any options:
- Modified the plugin to properly position the zoom window with dynamically centered content.
- Added a
margin: 0 auto
to.az-wrapper-inner
to center both the small and large content.
- Added a
- A class name of
az-hovered
will be applied to theaz-small-inner
when it is hovered.- This can be used to change the opacity of the
smallArea
content while the zoom window is active. - See the anythingzoomer.css file; the addition is commented out.
- This can be used to change the opacity of the
- Added a
speed
option:- This option allows you to set the zoom window's fade animation speed.
- Time can be set in milliseconds, or use
'slow'
or'fast'
. - Default is 100 milliseconds.
- Added an
overlay
option:- An overlay has been added to cover the
smallArea
content, by default it has no styling and shouldn't interfere; but if it does, add a negative z-index to theaz-overly
(no "a") class. - If this option is
true
, theaz-overlay
class name is applied to the overlay to darken the area below the zoom window. - If
false
, the default setting, the overlay will remain transparent. - The Image demo has been updated to demonstrate the overlay.
- An overlay has been added to cover the
- Added events and callbacks:
initialized
event which occurs after AnythingZoomer has finished initializing.zoom
event occurs when the zoom window is visible.unzoom
event occurs when the zoom window is hidden.- Instructions on how to use the callback or events can be found in the documentation.
- Added an
edit
option:- When true, it will add the mouse coordinates in the upper right corner of the zoom window.
- If false, the default setting, no coordinates are shown.
- Added to assign in finding the center of the zoom window for use in external zoom window links.
- Resized the small Rushmore image in attempts to maintain a small-to-large content ratio of 2.5 - it makes the coordinates match better when using edit mode ;).
- Added
offsetX
andoffsetY
options:- When using the
edit
option, you may sometimes notice that the top left corner of the image isn't at 0,0 and the bottom right corner doesn't match the small area dimensions like it should be. This is partially due to the jQuery offset not including borders, margins or padding. And partially due to the ratio between the small and large areas. - Sometimes it isn't a big deal to be a few pixels off, but if you need to adjust it perfectly, use these options. To do this, enable the edit mode coordinates (set edit to true) then use these options to adjust the location of the large content within the zoom window to set the proper position.
- Due to the calculation of the ratio between the small and large content, the bottom right corner may not perfectly coincide either.
- When using the
- Updated
edge
option to now allow setting it to zero. - Fixed an issue in the Double Demo when the Text Demo was expanded (large content showing), and the zoom window would not line up properly in the Image demo.
- Fixed an issue where moving from the AnythingZoomer window to an external link would cause a flicker.
- Updated the documentation page with the new options and features.
- Added package.json created by Richard D. Worth
- Updated download links.
- Initial commit to github.
- Modified initial required markup
- Removed
zoomPort
andmover
options. - Changed
smallArea
andlargeArea
to use classes. - Removed the
speedMultiplier
option, it is now automatically calculated. - Renamed
expansionSize
option toedge
. - Added
clone
option to make a clone of thesmallArea
content. - Added methods to open up the zoom window from an external link.
- Added
switchEvent
option to allow changing the event that toggles between the small and large content.
- Initial post on css-tricks