Responsive touch image simple lightbox jQuery plugin is responsive, supple, flexible and mobile-friendly JavaScript plugin. This is touch-friendly image lightbox for desktop and mobile. It is supposed to helps you to create image lightbox and gallery lightbox on desktop and mobile sites.
Responsive touch image simple lightbox jQuery plugin is easy to install and easy to use and it works in every modern Browser even in IE 9+. You can use jQuery 1.x,2.x and 3.x but don’t need. Some CSS is counted in but style can be changed as per your desire.
This simple lightbox jQuery plugin helps you to swipe or slide gestures for next or previous image. Moreover, it comes with lots of useful options and features to make it more useful and user-friendly.
- Image preloading and loading spinner.
- Minimalistic and Responsive
- Touch friendly
- CSS3 powered animations
- Double-tap to zoom
- Keyboard / Touch swipe navigation
- Custom image aspect ratio
- Touch or double tap
- Preloading next and previous image
- Click or pinch to zoom
- Works as either JavaScript or jQuery plugin
- Android, iOS and Windows phone support
- CSS3 Transitions with fallback for older browsers
- Keyboard support
Install:
To install SimpleLightbox, do the following:
// YARN
yarn add simplelightbox
//Bower
bower install simplelightbox
//NPM
npm install simplelightboxLoad the simple-lightbox.min.css in the header and the simple-lightbox.min.js in the footer section of the web page.
Simple to Use jQuery Plugin to Animate SVG Paths<link href="dist/simple-lightbox.min.css" rel="stylesheet" />
<!-- As A Vanilla JavaScript Plugin -->
<script src="simple-lightbox.min.js"></script>
<!-- As A jQuery Plugin -->
<script src="jquery.min.js"></script>
<script src="simple-lightbox.jquery.min.js"></script>Insert all your images into a gallery container. The plugin will automatically generate captions from alt attribute of img tag. To group images, you just need to add the rel attribute to the links as follows:
<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>Call the plugin with default options to enable the lightbox.
$('.gallery a').on('open.simplelightbox', function () {
// do something…
});
$('.gallery a').on('error.simplelightbox', function (e) {
console.log(e); // some usefull information
});JavaScript Options
| Property | Default | Type | Description |
|---|---|---|---|
| sourceAttr | href | string | the attribute used for large images |
| overlay | true | bool | show an overlay or not |
| 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 availabled or not |
| captionSelector | ‘img’ | string | set the element where the caption is. Set it to “self” for the A-Tag itself |
| 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 | adds an additional class to the sl-caption |
| close | true | bool | show the close button or not |
| closeText | ‘×’ | string | text or html for the close button |
| swipeClose | true | bool | swipe up or down to close gallery |
| showCounter | true | bool | show current image index or not |
| fileExt | ‘png|jpg|jpeg|gif’ | regexp or false | list of fileextensions the plugin works with or false for disable the check |
| animationSpeed | 250 | int | how long takes the slide animation |
| animationSlide | true | bool | weather to slide in new photos or not, disable to fade |
| preloading | true | bool | allows preloading next und previous images |
| enableKeyboard | true | bool | allow keyboard arrow navigation and close with ESC key |
| loop | true | bool | enables looping through images |
| rel | false | mixed | group images by rel attribute of link with same selector. |
| docClose | true | bool | closes the lightbox when clicking outside |
| swipeTolerance | 50 | int | how much pixel you have to swipe, until next or previous image |
| className | ‘simple-lightbox’ | string | adds a class to the wrapper of the lightbox |
| widthRatio | 0.8 | float | Ratio of image width to screen width |
| heightRatio | 0.9 | float | Ratio of image height to screen height |
| scaleImageToRatio | false | bool | scales the image up to the defined ratio size |
| disableRightClick | false | bool | disable rightclick on image or not |
| disableScroll | true | bool | stop scrolling page if lightbox is opened |
| alertError | true | bool | show an alert, if image was not found. If false error will be ignored |
| alertErrorMessage | ‘Image not found, next image will be loaded’ | string | the message displayed if image was not found |
| additionalHtml | false | string | Additional HTML showing inside every image. Usefull for watermark etc. If false nothing is added |
| history | true | bool | enable history back closes lightbox instead of reloading the page |
| throttleInterval | 0 | int | time to wait between slides |
| doubleTapZoom | 2 | int | zoom level if double tapping on image |
| maxZoom | 10 | int | maximum zoom level on pinching |
| htmlClass | has-lightbox | string | adds class to html element if lightbox is open. If empty or false no class is set |
| rtl | false | bool | change direction to rigth-to-left |
Events
| Name | Description |
|---|---|
| show.simplelightbox | this event fires before the lightbox opens |
| shown.simplelightbox | this event fires after the lightbox was opened |
| close.simplelightbox | this event fires before the lightbox closes |
| closed.simplelightbox | this event fires after the lightbox was closed |
| change.simplelightbox | this event fires before image changes |
| changed.simplelightbox | this event fires after image was changed |
| next.simplelightbox | this event fires before next image arrives |
| nextDone.simplelightbox | this event fires after next image was arrived |
| prev.simplelightbox | this event fires before previous image arrives |
| prevDone.simplelightbox | this event fires after previous image was arrived |
| nextImageLoaded.simplelightbox | this event fires after next image was loaded (if preload activated) |
| prevImageLoaded.simplelightbox | this event fires after previous image was loaded (if preload activated) |
| error.simplelightbox | this event fires on image load error |
Examples
$('.gallery a').on('show.simplelightbox', function () {
// do something…
});
$('.gallery a').on('error.simplelightbox', function (e) {
console.log(e); // some usefull information
});Public Methods
| Name | Description |
|---|---|
| open | Opens the lightbox with an given Element |
| close | Closes current openend Lightbox |
| next | Go to next image |
| prev | Go to previous image |
| destroy | Destroys the instance of the lightbox |
| refresh | Destroys and reinitilized the lightbox, needed for eg. Ajax Calls, or after dom manipulations |
Example
var gallery = $('.gallery a').simpleLightbox();
gallery.next(); // Next ImageMultiple Lightboxes on one page
Multiple lightboxes can be used on one page and you can give them different choosers. Let me give an example so point can be cleared;
Page Preloading Effect with CSS Animationvar lightbox1 = $('.lighbox-1 a').simpleLightbox();
var lightbox2 = $('.lighbox-2 a').simpleLightbox();Customization
You can customize Simple lightbox by altering the style in simplelightbox.css.
If you are using SASS, you can customize Simple lightbox with the following variables
$sl-font-family: Arial, Baskerville, monospace;
$sl-overlay-background: #fff;
$sl-navigation-color: #000;
$sl-caption-color: #fff;
$sl-caption-background: #000;
$sl-overlay-opacity: 0.7;
$sl-counter-fontsize: 1rem;
$sl-caption-fontsize: 1rem;
$sl-close-fontsize: 3rem;
$sl-breakpoint-medium: 35.5em; // 568px, when 1rem == 16px
$sl-breakpoint-large: 50em; // 800px, when 1rem == 16px
$sl-arrow-fontsize-small: 2rem;
$sl-arrow-fontsize-medium: 3rem;
$sl-arrow-fontsize-large: 3rem;
$sl-img-border-small: 0 none;
$sl-img-border-medium: 0 none;
$sl-img-border-large: 0 none;
$sl-iframe-border-small: 0 none;
$sl-iframe-border-medium: 0 none;
$sl-iframe-border-large: 0 none;
$add-vendor-prefixes: true !default;File Information
| File Size | 5.53 MB |
| Last Update | 12 Days Ago |
| Date Published | 9 Months Ago |
| License | MIT |
