Single image, different size, different styling, different magnifier type.
Example 3
Small thumbnails on the left, different styling, different zoom frame size, more visible small thumbnails, high detail image examples, no autoplay, no zoom icon, no hint, no easing.
Etalage is a ready to use jQuery image zooming plugin to present your images in the highest detail without leaving the page.
Simply link to the JavaScript and CSS files and apply it to your HTML element like other jQuery plugins. Customize the settings and CSS to match your style and purpose.
Full documentation and examples included.
Example 1: Some basic styling applied, all default plugin options. Example 2: Single image, different size, different styling, different magnifier type. Example 3: Small thumbnails on the left, different styling, different zoom frame size, more visible small thumbnails, high detail image examples, no autoplay, no zoom icon, no hint, no easing.
External controls for example 1:
Features
Customizable by CSS and plugin options
Precise positioning of all elements based on your image dimensions and CSS
The small thumbnails are automatically generated, sized and positioned
Low resolution preview (enlarged thumbnail) while downloading the zoomed image (except in IE)
Optional easing of the zoomed image movements
Optional autoplay
Optional descriptions/captions
Unlimited number of images
Align Etalage left/right, with the zoom area on the opposite side
Small thumbnails can be positioned below or on the left/right (vertically)
Optional external controls for previous/next/specific image
Inclides customizable callback functions
Multiple instances per page possible
Works in all common browsers (and IE6)
Includes documentation and commented source files
Includes an "absolute basic" file to get you started
Plugin options
The large thumbnail width/height
The zoomed image frame width/height
The amount of small thumbnails visible at a time
The position of the small thumbnails
Animation speeds
Autoplay on/off
Autoplay interval
Easing on/off
Hint on/off
Zoom icon on/off
Keyboard functionality on/off
Hover or click to zoom
2 Magnifier types (the glass covering the large thumb on hover)
And more
Requirements
jQuery version 1.4+ (Note: IE9 is fully supported since 1.5.2)
Implementation
Include the jQuery library
Include the CSS file and optionally customize it with your own styling
Include the plugin JavaScript file
Provide your HTML list of images (see example below)
Invoke the plugin on your list and optionally change the settings to your liking of functionality
Analysis of HTML list
<!-- Give it any id or class to identify it with: -->
<ul id="etalage">
<li>
<!-- This is the large (zoomed) image source: -->
<img class="etalage_source_image" src="/images/large_image_1.jpg"
title="Optionally, your description goes here." />
<!-- This is the thumb image source (if not provided, it will use the large image source and resize it): -->
<img class="etalage_thumb_image" src="/images/thumb_image_1.png" />
</li>
</ul>
More detailed documentation is included, along with the commented source files.
New in version 1.21 (2011-sep-04):
Fixed a bug with external controls when there were no small thumbnails out of range
New in version 1.2 (2011-jul-23):
Even more precise zoom image positioning.
Bug fixed where the description box would be stretched when positioned at the top.
Click callback function (Good for lightboxes or anything you want to happen on click).
Added plugin option "click_to_zoom". When enabled, clicking the large thumbnail will initiate zooming (instead of hovering it). This does not go together with click-callback functions.
Added plugin option "smallthumbs_position". The small thumbnails can now be positioned on the left or right of the large thumbnail (vertically).
Added plugin option "align". The Etalage container can now be aligned to the right, with the zoom area on the left.
External functions for switching previous/next/to a specific image number.
Note: You should also use the new CSS for this update if you are upgrading from a previous version (at least copy the "functional" section at the bottom; the personal styling section remains the same).
New in version 1.1 (2011-apr-24):
Added an optional description area overlaying the zoomed image. Pass the description text through the title attribute of the source image:
