Pure JavaScript Image Gallery – LGallery

by Posted on

LGallery is a multi-purpose JavaScript image gallery library to create responsive, mobile-friendly galleries, sliders, carousels, and open lightboxes for images where the users are able to switch between images in a lightbox popup.
javascript-image-gallery

Libraries

Include the LGallery’s JavaScript and CSS files on page.

<link rel="stylesheet" href="/path/to/lgallery.min.css">
<script src="/path/to/lgallery.min.js"></script>



HTML

Create a gallery lightbox where the users are able to switch between images in a lightbox popup.

<div class="example" data-lgallery="1.jpg,2.jpg,3.jpg"></div>
<!-- OR -->
<div class="example" data-lgparent">
  <div>
    <img src="1.jpg">
    <span>Image 1</span>
  </div>
  <div>
    <img src="2.jpg">
    <span>Image 2</span>
  </div>
  <div>
    <img src="3.jpg">
    <span>Image 3</span>
  </div>
</div>

JS

The easiest way to initialize LGallery is to put in:

<script>
  initLG()
</script>




Here list of options you can use to customize the plugin.

Method Arguments Description
initLG() – Standard method. Use it to identify all LGalleries on your page and initialize them
setLG (type, options) – type (one of ‘lgallery’, ‘lgparent’, ‘lgslider’, ‘lgpreview’, ‘lgcarusel’);

– options (your object with options)

An opportunity to apply an option object for your galleries. Use it before initLG()
createLG (element, options) – specific element (required argument);

– and set to it a specific object with options (non-required argument)

Another variant of creating a gallery. Please, do not use it with initLG() on one page. This method gives you an opportunity to create LGallery to the specific element with object of options

See live demo and download source code.

DEMO | DOWNLOAD

This awesome plugin is developed by mopcweb. Visit their official github repository for more information and follow for future updates.


Published by admin