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:
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:
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.
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:
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:
You can then call SuperBox like so:
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.
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.