Skip to content

tobaco/baguetteBox.js

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

baguetteBox.js

Simple and easy to use lightbox script.

Demo page

Demo Page screenshot

Features

  • Written in pure JavaScript, no dependencies required
  • Multiple-gallery support, allows custom options for each
  • Supports swipe gestures on touch-screen devices
  • Modern and minimal look
  • Image captions support
  • Responsive images
  • CSS3 transitions
  • SVG buttons, no extra files to download
  • Around 2KB gzipped

Installation

Bower

bower install baguettebox.js

Manually

  1. Download baguetteBox.min.css and baguetteBox.min.js files from 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>

Usage

Initialization

Initialize the script by running:

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

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/thumbs/2-1.jpg"></a>
	<a href="img/2-2.jpg"><img src="img/thumbs/2-2.jpg"></a>
  ...
</div>

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

Additional public methods

  • showNext - switch to the next image
  • showPrevious - switch to the previous image

They both return true on success or false if there's no more images to be loaded.

Responsive images

To use this feature, simply put data-at-{width} attributes on a tags with value being a 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.

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 href attribute as a fallback (link to a bigger image eg. Full HD).

Customization

You can pass an object with custom options as a second parameter. The following are available with their corresponding defaults:

{
  captions: true,       // true|false|callback - Display image captions or return from callback (arguments: gallery, element)
  buttons: 'auto',      // 'auto'|true|false - Display buttons
  async: false,         // true|false - Load files asynchronously
  preload: 2,           // [number] - How many files should be preloaded from current image
  animation: 'slideIn', // 'slideIn'|'fadeIn'|false - Animation type
  afterShow: null,      // callback - To be run after showing the overlay
  afterHide: null       // callback - To be run after hiding the overlay
}

buttons: 'auto' hides buttons on touch-enabled devices or when only one image is displayed.

Compatibility

  • IE8+
  • Chrome
  • Firefox 3.6+
  • Opera 12+
  • Safari 5+
  • Sleipnir

Notes

Feel free to report any bugs!

Credits

Creation of baguetteBox.js was inspired by great jQuery plugin touchTouch.

License

Copyright (c) 2014 feimosi

This content is released under the MIT License.

About

Simple and easy to use lightbox script written in pure JavaScript

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 82.7%
  • CSS 17.3%