A classic jQuery Lightbox effect, jquerylightbox

A classic jQuery Lightbox effect, jquerylightbox

A lightbox effect Image Display plug-in.

• Version:
• JQuery v1.2.3 +

• JQuery Lightbox v2.7.1

• Github

Instance Preview

How to load a CSS file

1. <Link rel = "stylesheet" href = "lightbox.css">

Copy and load JavaScript files

1. <script src="jquery.js"></script> 
2. <script src="lightbox.js"></script> 

Copy the DOM Structure

1. <A href = "image-1.jpg" data-lightbox = "image-1" data-title = "text description"> Image #1 </a>
2.  
3. <! -- If it is a group of related images, you can set the data-lightbox attribute to the same value for this group of images. -->
4. <a href="img/image-2.jpg" data-lightbox="group">Image #2</a> 
5. <a href="img/image-3.jpg" data-lightbox="group">Image #3</a> 
6. <a href="img/image-4.jpg" data-lightbox="group">Image #4</a> 

Copy

After the preceding content is set, Lightbox is automatically called.

Instructions for use

Support labels

Name	Description
<A>	Link
<Area>	Image ing area

Attribute options

Name	Description
Rel	When the value starts with "lightbox", it indicates that Lightbox needs to be used for display.
Data-lightbox	When setting any value, it indicates that Lightbox display is required.
Title	Title or description text displayed during Lightbox display
Data-title
Href	The image displayed when Lightbox is displayed.

Parameter description

Note: currently, apart from modifying the source code, you cannot modify the parameters during the call (because they are automatically called and the parameters are not exposed to the outside). We hope that this function will be improved in the future.

Name	Default Value	Description
FadeDuration	500	Transparent effect transition time (MS)
FitImagesInViewport	True	Automatically adjust the image size according to the window size
ResizeDuration	700	Size Change effect transition time
PositionFromTop	50	Distance from the top (px)
ShowImageNumberLabel	True	Display page number labels
AlwaysShowNavOnTouchDevices	False	Always display the top and bottom buttons on the touch device
WrapAround	False	Show up and down buttons continuously

 

Download