Flexible Image Lightbox & Gallery Plugin - jQuery oimage

oimage is a lightweight, flexible, responsive jQuery lightbox & gallery plugin creating for showcasing images on the webpage in an elegant way.

Features:

• Supports galley lightbox mode.
• Image rotating and zooming.
• Images are downloadable and draggable.
• Dynamic data rending.

How to use it:

1. Load the latest Font Awesome Iconic Font for the necessary control icons.

<link rel="stylesheet" 
      href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" 
      integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" 
      crossorigin="anonymous">

2. Load the latest jQuery library and the jQuery oimage plugin at the end of the document.

<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" 
        crossorigin="anonymous"></script>
<script src="oimage.js"></script>

3. Create a basic single image lightbox using the bigImage() method.

<img src="single.jpg"></img>

$('img').click(function(e) {
  $(this).bigImage();
})

4. Create a gallery lightbox form an image list using the listImage method.

<img src="thumb-1.jpg"></img>
<img src="thumb-2.jpg"></img>
<img src="thumb-3.jpg"></img>
<img src="thumb-4.jpg"></img>
<img src="thumb-5.jpg"></img>

$('.two img').click(function(e) {
  $(this).listImage({
    list: [
      'large-1.jpg',
      'large-2.jpg',
      'large-3.jpg',
      'large-4.jpg',
      'large-5.jpg'
    ]
  })
})

Change log:

2018-05-14

• JS update

---

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