LGallery图片画廊轮播图幻灯片插件

Demo:

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

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

LGallery pure JavaScript gallery

Demo:

Usage:

Description:

Options:

Feature of responsiveness:

Data-lgparent

Demo:

Usage:

Description:

Options:

Data-lgslider

Demo:

Usage:

Description:

Options:

Data-lgpreview

Demo:

Usage:

Description:

Options:

Feature of responsiveness:

Data-lgcarusel

Demo 1:

Demo 2:

New good

New good

New good

Usage:

Description:

Options:

Feature of responsiveness:

Methods of LGallery