Marek Grzybek has released version 0.6 of baguetteBox.js, a new lightbox script written in JavaScript. Grzybek says that while it includes features like transitions, SVG buttons and responsive images it also aims to preserve browser compatibility.
Speaking to InfoQ, Grzybek said
Before I created baguetteBox I researched the subject, looking for other lightbox scripts that are available. Based on this research, I think what makes baguetteBox stand out from other options are the best features from many different lightboxes, combined together.
For example, baguetteBox supports image captions which isn't always so obvious. It also works on touchscreen devices with swipe gesture, and it supports responsive images. Even with all of that I managed to get it work (with basic functionality) on IE8.
But baguetteBox is not for everyone. It only works with images, so if someone needs to present a YouTube video there are going to be better alternatives. Not everyone will like the minimal look, and I don't say it's an ideal lightbox -- but I have done my best to make it the best available.
For using the responsive images feature, the baguetteBox GitHub instructs users to put data-at-{width} attributes on a tag with value being a path to the desired image. {width} should be the maximum screen width at which the image can be displayed, and the script chooses the first image with{width} being bigger or equal to the current screen width for best user experience. The code should 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>
Initial reactions to baguetteBox have been largely positive. On the Reddit discussion baguetteBox.js - Simple and easy to use lightbox script in pure JavaScript user Lokaltog said "Standalone, works really smoothly, uses the maximum amount of space on my monitor by default - I like it. Thanks for sharing."
Other than offering compliments on the lightbox, others have offered suggestions and comment. User afrobee said:"I would advise that you use transform (translateX or translate3D) instead of margin and left on the animation; the transitions will be smoother."
User sotopheavy agreed saying "Yes, use 3D transforms when possible as it will trigger hardware acceleration."
Grzybek says that baguetteBox requires a minimal amount of work to get it up and running, and would particularly interest especially people who care about an elegant look and page load speed, since it comes with no dependencies or extra files. Feedback from InfoQ readers is welcomed on the GitHub project, as well as reports of issues and pull requests. Version 1.0 of the baguetteBox is expected very soon.
