💰 Black Friday 35% special is here!

Use coupon code BLACKFRIDAY now for an extra 35% off.

0 days
00 hours
00 mins
00 secs

Write JavaScript like a pro. Javascript Icon

Follow the ultimate JavaScript roadmap.

Introducing SuperBox the re-imagined lightbox gallery

SuperBox is a new jQuery plugin I’ve been composing over the last few days. SuperBox takes the whole ‘image’ and ‘lightbox’ one step further, reducing the JavaScript and image load dependence to make lightboxing a thing of the past! Using HTML5 data-* attributes, responsive layouts and jQuery, here’s SuperBox.

SuperBox works wonders as a static image gallery, which you can click to reveal a full version of the image. Each image in the demo is the same size, but SuperBox supports any image size.


The markup is pretty neat and tidy, and to adhere to the CSS challenge faced with building it, SuperBox uses display:inline-block on the elements to display them next to eachother. One <div> will look like the following:

<div class="superbox-list">
  <img src="img/superbox/superbox-thumb-1.jpg" data-img="img/superbox/superbox-full-1.jpg" alt="" class="superbox-img">

By default, display:inline-block; creates a gap between elements, which we don’t want. So to eradicate this, we can do the following with some HTML comments, which is perfectly acceptable:

<div class="superbox-list">
  <img src="img/superbox/superbox-thumb-1.jpg" data-img="img/superbox/superbox-full-1.jpg" alt="" class="superbox-img">
--><div class="superbox-list">
  <img src="img/superbox/superbox-thumb-2.jpg" data-img="img/superbox/superbox-full-2.jpg" alt="" class="superbox-img">
--><div class="superbox-list">
  <img src="img/superbox/superbox-thumb-3.jpg" data-img="img/superbox/superbox-full-3.jpg" alt="" class="superbox-img">

HTML5 data-* attributes

SuperBox feeds off the data-img custom attribute I’ve added to display the full image, this means we don’t have to rely on more markup as it dynamically appends the data-img source for you.

Angular Directives In-Depth eBook Cover

Free eBook

Directives, simple right? Wrong! On the outside they look simple, but even skilled Angular devs haven’t grasped every concept in this eBook.

  • Green Tick Icon Observables and Async Pipe
  • Green Tick Icon Identity Checking and Performance
  • Green Tick Icon Web Components <ng-template> syntax
  • Green Tick Icon <ng-container> and Observable Composition
  • Green Tick Icon Advanced Rendering Patterns
  • Green Tick Icon Setters and Getters for Styles and Class Bindings


The ‘expander’ if you’d like to call it that, which expands and displays the current image you’ve clicked on uses a float, which allows it to fill up the entire row of divs using some clever CSS trickery.

The CSS for each ‘box’ looks like so, which you can see includes the *display:inline; hack for IE7 fixing:

.superbox-list {

Each image uses a maximum width property as well, so that it responds fluidly to the width of the viewport.


SuperBox is also responsive, allowing you to use it across any device. The media queries are really basic so you can build and expand upon it to fit within your project.


The jQuery is pretty simple stuff, and at the minute it’s a pretty simple lightweight plugin:

;(function($) {

  $.fn.SuperBox = function(options) {

    var superbox      = $('<div class="superbox-show"></div>');
    var superboximg   = $('<img src="" class="superbox-current-img">');
    var superboxclose = $('<div class="superbox-close"></div>');


    return this.each(function() {

      $('.superbox-list').click(function() {

        var currentimg = $(this).find('.superbox-img');
        var imgData = currentimg.data('img');
        superboximg.attr('src', imgData);

        if($('.superbox-current-img').css('opacity') == 0) {
          $('.superbox-current-img').animate({opacity: 1});

        if ($(this).next().hasClass('superbox-show')) {
        } else {
          superbox.insertAfter(this).css('display', 'block');

        $('html, body').animate({
          scrollTop:superbox.position().top - currentimg.width()
        }, 'medium');


      $('.superbox').on('click', '.superbox-close', function() {
        $('.superbox-current-img').animate({opacity: 0}, 200, function() {


You can then call SuperBox like so:

$(function() {

Browser support

I’ve tested SuperBox on all modern browsers, IE7, IE8, IE9 and IE10 and it works perfectly. The sizing is a little different in IE7 as by default the plugin is shipped with box-sizing:border-box; which changes the CSS box model for the better. Read up on it if you’re unsure about box-sizing.

Extending SuperBox

At the minute SuperBox is pretty flexible and a perfect platform to build upon. I do plan on updating it to include more features in the near future. Should you have ideas for future plugin additions, feel free to get involved and comment, fork or update it.

Learn JavaScript the right way.

The most complete guide to learning JavaScript ever built.
Trusted by 82,951 students.

Todd Motto

with Todd Motto

Google Developer Expert icon Google Developer Expert

Related blogs 🚀

Free eBooks:

Angular Directives In-Depth eBook Cover

JavaScript Array Methods eBook Cover

NestJS Build a RESTful CRUD API eBook Cover