baguetteBox.js alternatives and similar libraries
Based on the "Modals and Popups" category.
Alternatively, view baguetteBox.js alternatives based on common mentions on social networks and blogs.
-
sweetalert2
✨ A beautiful, responsive, highly customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes. Zero dependencies. 🇺🇦 -
Magnific-Popup
Light and responsive lightbox script with focus on performance. -
fancyBox
jQuery lightbox script for displaying images, videos and more. Touch enabled, responsive and fully customizable. -
X-editable
In-place editing with Twitter Bootstrap, jQuery UI or pure jQuery -
tether
A positioning engine to make overlays, tooltips and dropdowns better -
lightGallery
A customizable, modular, responsive, lightbox gallery plugin. -
vex
A modern dialog library which is highly configurable and easy to style. #hubspot-open-source -
screenfull.js
Simple wrapper for cross-browser usage of the JavaScript Fullscreen API -
bootstrap-modal
Extends the default Bootstrap Modal class. Responsive, stackable, ajax and more. -
colorbox
A light-weight, customizable lightbox plugin for jQuery -
Bootbox
Wrappers for JavaScript alert(), confirm() and other flexible dialogs using Twitter's bootstrap framework -
lightgallery.js
Full featured JavaScript image & video gallery. No dependencies -
iziModal
Elegant, responsive, flexible and lightweight modal plugin with jQuery. -
jquery.avgrund.js
Avgrund is jQuery plugin with new modal concept for popups -
GLightbox
Pure Javascript lightbox with mobile support. It can handle images, videos with autoplay, inline content and iframes -
css-modal
A modal built with pure CSS, enhanced with JavaScript -
jBox
jBox is a jQuery plugin that makes it easy to create customizable tooltips, modal windows, image galleries and more. -
🦞 Modali
A delightful modal dialog component for React, built from the ground up to support React Hooks. -
hColumns
jQuery.hColumns is a jQuery plugin that looks like Mac OS X Finder's column view for the hierarchical data. -
F$D€
F$D€ - Client not paid? Add opacity to the body tag and increase it every day until their site completely fades away -
ModalSquared.js
ModalSquared.js is a super small less than a 1kb library for showing and hiding modals.
SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of baguetteBox.js or a related project?
README
baguetteBox.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:
npm
npm install baguettebox.js --save
Yarn
yarn add baguettebox.js
Bower
bower install baguettebox.js --save
CDN
Use one of the following CDN providers:
Copy URLs of the latest version (both
.js
and.css
files)Paste the URLs in your HTML file:
<link rel="stylesheet" href="<CSS URL>">
<script src="<JS URL>" async></script>
Manually
- Download
baguetteBox.min.css
andbaguetteBox.min.js
files from thedist
folder. - 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 |
buttons |
Boolean \ |
'auto' |
'auto' |
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 |
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\ |
API
run(selector, userOptions)
Initialize baguetteBox.js
- @param
selector
{string} - valid CSS selector used byquerySelectorAll
- @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](./CONTRIBUTING.md) 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.
*Note that all licence references and agreements mentioned in the baguetteBox.js README section above
are relevant to that project's source code only.