:zap: Simple and easy to use lightbox script written in pure JavaScript

Overview

baguetteBox.js

GitHub Release MIT License dependency Status devDependency Status npm Build Status

Donate Twitter Twitter Follow

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

Demo page

Demo Page screenshot

Table of contents

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:

npm

npm install baguettebox.js --save

Yarn

yarn add baguettebox.js

Bower

bower install baguettebox.js --save

CDN

  1. Use one of the following CDN providers:
  1. Copy URLs of the latest version (both .js and .css files)

  2. Paste the URLs in your HTML file:

<link rel="stylesheet" href="<CSS URL>">
<script src="<JS URL>" async></script>

Manually

  1. Download baguetteBox.min.css and baguetteBox.min.js files from the dist folder.
  2. Include them somewhere in your document:
<link rel="stylesheet" href="css/baguetteBox.min.css">
<script src="js/baguetteBox.min.js" async></script>

Importing

Traditional approach

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.

CommonJS

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

ES2015 modules

import baguetteBox from 'baguettebox.js';

Sass

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

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:

<div class="gallery">
    <a href="img/2-1.jpg" data-caption="Image caption">
        <img src="img/thumbnails/2-1.jpg" alt="First image">
    </a>
    <a href="img/2-2.jpg">
        <img src="img/thumbnails/2-2.jpg" alt="Second image">
    </a>
    ...
</div>

To use captions put a title or data-caption attribute on the a 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>

Customization

You can pass an object with custom options as the 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
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 attribute

API

run(selector, userOptions)

Initialize baguetteBox.js

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

