Adaptive Gallery lightbox Plugin For jQuery - easyJqueryGallery

File Size: 34.3 KB
Views Total: 2015
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Adaptive Gallery lightbox Plugin For jQuery - easyJqueryGallery

A lightweight jQuery gallery lightbox plugin to display the full-sized images in a responsive gallery popup that auto shrinks and expands depending the current image size.

How to use it:

1. Add the thumbnails and original images to the gallery.

<div class="myGallery">
  <ul>
    <li>
      <a href="https://placeimg.com/1000/600/animals">
        <img src="https://placeimg.com/200/200/animals" alt="Image Caption 1">
      </a>
    </li>
    <li>
      <a href="https://placeimg.com/728/598/arch">
        <img src="https://placeimg.com/200/200/arch" alt="Image Caption 2">
      </a>
    </li>
    <li>
      <a href="https://placeimg.com/675/906/nature">
        <img src="https://placeimg.com/200/200/nature" alt="Image Caption 3">
      </a>
    </li>
    <li>
      <a href="https://placeimg.com/640/480/people">
        <img src="https://placeimg.com/200/200/people" alt="Image Caption 4">
      </a>
    </li>
    ...
  </ul>
</div>

2. Load easyJqueryGallery plugin's files in the document which has jQuery libray loaded.

<link rel="stylesheet" href="css/easyjquerygallery.min.css">
<script src="jquery.min.js"></script>
<script src="js/easyjquerygallery.min.js"></script>

3. Initialize the gallery lightbox by calling the function on the top container.

$('.myGallery').easyGalleryJquery();

4. Set the maximum width/height of the gallery lightbox.

$('.myGallery').easyGalleryJquery({
  percent: 80
});

5. Change the default title of the gallery.

$('.myGallery').easyGalleryJquery({
  title:'My Gallery'
});

6. Specify the image path of the loading spinner.

$('.myGallery').easyGalleryJquery({
  preloader:'images/loader.gif'
});

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