Repository files navigation

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

Demo page

• Features
• Installation
• Importing
• Usage
• Customization
• API
• Responsive images
• Compatibility
• Contributing
• Donation
• Credits
• License

• 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

You can use one of the following methods:

npm install baguettebox.js --save

yarn add baguettebox.js

bower install baguettebox.js --save

1. Use one of the following CDN providers:

• https://cdnjs.com/libraries/baguettebox.js
• https://jsdelivr.com/projects/baguettebox.js

3. Copy URLs of the latest version (both.js and.css files)

4. Paste the URLs in your HTML file:

<linkrel="stylesheet"href="<CSS URL>"><scriptsrc="<JS URL>"async></script>

1. DownloadbaguetteBox.min.css andbaguetteBox.min.js files from thedist folder.
2. Include them somewhere in your document:

<linkrel="stylesheet"href="css/baguetteBox.min.css"><scriptsrc="js/baguetteBox.min.js"async></script>

Add the following to yourcomposer.json file (updating the version as required) and then runcomposer install orcomposer update:

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

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

constbaguetteBox=require('baguettebox.js');

importbaguetteBoxfrom'baguettebox.js';

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

Initialize the script by running:

baguetteBox.run('.gallery');

where the first argument is a selector to a gallery (or galleries) containinga tags. The HTML code may look like this:

<divclass="gallery"><ahref="img/2-1.jpg"data-caption="Image caption"><imgsrc="img/thumbnails/2-1.jpg"alt="First image"></a><ahref="img/2-2.jpg"><imgsrc="img/thumbnails/2-2.jpg"alt="Second image"></a>    ...</div>

To use captions put atitle ordata-caption attribute on thea tag.

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

<script>window.addEventListener('load',function(){baguetteBox.run('.gallery');});</script>

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

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

The following options are available:

Initialize baguetteBox.js

• @paramselector {string} - valid CSS selector used byquerySelectorAll
• @paramuserOptions {object} - custom options (see#Customization)
• @return {array} - an array of gallery objects (reflects elements found by the selector)

Show (if hidden) and move the gallery to a specific index

• @paramindex {number} - the position of the image
• @paramgallery {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:

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

Switch to the next image

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

Switch to the previous image

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

Hide the gallery

Remove the plugin with any event bindings

To use this feature, simply putdata-at-{width} attributes ona 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 lastdata-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:

<ahref="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"><imgsrc="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 thehref attribute as a fallback (link to a bigger image e.g. of HD size) for older browsers.

Desktop:

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

Mobile:

• Safari on iOS
• Chrome on Android

Feel free to report any issues! If you wish to contribute by fixing a bug or implementing a new feature, please first read theCONTRIBUTING guide.

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

Creation ofbaguetteBox.js was inspired by a great jQuery plugintouchTouch.

Huge thanks for providing a testing platform go to

Copyright (c) 2018feimosi

This content is released under theMIT License.