show(index, 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

Switch to the next image

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

showPrevious

Switch to the previous image

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

hide

Hide the gallery

destroy

Remove the plugin with any event bindings

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:

<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 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 BrowserStack

License

Copyright (c) 2018 feimosi

This content is released under the MIT License.

Comments
  • Make the `buttons` accessible.

    Make the `buttons` accessible.

    Also switch to &times; instead of a simple X for the fallback close button.

    Tested things with https://github.com/squizlabs/HTML_CodeSniffer, but I think we hit https://github.com/squizlabs/HTML_CodeSniffer/issues/160 for the remaining ones.

    opened by XhmikosR 43
  • Enable zooming of images on mobile devices

    Enable zooming of images on mobile devices

    when the image is opened in the popup screen, zooming is disabled or almost unusable. since the mobile width is short so if u could add zooming enhancement, it would be a great experience for user to zoom in the opened image. thanks

    bug 
    opened by ahmednooor 33
  • Getting gallery to loop back to beginning on last image

    Getting gallery to loop back to beginning on last image

    Hi there,

    I would like to return the slide back to the first gallery image.

    Currently, when you get to the last image, the user gets 'stuck'.

    Please provide support on how to fix this?

    feature 2.0 
    opened by jimcallender 32
  • Prev/Next buttons not showing in Chrome

    Prev/Next buttons not showing in Chrome

    Chrome Version 51.0.2704.106

    Previous and next buttons are not showing on demo site gallery example though close button does display. Seems fine in other browsers.

    bug 
    opened by devtrends 20
  • Possible code interaction?

    Possible code interaction? "Uncaught RangeError: Maximum call"

    Hi, I'm having fun with baguetteBox and trying to get it to work inside of NodeBB (a Node.js based forum). I'm running into "Uncaught RangeError: Maximum call" in Chrome after a baguetteBox gallery is presented after a click. The error happens on the click that brings up the gallery.

    The errors are extensive (and seem to be related to a focus event getting retriggered), but these lines seem to keep looping by in Chrome: d @ baguetteBox.min.js?484233c5-6926-4ccd-b895-7bd20b1f99ac:7 ne @ baguetteBox.min.js?484233c5-6926-4ccd-b895-7bd20b1f99ac:7 trigger @ nodebb.min.js?484233c5-6926-4ccd-b895-7bd20b1f99ac:5324

    I'll keep trying to figure this out, as I think it is likely an interaction with other libraries, but has anyone seen any interaction problems like this between baguetteBox and other libraries?

    bug 
    opened by jongarrison 17
  • Add Travis CI, refactor gulp tasks

    Add Travis CI, refactor gulp tasks

    @feimosi: do not merge this yet, we need to decide which node.js version to run tests on.

    In order to see this in action please add Travis CI to this repository.

    opened by XhmikosR 15
  • manual/cdn including not working

    manual/cdn including not working

    I have tried both manual/cdn including css/js in my html but I do not get gallery. I have 3 images showing up from top to bottom.

    The code looks like this: I also tried putting both css and js within tag, right before the function call.

    <head>
    ...
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.9.0/baguetteBox.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.9.0/baguetteBox.min.css">
    </head>
    
    <body>
    ...
    baguetteBox.run('.gallery');
                                                                                                                           
    <!-- testing gallery -->
    <div class="gallery">
        <a href="img1.jpg" data-caption="Image caption">
                <img src="img1.jpg" alt="First image">
                    </a>
        <a href="img2.jpg" data-caption="Image caption">
                <img src="img1.jpg" alt="First image">
                    </a>
       <a href="img3.jpg" data-caption="Image caption">
                <img src="img1.jpg" alt="First image">
                    </a>
    </div>
    
    ...
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.9.0/baguetteBox.js"        async></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.9.0/baguetteBox.min.js"    async></script>
    </body>
    

    The result looks like this: apparently the function call is not treated like a function... image

    I am using Hexo:3.39 Theme: hexo-next hexo-cli: 1.0.3 markdown parser: marked

    opened by cutelittleturtle 14
  • On Screen Left/Right Nav Arrows Missing in Chrome

    On Screen Left/Right Nav Arrows Missing in Chrome

    The onscreen left/right arrows are missing in Chrome. The left/right arrow buttons do work.

    To repro:

    1. Open Chrome and navigate to the bagueeteBox demo site.
    2. Open one of the demos

    Also fails in Firefox.

    Nav arrows appear in IE and Edge.

    opened by mike-ward 13
  • Accessibility improvements

    Accessibility improvements

    Added

    • Accessibility improvement: use of roles and other wai-aria attributes
    • Accessibility improvement: focus management when baguetteBox popup is open

    References and acknowledgments in code

    Closes https://github.com/feimosi/baguetteBox.js/issues/98

    opened by 2aces 13
  • Page jump when the first image is opened

    Page jump when the first image is opened

    Since a video is better than words, attached is a demonstration.

    https://dl.dropboxusercontent.com/u/3607425/2016-03-29_18-16-45.mp4

    My browser is Firefox 46.0b5 on Windows x64 but I see the same with Microsoft Edge.

    Settings:

    baguetteBox.run(selector, {
        async: false,
        buttons: "auto",
        noScrollbars: true
    });
    

    The code if you cannot reproduce this is in this branch here https://github.com/mpc-hc/mpc-hc.org/compare/baguetteBox.js

    bug 
    opened by XhmikosR 13
  • Fix IE regression

    Fix IE regression

    @feimosi: things still break on IE8 due to overlayBackgroundColor: 'rgba(0,0,0,.8)' since IE8 doesn't support it. This is an old issue, not a regression.

    How do you want to solve this?

    opened by XhmikosR 12
  • Doesn't work on Android devices anymore

    Doesn't work on Android devices anymore

    Unfortunately this script doesn't appear to work anymore on Android devices. I've had reports from people on Android phones that they aren't able to swipe left or right to move to next image, and don't see any captions under the image anymore.

    opened by MontyHu 0
  • Allow other elements than <a> to trigger the overlay

    Allow other elements than to trigger the overlay

    I would like to trigger the overlay from different elements and with attributes other than just href. For example, I'd like to open the overlay with this button: <button data-src="my-image.jpg">Show Overlay</button>.

    I think this could be achieved without much code and without BC breaks by adding two configuration options triggerSelector and srcAttribute which would default to a and href, respectively.

    opened by c0necto 0
  • Support for <picture> based alternative file formats

    Support for based alternative file formats

    It would be nice to support alternative image formats, e.g. webp for modern browers as alternative to jpeg. I'm willing to look into the implementation, but it would be nice to agree on the format first.

    Option 1: additional options to specify alternative formats. Option 2: allow multiple white-space separated URLs in the data-at-$width fields and compute the file type based on the extension.

    I think the second option is easier to use and would be my preference.

    opened by jsonn 0
  • TypeError: undefined is not an object – gallery.length on undefined in show() function

    TypeError: undefined is not an object – gallery.length on undefined in show() function

    Currently the show() function looks like this:

        /**
         * 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
         */
        function show(index, gallery) {
            if (!isOverlayVisible && index >= 0 && index < gallery.length) {
                prepareOverlay(gallery, options);
                showOverlay(index);
                return true;        
    

    The comment says that the gallery argument can be omitted. Still, the condition takes gallery.length, which is a TypeError if gallery==undefined. The other show...() functions (from line 603 to 627) all use show() with one argument only.

    opened by czirkoszoltan 1
Releases(v1.11.1)
Owner
Marek Grzybek
JavaScript all the things! Passionate Software Developer, learning something new every day.
Marek Grzybek
jQuery lightbox script for displaying images, videos and more. Touch enabled, responsive and fully customizable.

fancyBox jQuery lightbox script for displaying images, videos and more. Touch enabled, responsive and fully customizable. See the project page for doc

Jānis Skarnelis 7.2k Nov 19, 2022
Light and responsive lightbox script with focus on performance.

Magnific Popup Repository Fast, light and responsive lightbox plugin, for jQuery and Zepto.js. Documentation and getting started guide. Examples and p

Dmitry Semenov 11.3k Nov 23, 2022
THE original Lightbox script (v2).

Lightbox2 The original lightbox script. Lightbox is small javascript library used to overlay images on top of the current page. It's a snap to setup a

Lokesh Dhakar 5.7k Nov 25, 2022
Touch-friendly image lightbox for mobile and desktop

Touch-friendly image lightbox for mobile and desktop

Andre Rinas 924 Nov 25, 2022
A light-weight, customizable lightbox plugin for jQuery

About Colorbox: A customizable lightbox plugin for jQuery. See the project page for documentation and a demonstration, and the FAQ for solutions and e

Jack Moore 4.8k Nov 20, 2022
A touchable jQuery lightbox

Swipebox A touchable jQuery lightbox. View project page What is Swipebox ? Swipebox is a jQuery "lightbox" plugin for desktop, mobile and tablet. Feat

null 2k Nov 16, 2022
A customizable, modular, responsive, lightbox gallery plugin.

lightGallery A customizable, modular, responsive, lightbox gallery plugin for jQuery. Demo JQuery lightGallery demo. Codepen demo Main features Fully

Sachin N 5.5k Nov 24, 2022
A modal built with pure CSS, enhanced with JavaScript

CSS Modals Modals built out of pure CSS Please visit the website to read more about this project and refer to the FAQ in case of a question. What is i

Hans Christian Reinl 1.8k Nov 17, 2022
Simple to use modal / alert / dialog / popup. Created with vanilla JS. No javascript knowledge required! Works on every browser and device! IE9

EinsModal The last modal / alert / dialog you will ever need! Full Documentation: https://www.einscms.com/modal EinsModal is the best solution to inte

EinsCMS 30 Oct 20, 2022
A simple vanilla and lightweight modal which is easy to expand

A simple vanilla and lightweight modal which is easy to expand

null 1 Jul 3, 2022
A modern dialog library which is highly configurable and easy to style. #hubspot-open-source

vex Demo Documentation vex is a modern dialog library which is highly configurable, easily stylable, and gets out of the way. You'll love vex because

HubSpot 6.9k Nov 22, 2022
jBox is a jQuery plugin that makes it easy to create customizable tooltips, modal windows, image galleries and more.

jBox jBox is a jQuery plugin that makes it easy to create customizable tooltips, modal windows, image galleries and more. Demo: https://stephanwagner.

Stephan Wagner 1.4k Nov 20, 2022
A modern dialog library which is highly configurable and easy to style. #hubspot-open-source

vex Demo Documentation vex is a modern dialog library which is highly configurable, easily stylable, and gets out of the way. You'll love vex because

HubSpot 6.9k Apr 1, 2021
A beautiful replacement for JavaScript's "alert"

A beautiful replacement for JavaScript's "alert" Installation $ npm install --save sweetalert Usage import swal from 'sweetalert'; swal("Hello world!

Tristan Edwards 22.1k Nov 14, 2022
Extends the default Bootstrap Modal class. Responsive, stackable, ajax and more.

Note: Since this plugin was created to solve a lot of the issues with BS2, it still uses the BS2 markup syntax. Currently I believe the default BS3 mo

Jordan Schroter 5k Nov 18, 2022
Elegant, responsive, flexible and lightweight modal plugin with jQuery.

iziModal Elegant, responsive, flexible and lightweight modal plugin with jQuery. izimodal.marcelodolza.com Fast Responsive Animated Lightweight Custom

Marcelo Dolza 2.1k Nov 9, 2022
:zap: RAN! React . GraphQL . Next.js Toolkit :zap: - SEO-Ready, Production-Ready, SSR, Hot-Reload, CSS-in-JS, Caching, CLI commands and more...

RAN : React . GraphQL . Next.js Toolkit New version is coming... Follow up here: https://github.com/Sly777/ran/issues/677 Features Hot-Reload Ready fo

Ilker Guller 2.2k Nov 28, 2022
Bootstrap-Lightbox - Simple & lightweight lightbox for Bootstrap 5

Bootstrap-Lightbox Simple & lightweight lightbox for Bootstrap 5 Basic Usage Adding data-modal="bs-lightbox" in your A href tag. <a data-modal="bs-lig

null 1 Oct 11, 2022
jQuery lightbox script for displaying images, videos and more. Touch enabled, responsive and fully customizable.

fancyBox jQuery lightbox script for displaying images, videos and more. Touch enabled, responsive and fully customizable. See the project page for doc

Jānis Skarnelis 7.2k Nov 19, 2022
Responsive no-jQuery pure JS/CSS Lightbox for images, no dependencies, 10kb unminified source code, with demo

img-lightbox Responsive no-jQuery pure JS/CSS Lightbox for images, no dependencies, 10kb unminified source code, with demo Demo codepen jsfiddle jsbin

englishextra 12 Jun 13, 2022