Simple and easy to use lightbox script.
- Written in pure JavaScript, no dependencies required
- Multiple-gallery support, allows custom options for each
- Supports swipe gestures on touch-screen devices
- Full screen mode available
- Modern and minimal look
- Image captions support
- Responsive images
- CSS3 transitions
- SVG buttons, no extra files to download
- Around 2.7KB gzipped
npm install baguettebox.js
bower install baguettebox.js
- Download
baguetteBox.min.css
andbaguetteBox.min.js
files fromdist
folder. - Include them somewhere in your document:
<link rel="stylesheet" href="css/baguetteBox.min.css">
<script src="js/baguetteBox.min.js" async></script>
Initialize the script by running:
baguetteBox.run('.gallery');
where the first argument is a selector to a gallery (or galleries) containing a
tags. The HTML code may look like this:
<div class="gallery">
<a href="img/2-1.jpg" data-caption="Image caption"><img src="img/thumbs/2-1.jpg"></a>
<a href="img/2-2.jpg"><img src="img/thumbs/2-2.jpg"></a>
...
</div>
To use captions put title
or data-caption
attribute on a
tag.
You can pass an object with custom options as a second parameter.
baguetteBox.run('.gallery', {
// Custom options
});
The following options are available:
Option | Type | Default | Description |
---|---|---|---|
captions |
Boolean | function(element) |
true |
Display image captions. Passing a function will use a string returned by this callback. The only argument is a element containing the image. Invoked in the context of the current gallery array |
buttons |
Boolean | 'auto' |
'auto' |
Display buttons. 'auto' hides buttons on touch-enabled devices or when only one image is available |
fullScreen |
Boolean |
false |
Enable full screen mode |
noScrollbars |
Boolean |
false |
Hide scrollbars when gallery is displayed |
titleTag |
Boolean |
false |
Use caption value also in the gallery img.title attribute |
async |
Boolean |
false |
Load files asynchronously |
preload |
Number |
2 |
How many files should be preloaded |
animation |
'slideIn' | 'fadeIn' | false |
'slideIn' |
Animation type |
afterShow |
function |
null |
Callback to be run after showing the overlay |
afterHide |
function |
null |
Callback to be run after hiding the overlay |
onChange |
function(currentIndex, imagesCount) |
null |
Callback to be run when image changes |
overlayBackgroundColor |
String |
'rgba (0,0,0,.8)' |
Background color for the lightbox overlay |
filter |
RegExp |
`/.+.(gif | jpe?g |
run
- initialize baguetteBox.jsshowNext
- switch to the next imageshowPrevious
- switch to the previous imagedestroy
- remove the plugin with any event bindingsshowGallery
- show the gallery with the given id (returned fromrun
)
The first two methods return true on success or false if there's no more images to be loaded.
To use this feature, simply put data-at-{width}
attributes on a
tags with value being a path to the desired image. {width}
should be the maximum screen width the image can be displayed at. The script chooses the first image with {width}
greater than or equal to the current screen width for best user experience.
That last data-at-X
image is used also in the case of a screen larger than X.
Here's an example of what the HTML code can look like:
<a href="img/2-1.jpg"
data-at-450="img/thumbs/2-1.jpg"
data-at-800="img/small/2-1.jpg"
data-at-1366="img/medium/2-1.jpg"
data-at-1920="img/big/2-1.jpg">
<img src="img/thumbs/2-1.jpg">
</a>
If you have 1366x768 resolution baguetteBox.js will choose "img/medium/2-1.jpg"
. If, however, it's 1440x900 it'll choose "img/big/2-1.jpg"
. Keep href
attribute as a fallback (link to a bigger image e.g. of HD size) for older browsers.
- IE 8+
- Chrome
- Firefox 3.6+
- Opera 12+
- Safari 5+
Feel free to report any issues!
Creation of baguetteBox.js
was inspired by a great jQuery plugin touchTouch.
Copyright (c) 2016 feimosi
This content is released under the MIT License.