BT
x Your opinion matters! Please fill in the InfoQ Survey about your reading habits!

New Lightbox Script To Combine Responsive Images with Browser Compatibility

by James Chesters on Aug 05, 2014 |

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.

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Tell us what you think

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread
Community comments

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Discuss

Educational Content

General Feedback
Bugs
Advertising
Editorial
InfoQ.com and all content copyright © 2006-2014 C4Media Inc. InfoQ.com hosted at Contegix, the best ISP we've ever worked with.
Privacy policy
BT