A JavaScript image previewer for the web, which uses a Picasa inspired UI and is super light-weight.
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();
- Popup and close animations
Keyboard support- Add Gulp to auto-minify
Mobile support- Add loader
Remove jQuery dependancy