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();
View All Demos

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