Viewer
A jQuery plugin for image exploration.
Demo
Demos are largely unstyled to give developers a better idea of how the plugin can drop into a new or existing project.

<div class="viewer">
	<img src="thumbnail.jpg" alt="">
</div>
$(".viewer").viewer();
Using Viewer
Main
viewer.js
viewer.css
Dependencies
jQuery
core.js
touch.js
transition.js
Basic
Viewer will create a zoomable image based on the child image of it's target:
$(".target").viewer();
<div class="target">
<img src="one.jpg" alt="">
</div>
Basic
Viewer will create a gallery if multiple child images are found:
$(".target").viewer();
<div class="target">
<img src="one.jpg" alt="">
<img src="two.jpg" alt="">
<img src="three.jpg" alt="">
</div>
Options
Set instance options by passing a valid object at initialization, or to the public defaults
method. Custom options for a specific instance can also be set by attaching a data-viewer-options
attribute to the target elment. This attribute should contain the properly formatted JSON object representing the custom options.
Name | Type | Default | Description |
---|---|---|---|
controls |
boolean or object |
true |
Flag to draw controls OR object containing container, next, previous, zoom_in and zoom_out control selectors (Must be fully qualified selectors) |
customClass |
string |
'' |
Class applied to instance |
labels.count |
string |
'of' |
Gallery count separator text |
labels.next |
string |
'Next' |
Gallery control text |
labels.previous |
string |
'Previous' |
Gallery control text |
labels.zoom_in |
string |
'Zoom In' |
Image zoom text |
labels.zoom_out |
string |
'Zoom Out' |
Image zoom text |
theme |
string |
"fs-light" |
Theme class name |
zoomDelta |
int |
100 |
Max zoom change |
zoomEnertia |
float |
0.2 |
Enertia for zoom |
zoomIncrement |
float |
0.01 |
Increment for zoom buttons |
Events
Events are triggered on the target instance's element, unless otherwise stated.
Event | Description |
---|---|
loaded.viewer |
Image loaded |
ready.viewer |
Image ready |
Methods
Methods are publicly available to all active instances, unless otherwise stated.
defaults
Extends plugin default settings; effects instances created hereafter.
$.viewer("defaults", { ... });
Parameters
Name | Type | Default | Description |
---|---|---|---|
options |
object |
{} |
New plugin defaults |
destroy
Removes plugin instance.
$(".target").viewer("destroy");
load
Loads source image
$(".target").viewer("load", "path/to/image.jpg");
$(".target").viewer("load", ["path/to/image-1.jpg","path/to/image-2.jpg"]);
Parameters
Name | Type | Default | Description |
---|---|---|---|
source |
string OR array |
Source image (string) or array of images (array) |
unload
Unloads current image
$(".target").viewer("unload");
CSS
Class | Type | Description |
---|---|---|
.fs-viewer-element |
element |
Target elmement |
.fs-viewer |
element |
Base widget class |
.fs-viewer-source |
element |
Source image element |
.fs-viewer-wrapper |
element |
Viewer wrapper |
.fs-viewer-viewport |
element |
Viewer viewport |
.fs-viewer-container |
element |
Image container |
.fs-viewer-image |
element |
Image element |
.fs-viewer-controls |
element |
Controls container |
.fs-viewer-control |
element |
Control element |
.fs-viewer-control_previous |
element |
Previous control |
.fs-viewer-control_next |
element |
Next control |
.fs-viewer-control_zoom_in |
element |
Zoom in control |
.fs-viewer-control_zoom_out |
element |
Zoom out control |