baguettebox.js
v1.13.0
Simple and easy to use lightbox script written in pure JavaScript
4.9K/weekUpdated 3 months agoMITUnpacked: 90.8 KB
Published by feimosi
npm install baguettebox.jsbaguetteBox.js
Simple and easy to use lightbox script written in pure JavaScript.
Table of contents
* Features
* Installation
* Importing
* Usage
* Customization
* API
* Responsive images
* Compatibility
* Contributing
* Donation
* Credits
* License
Features
* 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 3.2KB gzipped
* With Accessibility in mind
Installation
You can use one of the following methods:
$3
``sh`
npm install baguettebox.js --save
$3
`
sh
yarn add baguettebox.js
`$3
sh
bower install baguettebox.js --save
`$3
1. Use one of the following CDN providers:
- https://cdnjs.com/libraries/baguettebox.js
- https://jsdelivr.com/projects/baguettebox.js3. Copy URLs of the latest version (both
and .css files)2. Paste the URLs in your HTML file:
`html
`$3
1. Download
and baguetteBox.min.js files from the dist folder.
2. Include them somewhere in your document:
`html
`$3
Add the following to your file (updating the version as required) and then run composer install or composer update:`json
{
"repositories": [
{
"type": "vcs",
"url": "https://github.com/feimosi/baguetteBox.js"
}
],
"require": {
"feimosi/baguettebox.js": "dev-main"
}
}
`Importing
$3
If you don't use JavaScript modules and include the file with a
`
Customization
You can pass an object with custom options as the second parameter.
js
baguetteBox.run('.gallery', {
// Custom options
});
`The following options are available:
| Option | Type | Default | Description |
| --- | --- | --- | --- |
|
| 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 |
| leftArrow \| rightArrow \| closeX | string | default icons | This allows to customize buttons with own icons |
| fullScreen | Boolean | false | Enable full screen mode |
| noScrollbars | Boolean | false | Hide scrollbars when gallery is displayed |
| bodyClass | String | 'baguetteBox-open' | Class name that will be appended to the body when lightbox is visible (works in IE 10+) |
| ignoreClass | String | null | It will ignore images with given class put on a tag |
| 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
| Background color for the lightbox overlay |
| filter | RegExp | /.+\.(gif\|jpe?g\|png\|webp)/i | Pattern to match image files. Applied to the a.href attribute |API
$3
Initialize baguetteBox.js
- @param
selector {string} - valid CSS selector used by querySelectorAll
- @param {object} - custom options (see #Customization)
- @return {array} - an array of gallery objects (reflects elements found by the selector)$3
Show (if hidden) and move the gallery to a specific index
- @param
index {number} - the position of the image
- @param gallery {array} - gallery which should be opened, if omitted assumes the currently opened one
- @return {boolean} - true on success or false if the index is invalidUsage:
`js
const gallery = baguetteBox.run('.gallery');
baguetteBox.show(index, gallery[0]);
`$3
Switch to the next image
- @return {boolean} - true on success or false if there are no more images to be loaded
$3
Switch to the previous image
- @return {boolean} - true on success or false if there are no more images to be loaded
$3
Hide the gallery
$3
Remove the plugin with any event bindings
Responsive images
To use this feature, simply put
attributes on a tags with a value being the 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 also used in the case of a screen larger than X.Here's an example of what the HTML code can look like:
`html
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">
`
If you have 1366x768 resolution baguetteBox.js will choose
. If, however, it's 1440x900 it'll choose "img/big/2-1.jpg". Keep the href attribute as a fallback (link to a bigger image e.g. of HD size) for older browsers.Compatibility
Desktop:
* IE 8+
* Chrome
* Firefox 3.6+
* Opera 12+
* Safari 5+
Mobile:
* Safari on iOS
* Chrome on Android
Contributing
Feel free to report any issues! If you wish to contribute by fixing a bug or implementing a new feature, please first read the CONTRIBUTING guide.
Donation
If you find this project useful and want to say thanks, you can buy me a cup of coffee :)
Credits
Creation of
baguetteBox.js` was inspired by a great jQuery plugin touchTouch.Huge thanks for providing a testing platform go to 
License
Copyright (c) 2018 feimosi
This content is released under the MIT License.