jQuery HTML5 Image Viewer Plugin – preview-image.js




mobile-first-jquery-html5-image-viewer-plugin-preview-image-js

Today we will share one Image Viewer Plugin based on HMTL5- preview-image.js .preview-image.js is a lightweight and mobile-first image viewer plugin that enables the user to display your image in a fullscreen sliding panel with the ability to navigate between images via keyboard arrows or touch swipe events.

How to use it:

1. Load the latest version of jQuery (slim build is recommended) or Zepto.js library in your html document.

<script src="http://code.jquery.com/jquery-3.1.1.slim.min.js"></script>

2. Download the plugin and load the following JS & CSS files in the document.

<link rel="stylesheet" href="preview-image.min.css">
<script src="preview-image.min.js"></script>

3. Insert your image list to a DIV container ‘preview’.

<div id="preview">
 <ul>
 <li>
 <img src="1.jpg" alt="picture 1">
 </li>
 <li>
 <img src="2.jpg" alt="picture 2">
 </li>
 <li>
 <img src="3.jpg" alt="picture 3">
 </li>
 <li>
 <img src="4.jpg" alt="picture 4">
 </li>
 <ul>
</div>

4. Just call the plugin on the container element and we’re done.

$('#preview').preview();

This awesome jQuery plugin is developed by liukaijv.

For more Advanced Usages, please check the demo page or visit the official website.


Leave a Reply

Your email address will not be published. Required fields are marked *