Full instructions are contained in the html files.
When you apply the plugin to your images, you can provide settings to your liking.
Example of applying Etalage with custom settings:
<script type="text/javascript">
$(document).ready(function(){
// If your <ul> has the id "etalage":
$('#etalage').etalage({
// These are the most common settings (because they are case specific)
thumb_image_width: 300,
thumb_image_height: 400,
source_image_width: 1200,
source_image_height: 1600,
zoom_area_width: 800
// Note: the last option does not end with a comma
});
});
</script>
| Name | Description | Default |
|---|---|---|
| align | Align of the Etalage container. The zoom area will appear on the opposite side ('left'/'right') | 'left' |
| thumb_image_width | The large thumbnail width (excluding borders / padding) (value in pixels) | 300 |
| thumb_image_height | The large thumbnail height (excluding borders / padding) (value in pixels) | 400 |
| source_image_width | The source/zoomed image width (not the frame around it) (value in pixels) | 900 |
| source_image_height | The source/zoomed image height (not the frame around it) (value in pixels) | 1200 |
| zoom_area_width | Width of the zoomed image frame (including borders, padding) (value in pixels) | 600 |
| zoom_area_height | Height of the zoomed image frame (including borders, padding) (value in pixels / 'justify' = automatic (height of large thumb + small thumbs)) | 'justify' |
| zoom_area_distance | Distance between the zoom area and thumbnail (value in pixels) | 10 |
| zoom_easing | Ease the animation while moving the zoomed image (true/false) | true |
| click_to_zoom | Will start zooming when image is clicked instead of when hovering (when true, click-callback functions are disabled) (true/false) | false |
| zoom_element | Supply your custom zoom area element as a CSS type selector ('auto'/'#selector'/'.selector'). This allows for more freedom in positioning the zoom area outside of the Etalage container. To change the dimensions, set the "zoom_area_width" and "zoom_area_height" options to their pixel values. | 'auto' |
| show_descriptions | Shows the description area if a title attribute is given to the source image (true/false) | true |
| description_location | Location of the description area ('top'/'bottom') | 'bottom' |
| description_opacity | Opacity of the description area (except for IE) (number between or equal to 0-1) | 0.7 |
| small_thumbs | How many small thumbnails will be visible underneath the large thumbnail (minimum of 3) (number) | 3 |
| smallthumb_inactive_opacity | Opacity of the inactive small thumbnails (number between or equal to 0-1) | 0.4 |
| smallthumb_hide_single | Don't show the small thumb when there is only 1 image (true/false) | true |
| smallthumb_select_on_hover | This will scroll through the small thumbnails when hovering them, instead of clicking them (true/false) | false |
| smallthumbs_position | Where to position the row of small thumbnails ('top'/'bottom'/'left'/'right') | 'bottom' |
| show_begin_end_smallthumb | Whether to show extra thumbnails at the beginning and the end that navigate back to the end or beginning (true/false) | true |
| magnifier_opacity | Opacity of the magnifier area (does not apply if magnifier_invert is true) (number between or equal to 0-1) | 0.5 |
| magnifier_invert | Make the large thumbnail clear through the magnifier, opaque around it (opacity is the value of magnifier_opacity) (true/false) | true |
| show_icon | Shows the icon image in the middle of the magnifier (only if magnifier_invert is false) and left-bottom of large thumb (true/false) | true |
| icon_offset | The icon's offset to the left-bottom corner (value in pixels) | 20 |
| hide_cursor | Hides the cursor when hovering the large thumbnail (only works in some browsers) (true/false) | false |
| show_hint | Show "hint" until image is zoomed for the first time (true/false) | false |
| hint_offset | The hint's offset to the right-top corner (value in pixels) | 15 |
| speed | All animation speeds are based on this setting (value in ms) | 600 |
| autoplay | Makes the thumbs switch automatically when not interacting (at each autoplay_interval below) (true/false) | true |
| autoplay_interval | Time showing each image if autoplay is on (value in ms) | 6000 (6 seconds) |
| keyboard | Left/right arrow keys to navigate (true/false) | true |
| right_to_left | Makes the thumbnails slide from right to left and the caption texts RTL (true/false) | false |
| click_callback | Provide your own callback for the click event (function). Takes 2 arguments: image_anchor, instance_id. The old callback function method (up to v.1.3.1) is still supported in case you are already using those. Example:
$('etalage').etalage({
click_callback: function(image_anchor, instance_id){
alert('Callback example:\nYou clicked on an image with the anchor: "'+image_anchor+'"\n(in Etalage instance: "'+instance_id+'")');
}
});
|
function(){ return true; } |
| change_callback | Provide your own callback for the change event (thumb switching) (function). Takes 2 arguments: image_number, instance_id. The old callback function method (up to v.1.3.1) is still supported in case you are already using those. Example:
$('etalage').etalage({
change_callback: function(image_number, instance_id){
alert('Callback example: New active image: '+image_number+' (in Etalage instance: '+instance_id+')');
}
});
|
function(){ return true; } |
Create a list of images in an Unordered List. One image as the source image, another as the thumbnail. The thumbnail will be a resized source image if not provided (not recommended for beauty and performance).
<!-- 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>