simplelightbox

Touch-friendly image lightbox for mobile and desktop

Features

• Responsive
• Touch friendly
• Swipe gestures for next/previous image
• Easy to install, easy to use
• Minimalistic
• Only some css is included. You can change the style like you want!
• Lots of options
• Preloading next and previous image
• Android, iOs and Windows phone support
• CSS3 Transitions with fallback for older browsers
• Works in every modern Browser, even in IE 11
• Can use jQuery 1.x, 2.x and 3.x. This is not required.
• Keyboard support
• Pinch to zoom
• Double-tap to zoom

Install

// YARN
yarn add simplelightbox

// Bower
bower install simplelightbox

// NPM
npm install simplelightbox

After that include simple-lightbox(.min).css and simple-lightbox(.min).js to your page.

Usage

Standalone Plugin

When using the standalone variant (simple-lightbox(.min).js)

new SimpleLightbox('.some-element a', { /* options */ });

The jQuery-compatible (simple-lightbox.jquery(.min).js) variant works as before (v1.x):

$('.some-element a').simpleLightbox({ /* options */ });

With Webpack/Browserify/Parcel etc...

Choose the module file you want to import or require.

Module with Babel transformation

import SimpleLightbox from "simplelightbox";

Plain ES Module without Babel

import SimpleLightbox from "simplelightbox/dist/simple-lightbox.esm"

Markup

For the default setup, you just need links that are pointing to images.

<div class="gallery">
    <a href="images/image1.jpg"><img src="images/thumbs/thumb1.jpg" alt="" title=""></a>
    <a href="images/image2.jpg"><img src="images/thumbs/thumb2.jpg" alt="" title="Beautiful Image"></a>
</div>

The markup inside the A-Tags can be whatever you want. In this example thumbnails of the big images. The 'title' tag is used by default to show a caption. For a complete example just look at the demo folder.

JavaScript Options

| Property | Default | Type | Description | |--------------------|----------------------------------------------|--------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | sourceAttr | href | string | The attribute used for large images | | overlay | true | bool | Show an overlay or not | | overlayOpacity | 0.7 | float | the opacity of the overlay | | spinner | true | bool | Show spinner or not | | nav | true | bool | Show arrow-navigation or not | | navText | ['←','→'] | array | Text or html for the navigation arrows | | captions | true | bool | Show captions if available or not | | captionSelector | 'img' | string or function | Set the element where the caption is. Set it to "self" for the A-Tag itself or use a callback which returns the element | | captionType | 'attr' | string | How to get the caption. You can choose between attr, data or text | | captionsData | 'title' | string | Get the caption from given attribute | | captionPosition | 'bottom' | string | The position of the caption. Options are top, bottom or outside (note that outside can be outside the visible viewport!) | | captionDelay | 0 | int | Adds a delay before the caption shows (in ms) | | captionClass | '' | string | Add an additional class to the sl-caption | | captionHTML | true | bool | Whether or not to allow HTML in captions, defaults to true for legacy reasons | | close | true | bool | Show the close button or not | | closeText | '×' | string | Text or html for the close button