Mobile First jQuery / HTML5 Image Viewer Plugin - 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.

View the demo page in the mobile:

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();  

Change log:

2016-12-13

• JS update

---

This awesome jQuery plugin is developed by liukaijv. For more Advanced Usages, please check the demo page or visit the official website.