LGallery pure JavaScript gallery

Demo:

Witcher
Witcher
Witcher

Usage:

Add to any existing tag in your HTML data-lgallery and put in this data attribute some pictures separated by comma (,).

Example:

<div class=example data-lgallery="img/1.jpg,img/2.jpg, img/3.jpg"></div>

That’s all. Now after click on this div (example) you’ll open a gallery with these 3 pictures. Look at demo above or try it yourself :)

Description:

Not classic gallery. It is more like hidden gallery, when clicking on 1 small element you can open a huge hidden gallery.

To customize you can use data-attributes just in your HTML or function setLG(type, options), where type is ‘lgallery’, options is an object with your options.

(All data-attributes are more powerful then their equivalents in options object. It means that if you specified some options within object and also add some data-attributes, script will apply data-attribute value)

It’s also should be mentioned that all data attributes you used to customize each gallery will be deleted after initializing gallery so your HTML will not be contaminated

Options:

Option Data-attribute (Ex.: data-lgwidth) Type of value Default Description
width lgwidth value in px (500px) auto Customize image width. Alternatively you can use CSS for class LGallerySlider-Slide
height lgheight value in px (500px) auto Customize image height. Alternatively you can use CSS for class LGallerySlider-Slide
noscale lgnoscale true/false false For data attribute: true - remove scale effect while changing slides, if no value - will apply scale effect
render lgrender true/false false By default gallery will be rendered just after first opening of it (not initializing, but opening not to waste traffic). This option will enable rendering gallery after each click on parent element. For data-attribute usage is the same as fo lgnoscale
openbtn lgopenbtn true true/false Same usage as lgnoscale. To open gallery only by clicking the open button. By default gallery is opened by clicking parent element
noopenbtn lgnoopenbtn true/false false Same usage as lgnoscale. To hide/show the open button. By default is to show
- lghover value in ms (500 300 This option should be used, if you have any transform effect on hovering your parent element, to prevent a conflict with lgallery.min.js. Value is time of cancelling you animation hover effect
nobtns lgnobtns true/false false Same usage as lgnoscale. Use it to disable animation of scaling while clicking on next/prev slide buttons
atime lgatime value is seconds (1s) 1s Specifies animation time for changing slides. The modifier for scale is 1, for opacity is 0.7. Example: your option is 3s will apply transition: opacity 2.1s transform 3s
autoplay lgautoplay value in ms (5000) 3000 Specifies time in milliseconds for autochanging slides
alt lgalt string of data (alt1, alt2, alt3, …) - Specifies alt attributes for your pictures. Data separated by comma (,), just as for main pictures
title lgtitle string - Same as alt options, just for Specifiesing title attribute
mobilesrc lgmobilesrc string (768px, img/1.jpg, img/2.jpg, …) - Specifies pictures for mobile devices. First item in string must specify the max-width of device, for example 768px. Others should be your images
tabletsrc lgtabletsrc string - Same usage as mobilesrc options. Here you can specify another max-width value (1024px for example). This value should be larger than first argument in mobilesrc
label lglabel string - Specifies label/captions for pictures in your gallery. Words or phrases separated by comma (,). If you want to skip label for some picture just put nothing among commas (Example: label 1,label 2,,label 4
description lgdescription string - Specify descriptions for pictures in your gallery. Description will be under label (if it is). Same usage as for label. You can use description without specifying label for picture or vice versa



Also you can customize all CSS using your own styles, if you need more flexibility :)

Feature of responsiveness:

By default the maximum size if slider for lgallery & lgparent is 95%.

If device width will be < 769px - this size will be 100% (Fullscreen).

You can change it with CSS.

Data-lgparent

Demo:

Cool
Awesome
Wonderful
Amazing
Simple

Usage:

Add to any existing tag in your HTML data-lgparent without any info. Just data-lgparent.

You can have any HTML structure in this element. Script will find all images and make gallery using them. Then you can open gallery by clicking on each of them (images).

Example (just as in the demo above): 

<div class=example data-lgparent">
  <div>
    <img src="img/13.jpg" />
    <span>Cool</span>
  </div>
  <div>
    <img src="img/3.jpg" />
    <span>Awesome</span>
  </div>
  <div>
    <img src="img/11.jpg" />
    <span>Wonderful</span>
  </div>
  <div>
    <img src="img/5.jpg" />
    <span>Amazing</span>
  </div>
  <div>
    <img src="img/10.jpg" />
    <span>Simple</span>
  </div>
</div>

Description:

A classic gallery.

You can also specify alt and title attributes just here in IMG tags, they will be used is gallery in such case.

Options:

Everything just as for lgallery excluding openbtn (lgopenbtn), noopenbtn (lgnoopenbtn) and lghover options.

Also you can customize all CSS using your own styles.

Data-lgslider

Demo:

Usage:

Add to any existing tag in your HTML data-lgslider and put in this data attribute some pictures separated by comma (,).

Example:

<div class=example data-lgslider="img/1.jpg,img/2.jpg, img/3.jpg"></div>

Description:

Classic slider

The difference from previous types is that you shouldn’t initialize (first initialization happens after opening gallery for the first time) it.

Just add data-attribute and reload your page, there will be a new slider.

To customize width/height/positioning options just apply them for parent element using CSS.

Options:

Option Data-attribute (Ex.: data-lgwidth) Type of value Default Description
nobtns lgnobtns true/false false Same usage as lgnoscale. Use it to disable animation of scaling while clicking on next/prev slide buttons
atime lgatime value is seconds (1s) 1s Specifies animation time for changing slides. The modifier for scale is 1, for opacity is 0.7. Example: your option is 3s will apply transition: opacity 2.1s transform 3s
autoplay lgautoplay value in ms (5000) 3000 Specifies time in milliseconds for autochanging slides
alt lgalt string of data (alt1, alt2, alt3, …) - Specifies alt attributes for your pictures. Data separated by comma (,), just as for main pictures
title lgtitle string - Same as alt options, just for Specifiesing title attribute
mobilesrc lgmobilesrc string (768px, img/1.jpg, img/2.jpg, …) - Specifies pictures for mobile devices. First item in string must specify the max-width of device, for example 768px. Others should be your images
tabletsrc lgtabletsrc string - Same usage as mobilesrc options. Here you can specify another max-width value (1024px for example). This value should be larger than first argument in mobilesrc
label lglabel string - Specifies label/captions for pictures in your gallery. Words or phrases separated by comma (,). If you want to skip label for some picture just put nothing among commas (Example: label 1,label 2,,label 4
description lgdescription string - Specify descriptions for pictures in your gallery. Description will be under label (if it is). Same usage as for label. You can use description without specifying label for picture or vice versa

Data-lgpreview

Demo:

Usage:

Add to any existing tag in your HTML data-lgpreview and put in this data attribute some pictures separated by comma (,).

Example:

<div class=example data-lgpreview="img/1.jpg,img/2.jpg, img/3.jpg"></div>

Description:

Slider with thumbs for preview (non-loop).

Differences from first 2 types just as in data-lgslider, but with some new features.

To customize width/height/positioning options just apply them for parent element using CSS.

Options:

Same as lg-slider but without autoplay (data-lgautoplay) options. lg-preview is non-loop, so there is no need in autoplaying slides.

And some new options:

Option Data-attribute (Ex.: data-lgwidth) Type of value Default Description
thumbcontainer lgthumbcontainer value in px (200px) or % (100%) 450px Specifies width of thumbs block
thumbwidth lgthumbwidth value in px (200px) 50px Specifies width of each thumb
thumbheight lgthumbheight value in px (200px) 50px Specifies height thumbs block, and thus of each thumb
thumbsoffset lgthumbsoffset value in px (5px) 0px Specifies offset of thumbs block out of slider block
thumbmargin lgthumbmargin value in px (5px) 0px Specifies margin between thumbs



For this options you should better not use your own css styles.

Feature of responsiveness:

For responsiveness the script will automatically change some options on tablets and mobiles, specifically:

device viewport width < 769px:

- maximum thumbheight will be 100px or less
- if your thumbWidth > 150px, script will change it to 1/4 of parent’s block width

device viewport width < 415px:

- maximum thumbheight will be 80px or less
- if your thumbWidth > 150px, script will change it to 1/3 of parent’s block width

Data-lgcarusel

Demo 1:

Demo 2:

New good

Some tetx about this new awesome good specially for you

New good

Some tetx about this new awesome good specially for you

New good

Some tetx about this new awesome good specially for you

Usage:

First (Standard) modification. Primarily designed to use for galleries/sliders.

Add to any existing tag in your HTML data-lgcarusel and put in this data attribute some pictures separated by comma (,).

Example:

<div class=example data-lgcarusel="img/1.jpg,img/2.jpg, img/3.jpg"></div>
Second modification. Primarily designed to use for bunches of info - products/services for example.

Add to any existing tag in your HTML data-lgcarusel without any info. Make every HTML in this block, you need.

Example (just as in the demo 2 above): 

<div data-carusel>
  <div class="good">
    <img src="img/1.jpg" />
    <h3>New good 1</h3>
    <p>
      Some text about this new awesome good
    </p>
    <button>Click to buy</button>
  </div>
  <div class="good">
    <img src="img/2.jpg" />
    <h3>New good 2</h3>
    <p>
      Some text about this new awesome good
    </p>
    <button>Click to buy</button>
  </div>
  <div class="good">
    <img src="img/3.jpg" />
    <h3>New good 3</h3>
    <p>
      Some text about this new awesome good
    </p>
    <button>Click to buy</button>
  </div>
</div>

Description:

The difference from first 2 types is that you shouldn’t initialize it. Just add data-attribute and reload your page, there will be a new carusel slider.

To customize width/height/positioning options just apply them for parent element using CSS.

Options:

Same as lg-slider but without atime (data-atime) options.You can specify animation time and timing function through css using class LGCarusel-SliderInner.

Here if autoplay is enabled and your mouse is over carusel it wiil stop. If your mouse is out of carusel - it will go on.

And some new options:

Option Data-attribute (Ex.: data-lgwidth) Type of value Default Description
showslides lgshowslides number (2) 2 Specifies amount of pictures to show in 1 viewport (slide)
slidesperclick lgslidesperclick number (2) 1 Specifies amount of pictures to be changed on 1 click.
width lgwidth value in px (500px) 500px Specifies width of each picture in slider
margin lgmargin value in px (5px) 0px Specifies margin between pictures



For example:

You can specify 10 slides to show in 1 visible area and slide 1 per click, 2 per click, 5 per click or 10 per click.
If you make a mistake script would find a nearest correct value)
The amount of maximum slides should be a multiple of this value.
(For example, if you have 10 slides, the slidesperclick value can be 1,2,5 or 10)

For this options you should better not use your own css styles.

Feature of responsiveness:

For responsiveness the script will automatically change some options on tablets and mobiles, specifically:

768 < device viewport width < 1171:

- if your showslides more than 4 it would be 4
- slidesperclick = showslides or unless
- margin between pictures will be your margin / 1.68

450 < device viewport width < 769:

- showslides = 2 or less
- slideperclick = 2 or less
- margin between pictures will be your margin / 3

device viewport width < 450

- showslides & slideperclick = 1
- margin between pictures will be your margin / 4

Methods of LGallery

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

That’s all for now. Hope you’ll find this library useful.

Thanks for attention.

If you’ll find some bugs, please send me a report so i could look through it and fix.

Also if you have some useful ideas & propositions of how to expand the functionality - you are welcome too :)

© 2018 LGallery