Javascript Icon Get 57% off the JavaScript Master Bundle!

See the bundle then add to cart and your discount is applied.

0 days
00 hours
00 mins
00 secs

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.

JavaScript Array Methods eBook Cover

🎉 Download it free!

Ready to go beyond ForEach? Get confident with advanced methods - Reduce, Find, Filter, Every, Some and Map.

  • Green Tick Icon Fully understand how to manage JavaScript Data Structures with immutable operations
  • Green Tick Icon 31 pages of deep-dive syntax, real-world examples, tips and tricks
  • Green Tick Icon Write cleaner and better-structured programming logic within 3 hours

As an extra bonus, we'll also send you some extra goodies across a few extra emails.


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 ='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.

Free eBooks:

JavaScript Array Methods eBook Cover

Ready to go beyond ForEach? Get confident with advanced methods - Reduce, Find, Filter, Every, Some and Map.

NestJS Build a RESTful CRUD API eBook Cover

Build your first NestJS app. With the CLI you'll learn the basics of real-world NestJS development.