PHPackages                             feimosi/baguettebox.js - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Image & Media](/categories/media)
4. /
5. feimosi/baguettebox.js

ActiveLibrary[Image & Media](/categories/media)

feimosi/baguettebox.js
======================

Simple and easy to use lightbox script

v1.13.0(7mo ago)2.5k0427[50 issues](https://github.com/feimosi/baguetteBox.js/issues)[7 PRs](https://github.com/feimosi/baguetteBox.js/pulls)MITJavaScript

Since Nov 9Pushed 3mo ago89 watchersCompare

[ Source](https://github.com/feimosi/baguetteBox.js)[ Packagist](https://packagist.org/packages/feimosi/baguettebox.js)[ Docs](https://github.com/feimosi/baguetteBox.js)[ RSS](/packages/feimosi-baguetteboxjs/feed)WikiDiscussions dev Synced today

READMEChangelog (10)DependenciesVersions (4)Used By (0)

baguetteBox.js
==============

[](#baguetteboxjs)

[![GitHub Release](https://camo.githubusercontent.com/1711ba22af2cf341fc006672a0809391c4cf72213a251abf5615e2817fec2a39/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f72656c656173652f6665696d6f73692f6261677565747465426f782e6a732e737667)](https://github.com/feimosi/baguetteBox.js/releases)[![MIT License](https://camo.githubusercontent.com/6696351b59c088848b5623b49b2f36429d1c08a7213fb879c8e75bb7fc9370a7/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f6c2f6261677565747465626f782e6a732e737667)](https://github.com/feimosi/baguetteBox.js/blob/dev/LICENSE)[![npm](https://camo.githubusercontent.com/fa1c01d42fad072d288d40a456542ca783fb9ac6de0a633a24c0ddbaf8347e3e/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f646d2f6261677565747465626f782e6a732e737667)](https://www.npmjs.com/package/baguettebox.js)[![Build Status](https://camo.githubusercontent.com/1883545fc975d5481ccf6122cf01e923055435a126c7be6672d31f70c811fa48/68747470733a2f2f7472617669732d63692e6f72672f6665696d6f73692f6261677565747465426f782e6a732e7376673f6272616e63683d6d6173746572)](https://travis-ci.org/feimosi/baguetteBox.js)[![Donate](https://camo.githubusercontent.com/604e3db9c8751116b3f765aad0353ec7ded655bbe8aaacbc38d8c4a6b784b3ed/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f446f6e6174652d50617950616c2d677265656e2e737667)](https://paypal.me/feimosi)[![Twitter](https://camo.githubusercontent.com/cb820a0ecc9645168e33b03925d7f14691262ddbaeaf66a0a91697803d0cba2d/68747470733a2f2f696d672e736869656c64732e696f2f747769747465722f75726c2f687474702f736869656c64732e696f2e7376673f7374796c653d736f6369616c)](https://twitter.com/intent/tweet?text=Check%20out%20baguetteBox.js%20-%20simple%20and%20easy%20to%20use%20lightbox%20script%20written%20in%20pure%20JavaScript%0Ahttps%3A%2F%2Fgithub.com%2Ffeimosi%2FbaguetteBox.js)[![Twitter Follow](https://camo.githubusercontent.com/19fc3dfe22335d7a60bbe5dc334bb0de7312fd0776c27aa9b1231e072fdebbb2/68747470733a2f2f696d672e736869656c64732e696f2f747769747465722f666f6c6c6f772f6665696d6f73692e7376673f7374796c653d736f6369616c266c6162656c3d466f6c6c6f77253230746865253230617574686f72)](https://twitter.com/feimosi)

Simple and easy to use lightbox script written in pure JavaScript.

[Demo page](https://feimosi.github.io/baguetteBox.js/)

[![Demo Page screenshot](https://camo.githubusercontent.com/12bb93649c51b0aaabcddcfd988f8876c544584f0012dcbebe2d7faf9edaff07/68747470733a2f2f692e696d6775722e636f6d2f474d6d6e7564302e6a7067)](https://camo.githubusercontent.com/12bb93649c51b0aaabcddcfd988f8876c544584f0012dcbebe2d7faf9edaff07/68747470733a2f2f692e696d6775722e636f6d2f474d6d6e7564302e6a7067)

Table of contents
-----------------

[](#table-of-contents)

- [Features](#features)
- [Installation](#installation)
- [Importing](#importing)
- [Usage](#usage)
- [Customization](#customization)
- [API](#api)
- [Responsive images](#responsive-images)
- [Compatibility](#compatibility)
- [Contributing](#contributing)
- [Donation](#donation)
- [Credits](#credits)
- [License](#license)

Features
--------

[](#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
------------

[](#installation)

You can use one of the following methods:

### npm

[](#npm)

```
npm install baguettebox.js --save
```

### Yarn

[](#yarn)

```
yarn add baguettebox.js
```

### Bower

[](#bower)

```
bower install baguettebox.js --save
```

### CDN

[](#cdn)

1. Use one of the following CDN providers:

-
-

3. Copy URLs of the latest version (both `.js` and `.css` files)
4. Paste the URLs in your HTML file:

```

```

### Manually

[](#manually)

1. Download `baguetteBox.min.css` and `baguetteBox.min.js` files from the `dist` folder.
2. Include them somewhere in your document:

```

```

### Composer

[](#composer)

Add the following to your `composer.json` file (updating the version as required) and then run `composer install` or `composer update`:

```
{
    "repositories": [
        {
            "type": "vcs",
            "url": "https://github.com/feimosi/baguetteBox.js"
        }
    ],
    "require": {
        "feimosi/baguettebox.js": "dev-main"
    }
}
```

Importing
---------

[](#importing)

### Traditional approach

[](#traditional-approach)

If you don't use JavaScript modules and include the file with a `` tag, you don't have to import anything explicitly. `baguetteBox` will be available in the global scope.

### CommonJS

[](#commonjs)

```
const baguetteBox = require('baguettebox.js');
```

### ES2015 modules

[](#es2015-modules)

```
import baguetteBox from 'baguettebox.js';
```

### Sass

[](#sass)

```
@import 'baguettebox.js/dist/baguetteBox.min.css';
```

Usage
-----

[](#usage)

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:

```

    ...

```

To use captions put a `title` or `data-caption` attribute on the `a` tag.

Note: if you import baguetteBox using the `` tag, remember to run it after the document has loaded:

```

window.addEventListener('load', function() {
  baguetteBox.run('.gallery');
});

```

Customization
-------------

[](#customization)

You can pass an object with custom options as the second parameter.

```
baguetteBox.run('.gallery', {
    // Custom options
});
```

The following options are available:

OptionTypeDefaultDescription`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`leftArrow` | `rightArrow` | `closeX``string`default iconsThis 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`
`(0,0,0,0.8)'`Background color for the lightbox overlay`filter``RegExp``/.+\.(gif|jpe?g|png|webp)/i`Pattern to match image files. Applied to the `a.href` attributeAPI
---

[](#api)

### `run(selector, userOptions)`

[](#runselector-useroptions)

Initialize baguetteBox.js

- @param `selector` {string} - valid CSS selector used by `querySelectorAll`
- @param `userOptions` {object} - custom options (see [\#Customization](#customization))
- @return {array} - an array of gallery objects (reflects elements found by the selector)

### `show(index, gallery)`

[](#showindex-gallery)

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 invalid

Usage:

```
const gallery = baguetteBox.run('.gallery');
baguetteBox.show(index, gallery[0]);
```

### `showNext`

[](#shownext)

Switch to the next image

- @return {boolean} - true on success or false if there are no more images to be loaded

### `showPrevious`

[](#showprevious)

Switch to the previous image

- @return {boolean} - true on success or false if there are no more images to be loaded

### `hide`

[](#hide)

Hide the gallery

### `destroy`

[](#destroy)

Remove the plugin with any event bindings

Responsive images
-----------------

[](#responsive-images)

To use this feature, simply put `data-at-{width}` 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:

```

```

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 the `href` attribute as a fallback (link to a bigger image e.g. of HD size) for older browsers.

Compatibility
-------------

[](#compatibility)

Desktop:

- IE 8+
- Chrome
- Firefox 3.6+
- Opera 12+
- Safari 5+

Mobile:

- Safari on iOS
- Chrome on Android

Contributing
------------

[](#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](./CONTRIBUTING.md) guide.

Donation
--------

[](#donation)

If you find this project useful and want to say thanks, you can buy me a cup of coffee :)

[![](https://camo.githubusercontent.com/e1ff554a09e8e92bef25abc553ff05b88f45afd695877cf12f3a46558ef65b2e/68747470733a2f2f7777772e70617970616c6f626a656374732e636f6d2f656e5f55532f692f62746e2f62746e5f646f6e61746543435f4c472e676966)](https://paypal.me/feimosi)

Credits
-------

[](#credits)

Creation of `baguetteBox.js` was inspired by a great jQuery plugin [touchTouch](https://github.com/martinaglv/touchTouch).

Huge thanks for providing a testing platform go to [![BrowserStack](https://camo.githubusercontent.com/c6b72d11aafe0ef1cef0e378b98eab66775701ac52028ca790ee0506a857f4b9/68747470733a2f2f692e696d6775722e636f6d2f726c56565a77472e706e67)](http://browserstack.com/)

License
-------

[](#license)

Copyright (c) 2018 [feimosi](https://github.com/feimosi/)

This content is released under the [MIT License](https://opensource.org/licenses/MIT).

###  Health Score

43

—

FairBetter than 89% of packages

Maintenance71

Regular maintenance activity

Popularity30

Limited adoption so far

Community35

Small or concentrated contributor base

Maturity37

Early-stage or recently created project

 Bus Factor1

Top contributor holds 83.2% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Unknown

Total

1

Last Release

236d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/a5f9015ebfb64196df94319816c10047a98bf8209b10c5ec38a8ca13c726cdc2?d=identicon)[ArnePeirs](/maintainers/ArnePeirs)

---

Top Contributors

[![feimosi](https://avatars.githubusercontent.com/u/5721520?v=4)](https://github.com/feimosi "feimosi (282 commits)")[![XhmikosR](https://avatars.githubusercontent.com/u/349621?v=4)](https://github.com/XhmikosR "XhmikosR (28 commits)")[![H-Lo](https://avatars.githubusercontent.com/u/16727070?v=4)](https://github.com/H-Lo "H-Lo (4 commits)")[![RomanHotsiy](https://avatars.githubusercontent.com/u/3975738?v=4)](https://github.com/RomanHotsiy "RomanHotsiy (3 commits)")[![louy](https://avatars.githubusercontent.com/u/349850?v=4)](https://github.com/louy "louy (3 commits)")[![leomelzer](https://avatars.githubusercontent.com/u/23313?v=4)](https://github.com/leomelzer "leomelzer (2 commits)")[![eiriksm](https://avatars.githubusercontent.com/u/865153?v=4)](https://github.com/eiriksm "eiriksm (1 commits)")[![gergo85](https://avatars.githubusercontent.com/u/2959112?v=4)](https://github.com/gergo85 "gergo85 (1 commits)")[![idokd](https://avatars.githubusercontent.com/u/6517166?v=4)](https://github.com/idokd "idokd (1 commits)")[![leibrug](https://avatars.githubusercontent.com/u/7648004?v=4)](https://github.com/leibrug "leibrug (1 commits)")[![LorenzCK](https://avatars.githubusercontent.com/u/1782445?v=4)](https://github.com/LorenzCK "LorenzCK (1 commits)")[![o-klp](https://avatars.githubusercontent.com/u/6556190?v=4)](https://github.com/o-klp "o-klp (1 commits)")[![rgalanakis](https://avatars.githubusercontent.com/u/1643233?v=4)](https://github.com/rgalanakis "rgalanakis (1 commits)")[![robistek](https://avatars.githubusercontent.com/u/16757355?v=4)](https://github.com/robistek "robistek (1 commits)")[![terrytilley](https://avatars.githubusercontent.com/u/6675913?v=4)](https://github.com/terrytilley "terrytilley (1 commits)")[![tobaco](https://avatars.githubusercontent.com/u/68937?v=4)](https://github.com/tobaco "tobaco (1 commits)")[![BartDelrue](https://avatars.githubusercontent.com/u/17899535?v=4)](https://github.com/BartDelrue "BartDelrue (1 commits)")[![zcraber](https://avatars.githubusercontent.com/u/61133303?v=4)](https://github.com/zcraber "zcraber (1 commits)")[![binarious](https://avatars.githubusercontent.com/u/200375?v=4)](https://github.com/binarious "binarious (1 commits)")[![Chi-teck](https://avatars.githubusercontent.com/u/673139?v=4)](https://github.com/Chi-teck "Chi-teck (1 commits)")

---

Tags

galleryjavascriptlightboxlightbox-scriptmodalpure-javascriptresponsivevanilla-javascriptjavascriptimagegallerylightbox

### Embed Badge

![Health badge](/badges/feimosi-baguetteboxjs/health.svg)

```
[![Health](https://phpackages.com/badges/feimosi-baguetteboxjs/health.svg)](https://phpackages.com/packages/feimosi-baguetteboxjs)
```

###  Alternatives

[nicolafranchini/venobox

Responsive JavaScript modal window plugin, touch swipe gallery

7117.1k](/packages/nicolafranchini-venobox)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)