previewer

Demo 1

A JavaScript image previewer for the web, which uses a Picasa inspired UI and is super light-weight.

Setup

Make sure you have the previewer.js and previewer.css files (or the minified versions) included in the html document.

<link rel="stylesheet" href="Path/To/previewer.css" />

<script src="Path/To/previewer.js" type="text/javascript"></script>

For adding the preview functionality to a single image, just add a preview-image class.

<img src="Path/To/Image" alt="" class="preview-image"/>

For multiple images, arranged as a list, add a preview-images class to the parent.

<ul class="preview-images">
  <li><img src="Path/To/Image1" alt="" /></li>
  <li><img src="Path/To/Image2" alt="" /></li>
  <li><img src="Path/To/Image3" alt="" /></li>
</ul>

For different thumbnail and preview, use data-previewer attribute.

<img src="Path/To/Thumbnail" data-previewer="Path/To/Image" >

To finish up, initialize previewer by adding the following code:

var previewer = new Previewer();

Features to be added

• Popup and close animations
• Keyboard support
• Add Gulp to auto-minify
• Mobile support
• Add loader
• Remove jQuery dependancy