A clever image stack, which you can use for the creation of search engine styled image galleries. Clicking on thumbnail images reveals a larger version of the image. It’s like a lightbox, but not quite a lightbox!
You can view the product page for SuperBox here.
What’s good about SuperBox is that it keeps focus on the webpage. Navigation through an image gallery becomes an altogether faster and more enjoyable experience.
SuperBox has been around as a stack for a number of years. The original developer was Adam Merrifield of SeyDoggy. This latest version introduces some excellent new functionality that elevates the capabilities of SuperBox even further. Have a read below of what’s new!
Caption support
This has long been a frequent request. This version of SuperBox finally introduces support for written captions. Plus there is a separate HTML box, where you can include optional code for each image, such as custom links, download buttons, lightbox triggers, PayPal, Stripe or FotoMoto purchase buttons.
Expertly built
SuperBox uses a mixture of modern web technologies, including CSS flexbox, transitional effects, proportionate sizing and responsive behaviour. The end result is a robust and highly flexible stack, which adapts intelligently to fit your content. The subtle animation effects add a professional finishing touch.
Image links
You can now apply optional links to the full size image, to make them clickable. Not only that, but you can also apply custom attributes to these links; for those instances where you need to ‘attach’ extra code; like lightbox triggers, custom callbacks or analytical campaign tracking.
Improved thumbnail grid controls
By request, it is now possible to control how many thumbnail columns are displayed on mobile, tablet, laptop and desktop screen widths. Choose between one and twelve columns in the stack settings. SuperBox does all the complicated code and calculations for you in the background.
Lazy loading
SuperBox includes the new HTML loading attribute, for web browsers that support it (currently Chrome and Firefox nightly). Meaning your images will have deferred loading until the image comes into view. The end result is a faster loading webpage. Expect to find native lazy loading support coming into many more web browsers this year.
More style options
The choice of style, colour and alignment options has increased significantly in this update. While we still inherit a lot of theme styling (like font faces) you have greater control over many other aspects of the SuperBox presentation. All colour pickers come in light and dark pairs, so you can adjust the colour of SuperBox depending on whether the user has their computer set to light or dark mode. Learn more about this here.
New navigation options
Keyboard navigation remains the same as before. Next, previous and close icons have received a minor design refresh. A select menu is provided so you can adjust the placement of the next / previous button. The Font Awesome Icons used can be changed in the stack settings, if required.
Active carets
The thumbnail image of the expanded image have the addition of a little caret icon. This gives better indication of what image the user is currently viewing. A nice little finishing touch. Carets are easily disabled with a checkbox option, if they are not required.
Sound effects
Not to everyone’s liking admittedly! However another customer of SuperBox v5 (using the stack in a children’s website) specifically sponsored this new feature. It is now possible to attach custom sound effects to the thumbnails, which play each time a thumbnail or navigation button is clicked.
Text-only panels
Sometimes you might be in a position of wanting to only display a thumbnail image and corresponding caption or HTML content (no full size image) in the expanded panel. The 'Text / HTML Only’ sub-stack is perfect for this task. A full size image is not loaded, and your caption or HTML content is set to display the full width of the SuperBox panel.
Anchor points
Optional anchor points can be assigned to each SuperBox item. If a user lands on the page with a matching anchor appended to the URL (e.g. Example Domain then the user is scrolled down to that point of the page and the target image opens within SuperBox.
Improved compatibility
SuperBox is now compatible with Foundation and other frameworks / themes. Various theme and web browser related bugs have been fixed in this update. All the messy Internet Explorer hacks are gone, so the code base of SuperBox is smaller, despite many more features being added.
Special effects
Alongside the previous 'opacity’ effect available, the choice of thumbnail image special effects has been expanded to include blur, brightness, contrast, hue, invert, monochrome, rotation, saturation, scale and sepia. The amount of each effect is customisable. Effects are applied via CSS, for minimal performance impacts.
SuperBox is certainly an image gallery stack worth taking a second look at. A great addition to websites and an innovative method of navigating any quantity of images. The addition of captions, links and optional HTML code make SuperBox a useful addition to the Stacks Library.
This stack would be particularly well suited for product showcases, a simple store front, photographic galleries, real estate listings, travel websites and so much more…
Updates and pricing
-
SuperBox v5 installs itself alongside older versions you may already have installed. It will leave existing SuperBox galleries in your website untouched.
-
If you have purchased or updated SuperBox anytime after August 2017, login to your secure Paddle account to download the latest version for free. This newest version has an orange and white icon, in your Stacks Library.
-
If you are new to SuperBox (or have let your updates lapse behind), version 5 is available to buy today for just $20. A free demo version is available to download and install on your computer, meaning you can fully explore this whole stack and test it with your own content. Go to the product page here.
If you like using SuperBox, please leave us a quick review on the RapidWeaver Addons website here. It helps immensely and is much appreciated!