If using TopBox 3, the original setup instructions and documentation can be downloaded here as a PDF. This webpage covers setup and usage of TopBox 4, released Friday 5th June 2015. TopBox 4 is a free update for all existing owners of the TopBox stack, and the update can be manually downloaded from your Paddle Locker. New download links can be requested by email, if proof of purchase is received.

A major update over the previous version; TopBox 4 is a complete re-development of the previous stack; introducing extended lightboxing features, support for many more content types, better performance, revised styling, more automation and easier setup. We firmly believe that TopBox is now one of the very best lightbox and modal window addons available for RapidWeaver!

Key features at a glance
  • Easy to setup in RapidWeaver / Stacks, works in all free and paid ThemeFlood themes and most other RapidWeaver themes
  • Based loosely on the popular opensource Nivo Lightbox plugin (so you know you're getting a tried and tested lightbox solution which is already in thousands of websites)
  • Support for a great many different content types, including text stacks, HTML5 audio, HTML5 video, images, iFrames, inline content, YouTube and Vimeo
  • Numerous options to style and change the behaviour of your TopBox stacks to suit your requirements
  • Simultaneously style all TopBox stacks on the same page, in just a few clicks
  • Sort multiple TopBox stacks into gallery groups, with automatic next / previous navigation buttons between them
  • Fully responsive and retina-display compatible. Works great across a variety of different web browsers and devices
  • Lazy-loading content and a small source code footprint; resulting in much faster loading pages for your users and less bandwidth
  • Compatible for use in websites that have been secured with SSL certificates (https) and need to call files or content securely
TopBox introductory video

TopBox 4 Introductory Video

Tip If you are looking for a very simple lightbox effect with support for just static text / images and no backwards or forwards buttons, our recently re-released FancyViewer stack is worthy of a look. FancyViewer was formally developed by StackManiac.com and has since been rebuilt for Stacks 2 and Stacks 3 as a responsive lightbox using a legacy version of TopBox (version 3).


Here are some live examples of the TopBox stack and details about how each was created.

Simple Image

When opened, the TopBox displays a simple static image and its title. No padding or border is applied. The modal window is fully responsive and adjusts to fit different screen sizes. Images like this can be dragged and dropped directly into the image wells in the stack settings. Alternatively you can use images stored in a warehouse or another online public location. Warehoused images are often preferred by most users of the TopBox stack.

Retina Image

TopBox displays a normal image on standard resolution displays. If a retina display is detected (like an smartphone, tablet or retina display) the standard image is automatically replaced with a retina display-optimised image twice the resolution. This means that people viewing your website on a retina screen will see much sharper and more vibrant images. A retina image is basically twice the size of a standard image. So if your standard image measures 1500px wide and 1000px tall, the retina version would be 3000px wide and 2000px tall. So when a retina display squashes the image down to fit, the resulting image has twice the pixel density.

Mixed Content

A simple example of stacks placed inside of a TopBox modal. Here we experiment with some different content types, including text, images, headings and a link. The optional TopBox title was turned off in this example. TopBox can handle basic stack elements like text, floating images and columns.
Stacks Image 6291

European stonechats

The European stonechat (Saxicola rubicola) is a small passerine bird that was formerly classed as a subspecies of the common stonechat. Long considered a member of the thrush family Turdidae, genetic evidence has placed it and its relatives in the Old World flycatcher family Muscicapidae.

The stonechat is 11.5-13 cm long and weighs 13-17 g, slightly smaller than the European robin. The summer male has black upperparts, a black head, an orange throat and breast, and a white belly and vent. It also has a white half-collar on the sides of its neck, a small white scapular patch on the wings, and a very small white patch on the rump often streaked with black. The female has brown upperparts and head, and no white neck patches, rump or belly, these areas being streaked dark brown on paler brown, the only white being the scapular patch on the wings and even this often being buffy-white.

European stonechats breed in heathland, coastal dunes and rough grassland with scattered small shrubs and bramble, open gorse, tussocks or heather. They are short-distance migrants or non-migratory, with part of the population (particularly from northeastern parts of the range, where winters are colder) moving south to winter further south in Europe and more widely in north Africa. The male's song is high and twittering like a dunnock. European stonechats have a clicking call like stones knocking together.


Modal Window

A perfect working example of a modal window built with TopBox. Singular modal windows are useful for displaying important messages. Custom buttons can be setup to dismiss (close) a TopBox stack or direct a website user to a another page in your project, a file download or an external website. Using a Nivo Lightbox callback of $(".close-topbox").click(function(){ $(".nivo-lightbox-overlay").fadeOut("500", function() { $(this).remove(); }); }); makes TopBox close when a button is clicked. RapidWeaver themes with support for Bootstrap can utilise Bootstrap modal and button styling.

Extensive Content

An example of how TopBox handles an extensive amount of content (like website terms and conditions). If there's too much content to display inside the modal window, TopBox allows content to scroll vertically. Scrolling works on both desktop web browsers and touch-screen devices, like smartphones and tablets.
Start of content.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus facilisis nunc et tortor semper blandit. Cras malesuada a sapien in ornare. Sed bibendum ornare massa, condimentum consequat dolor porta ac. Aenean sollicitudin semper quam, id varius quam ornare quis. Pellentesque et pharetra felis. Donec ac elit ornare mi eleifend viverra. Phasellus interdum consectetur leo, et auctor neque. Aliquam a libero est. Praesent sagittis nibh enim, vel cursus turpis ultrices quis. Nam euismod ex urna, id gravida justo egestas eget. Cras massa purus, sodales egestas fringilla et, faucibus et nibh.

Pellentesque ut laoreet nulla. Nulla commodo purus orci, sed facilisis ante blandit at. Nunc consectetur enim vitae tortor pretium consectetur. Sed blandit ac velit ut molestie. Quisque non tortor viverra, venenatis sapien vel, vehicula erat. Nunc fringilla fringilla risus, ac sagittis leo dignissim eleifend. Etiam aliquam urna et libero pharetra, ut vehicula lacus tempus. Phasellus id enim eget augue volutpat pretium. Morbi ut lorem nec purus fringilla tincidunt eu fringilla nibh. Fusce tempus vitae ante pulvinar lobortis. Mauris enim sapien, eleifend in ullamcorper eget, pulvinar ac dolor. Proin facilisis nulla nec odio venenatis aliquam. Curabitur nec rhoncus orci. Duis cursus ex augue, id suscipit velit varius id.

Vestibulum congue semper augue, vel porttitor sapien mollis quis. Nam venenatis metus sit amet eros venenatis malesuada. Mauris ornare lectus at augue eleifend bibendum. Aliquam et turpis tempus, imperdiet orci ut, tristique lacus. Quisque vitae ligula magna. Donec auctor ultrices leo. Etiam eros metus, ullamcorper sed sollicitudin id, fermentum non nunc. Praesent pharetra ac magna at convallis. Ut vel velit tincidunt, condimentum ante id, mollis dolor. Curabitur in aliquam ligula. Duis pretium elit tortor, id elementum dolor pulvinar a. Sed cursus dapibus magna pulvinar finibus. Fusce blandit sapien nec orci ultrices, vel porttitor eros vehicula. Fusce placerat mattis faucibus.

Nunc ultrices quam ut metus bibendum, vitae laoreet lacus pulvinar. Suspendisse laoreet erat nec auctor rutrum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc fermentum nisl ut vehicula venenatis. Vestibulum ut arcu ut diam gravida congue at non odio. Mauris varius quam quis maximus porttitor. Nunc pretium congue metus et sodales. Duis condimentum, purus et pharetra blandit, nulla libero dictum nisi, at maximus ipsum mi et felis. Donec lacinia ligula ut congue pretium. Duis massa metus, fermentum vel pharetra nec, semper id orci. Aliquam dapibus, ipsum id pretium gravida, velit neque auctor odio, non finibus libero lacus bibendum augue. Vivamus ut consequat purus, ut venenatis dui. Curabitur efficitur laoreet arcu non malesuada. Sed fermentum molestie sapien iaculis facilisis. Nullam enim magna, eleifend id libero aliquet, dignissim laoreet lacus. Morbi vehicula porttitor auctor.

Nulla auctor venenatis massa at molestie. Nullam rutrum metus eleifend enim mollis, et accumsan lectus pretium. Donec ornare leo sit amet lacus porttitor, vel sodales ipsum congue. Aliquam lacinia ultrices orci at convallis. Duis non condimentum massa, in lobortis lectus. Suspendisse tincidunt ipsum in porttitor faucibus. Duis non fermentum massa, quis porttitor justo. Phasellus ac nibh ligula. Etiam id ante ut elit semper fringilla. Curabitur sed ipsum dui.

Morbi sagittis ante ligula, id ornare purus sagittis nec. Aliquam tempus dolor vitae consectetur semper. In nec lectus eros. Vestibulum venenatis ex arcu, sit amet feugiat ante elementum eget. Cras sit amet molestie justo. Cras et scelerisque nibh. Fusce eu dolor lacinia, feugiat nulla eu, pellentesque lectus. Nam in urna a ligula dapibus tempor. Cras quis rhoncus metus, iaculis consequat tellus. Etiam malesuada, augue at tincidunt tempor, diam est semper sem, eget pretium nulla lacus in orci. Cras sit amet enim ex. Maecenas pellentesque mi vitae nisi fringilla sodales. Maecenas vel semper ex, quis porta est. Vivamus placerat libero quis dui posuere, vel commodo est ullamcorper. Cras at porta turpis. Mauris dignissim velit metus, nec efficitur orci hendrerit gravida.

Morbi ornare urna quis nunc tempus, non faucibus justo viverra. Sed tempor nec eros vitae imperdiet. Pellentesque interdum velit libero, sed feugiat felis maximus convallis. Donec venenatis turpis ac pharetra hendrerit. Donec euismod nulla sem, at elementum ex tincidunt id. Phasellus sodales mauris at felis laoreet, nec tincidunt nulla vestibulum. Mauris ullamcorper enim quis vulputate suscipit. Integer interdum nibh sit amet sagittis placerat. Nulla pulvinar velit non est ornare posuere. Nulla eleifend eleifend velit in faucibus. Phasellus ligula lacus, porta nec fringilla quis, dictum sit amet augue. Nunc consequat ante vitae orci pretium, vel elementum neque sollicitudin. Aliquam erat volutpat. Suspendisse vel tellus blandit, tincidunt felis sed, imperdiet ex. Sed ultrices, erat nec scelerisque blandit, risus nisi rutrum mauris, ut bibendum mauris erat vitae velit.

Pellentesque maximus, ligula at sodales venenatis, urna arcu porta eros, vel mattis felis ligula nec elit. Nam facilisis risus auctor odio bibendum, eget hendrerit turpis varius. Fusce ut semper turpis. Proin suscipit orci felis, eu ultricies quam tristique a. Praesent cursus nisl at nulla elementum, non pretium risus pulvinar. Etiam cursus congue lorem, nec bibendum nunc blandit at. Vivamus id lacus quam. Nullam rhoncus odio risus, sit amet iaculis tellus faucibus id. In rhoncus, nibh id viverra vehicula, nibh felis sodales velit, vel iaculis justo massa at risus. Cras a pharetra lorem. Suspendisse neque arcu, pellentesque sit amet purus luctus, accumsan rhoncus risus. Vivamus placerat et enim sed semper. Integer et vehicula ipsum, at venenatis eros. Nunc ut feugiat risus. Vestibulum fermentum consectetur nisi euismod venenatis. In porta suscipit sapien eu gravida.

Vivamus fermentum dolor eget eros hendrerit convallis. Nullam mattis maximus nulla at ornare. Sed tincidunt ante id mauris pellentesque accumsan. Vestibulum laoreet massa sit amet iaculis pulvinar. Vestibulum molestie porttitor augue sit amet dignissim. In vitae porta massa, et posuere diam. Ut imperdiet non tortor vel hendrerit. Vivamus dictum vulputate dapibus. Sed pharetra, leo non finibus porta, purus ante malesuada enim, ut luctus leo lectus quis lacus. Vestibulum ac tincidunt augue. Duis porttitor nibh a imperdiet malesuada. Ut efficitur eros et hendrerit varius. Curabitur porta tellus consequat nibh dignissim, eget consequat odio aliquam. Vestibulum ultrices tortor quam, vel placerat tellus fermentum in. Ut quis magna urna.

Vivamus mauris sapien, vehicula eget tellus ut, sagittis elementum metus. Phasellus accumsan augue lacus, eget auctor urna tristique a. Aenean faucibus augue arcu, vitae congue ante dapibus vel. Duis a congue sapien, sed laoreet eros. Quisque nisl mi, pretium vel sapien bibendum, ullamcorper fringilla dui. Sed bibendum aliquam rutrum. Vivamus consequat urna a turpis pharetra cursus. Etiam imperdiet eu ex eu venenatis. Suspendisse potenti.

Maecenas viverra felis mauris, ac pulvinar diam semper et. Aenean porttitor risus ut sapien sollicitudin, a mollis erat ornare. Proin id arcu non neque sollicitudin elementum vitae ut ipsum. Integer purus turpis, eleifend posuere malesuada sit amet, hendrerit id sapien. Nunc et rutrum velit. Sed fringilla lectus sed sem condimentum posuere. Phasellus feugiat quam vel leo volutpat, at tincidunt lorem tristique. Vestibulum eu massa eget nulla tempor viverra a sit amet nisi.

Nullam tempor facilisis lorem, ut molestie neque dapibus cursus. Donec consectetur bibendum augue, sed fringilla eros iaculis tristique. Suspendisse potenti. Nulla ultrices imperdiet nunc eu consequat. Duis condimentum dapibus lorem pretium mollis. Fusce vulputate hendrerit cursus. Integer sit amet hendrerit elit. Etiam eu urna id libero ullamcorper porta iaculis in felis. Nunc posuere enim sit amet velit vehicula condimentum. Proin sollicitudin semper nulla viverra ullamcorper. Integer eget felis eros. Maecenas vel tortor semper, pretium leo quis, cursus nulla. Praesent sed mi leo. Suspendisse maximus nisl ut sapien malesuada, vitae porta neque varius. Aenean semper augue vel congue sodales. Nunc egestas volutpat est, vel suscipit ante tristique a.

Mauris fringilla, ante non tempor porttitor, ex ligula lobortis sapien, vel porta tortor purus eget odio. Phasellus convallis mauris in aliquet bibendum. Integer cursus, justo vel venenatis auctor, eros nulla tincidunt libero, vitae vestibulum mauris magna eget ipsum. Curabitur pellentesque, dolor quis tristique consequat, quam libero accumsan tellus, non convallis erat ipsum in quam. Donec a ante sed eros ornare malesuada. Proin molestie nec ipsum scelerisque mattis. Sed nunc ipsum, commodo nec magna ut, porttitor malesuada turpis. Cras at ligula scelerisque, laoreet neque in, consequat tellus. Sed vel eleifend est, sit amet ultricies enim. Donec sollicitudin leo vitae libero pharetra tempor.

Quisque convallis lacus at odio malesuada, eget elementum nibh auctor. Praesent maximus sem pharetra, ornare turpis et, dictum lorem. Sed vitae tincidunt odio, vel dapibus dolor. Ut sit amet lectus mauris. Aliquam pharetra ante a nisi ultricies tincidunt. Sed bibendum in ligula eget hendrerit. Sed suscipit lectus nec nisl tristique posuere. Phasellus suscipit, mauris a dignissim malesuada, nisl sem malesuada orci, sit amet fringilla sapien justo nec turpis. Suspendisse consectetur, ipsum vitae mollis euismod, lacus augue eleifend mauris, ac varius sapien nisi at orci. Aenean tempus, elit non malesuada vehicula, magna ante gravida tellus, in dapibus lectus arcu sit amet tortor. Morbi risus diam, cursus quis purus eget, aliquam mollis lorem. Sed cursus augue vestibulum bibendum egestas. Suspendisse potenti. Sed consectetur vel metus et bibendum. In neque nulla, facilisis a condimentum ut, accumsan rutrum diam.

Vivamus varius, orci mollis ullamcorper consequat, ipsum erat ultricies purus, sed vestibulum urna libero vitae orci. Morbi velit ligula, blandit et condimentum quis, dictum et nisi. Phasellus felis leo, posuere ac ultrices non, ullamcorper eget quam. Curabitur euismod eleifend nisl nec dictum. Vestibulum pharetra maximus ornare. Nam sagittis sit amet lectus a aliquam. Nulla feugiat rutrum nulla non blandit. Nunc rhoncus gravida scelerisque. Pellentesque fringilla ante arcu, quis rhoncus lacus hendrerit id. Etiam bibendum, magna eget ornare ultrices, felis mi consequat eros, nec dapibus mauris turpis ac nulla. Sed fringilla gravida elementum. Donec sit amet erat purus. Nullam sit amet porta turpis.

End of content.

Error Handling

A quick test of how TopBox gracefully handles content which cannot be found or loaded. The error message text can be customised in the stack settings to anything you want. Users might encounter links which are temporarily broken or content (like embedded HTML5 audio or video) which their chosen web browser doesn't support. An error message provides a useful method of informing your website users; instead of just landing them onto an ugly 404 page or displaying a blank screen!


To be honest, iFrames are not used all that much nowadays (it can be difficult to get them displaying on smaller screens). But rest-assured, TopBox is still perfectly capable of displaying iFrames on desktop screens, should the need still arise. To get an iframe working, set the Content Type setting to iFrame. Then enter the URL of the website to be 'framed' in the TopBox settings. On occasions iFrames are still essential for some aspects of e-commerce (like displaying a shopping cart) or for social media embeds.

Inline Content

If you've already got an element in your page (visible or hidden) you can get it to embed inside TopBox. To do so, set the Content Type setting to Inline. Then enter the ID name of the element you want to embed in TopBox. ID names or selector names can often be taken from the page source code, using the web inspector. In this example, we entered an ID of #bannerOuter which clones our page header into TopBox. The same principle could possibly be applied to any other element on the page; including an ExtraContent container or a sidebar.

HTML5 Audio

This lets your website visitors listen to a single audio track. The audio track is provided in proprietary MP3 format and opensource OGG format, guaranteeing the widest possible compatibility with different web browsers. Web browsers display their own audio controls; often with a play / pause button, volume control, scrubber bar and time / duration. Titles and descriptions can be provided for additional information. Audio files can be converted into the required formats using the popular and free Miro converter. You host these audio files yourself in a folder on your web server with with a services like Amazon S3. The links to these audio files are used in the TopBox stack.

Track Title Goes Here

A description or other information about the track goes here in this space.

HTML5 Video

Displays a video in proprietary MP4 format and opensource WebM format, for better compatibility with different web browsers. The standard web browser video controls are used. iOS devices will open the video within a new tab and overlay video controls. Video files can be converted into the required formats using the popular and free Miro converter. The video files can be stored on a CDN (content delivery network) like Amazon S3 for faster streaming. Static thumbnail images could easily be used as the links people click to open the video. We attempt to automatically play the video in those web browsers that support autoplay.

YouTube Video

Really simple to setup, just set the TopBox Content Type to YouTube and paste the YouTube link into the TopBox settings. TopBox does the rest of the work for you, finding the video on the webpage and embedding it on the page with standard YouTube player controls. We attempt to start the video automatically (on web browsers that support autoplay) and you can display a title under the video. Any YouTube video which is public and has embedding enabled can be used.

Vimeo Video

An alternative to YouTube video, in instances where you need to collect more-detailed analytics, display a higher-quality video or control where people can watch your video. Like YouTube, simply set the TopBox Content Type to Vimeo, give TopBox your video URL in the settings; and TopBox will do the rest for you. We attempt to start the video automatically (on web browsers that support autoplay) and you can display a title under the video. TopBox supports Vimeo 'pro' and 'business' accounts.

Newsletter Signups

Services like MailChimp provide you with the code to create simple mailing list signup forms on your website. Like in this example, this code can be placed within a TopBox stack. It's a good way to keep the signup form out of the way, but still have it available to users via a link or button. In this example, the TopBox Content Type was set to Stacks and an HTML stack was dragged and dropped inside the TopBox content region. Into this HTML stack, you can then paste your email signup code. In this example the code was modified slightly to include some Bootstrap selector names. That way, the form can be smartened more using Bootstrap styling, which all ThemeFlood themes support.

Subscribe to our free mailing list

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

Image Gallery

Allocating multiple TopBox stacks the same gallery ID (in the TopBox settings) automatically makes that group of TopBox stacks a lightboxed gallery. A lightbox is like a modal window, except previous and next navigation buttons are provided between each of the TopBox stacks. Once TopBox is open, your website users can navigate backwards or forwards through the gallery (using the buttons provided or left / right arrows on their keyboard). Any TopBox stacks can be chained together to form a lightbox; opening possibilities of combining different content types (like written content, images and video) together in one gallery. In this example, 10 TopBox stacks were setup, each one containing a warehoused image and allocated to a gallery set called 'gallery1'.

Digital Archive

Another example of a gallery built using TopBox, this time merging static images (of different sizes), written content, Vimeo and YouTube video content together. Next and previous buttons make it easier for website visitors to navigate through the different content. Supplementary titles provide information about the entries in the lightbox gallery. TopBox comfortably handles varying content types with ease. Different sized content does not prove to be an issue, and TopBox can intelligently scale content to fit various devices and web browsers. Use TopBox to tell a story and make your website more interactive.

The Velodyssey Cycleway

Starting on the coast at Ilfracombe in North Devon, the Velodyssey trail runs south to Plymouth; a distance of 99 miles following Sustrans Route 27. At least 70 miles of this route is off road, following the gentle, meandering paths of disused railway lines, tramways and canals through breathtaking scenery and the Dartmoor National Park.

Once in the historic city of Plymouth, a ferry across the channel to Roscoff in France places you at the next stage of 'La Vélodyssée'. This is a 745 mile route from Brittany down the west coast of France (alongside the Atlantic Ocean) to the border with Spain. Various other cycle routes branch-off to different destinations, including Paris, the Alps, Monaco, Santander, Madrid and the Mediterranean.

The route attracts thousands of people every year. It's fast-becoming one of the most popular long distance cycle routes in Europe. People of all ages and abilities can find enjoyment riding part or the entire length of the Velodyssey route. A lot of investment has been made in recent years to improve signage and upgrade sections with resurfaced cycleways and new routes to avoid steep hills, busy traffic or lengthy detours.
Stacks Image 6311


Follow these instructions for getting TopBox stacks working in your webpage:
  1. Once installed into Stacks / RapidWeaver drag and drop a TopBox stack into your Stacks page
  2. In The TopBox settings, open the TopBox Trigger Settings if they're not already showing. From the drop-down menu, choose the method for triggering (opening) the TopBox. Options included clicking a stack, clicking an image or only accessing a TopBox via the next / previous buttons of another TopBox stack in the same page. Configure the TopBox trigger, as-per the trigger type and instructions shown.
  3. In The TopBox settings, open the TopBox Content Settings if they're not already showing. Choose the type of content you want to displaying within the opened TopBox.
  4. Configure the TopBox content, as-per the content type and instructions shown.
  5. Change any other settings in the style or advanced groups of TopBox settings.
  6. Preview your page and click a trigger to view the TopBox.

As always, hovering your mouse cursor over settings within the stack will display informational tooltips about what each setting does and any important things to know about when configuring your TopBox stacks.

Inherited settings

Style settings not taking effect in TopBox? Previously it's been found that many people have placed multiple instances of TopBox on the same page. A complaint sometimes raised was that it was a lot of extra time and effort to adjust the style settings of each individual TopBox stack, to achieve the same styling. In TopBox 4, the final TopBox stack added to a page (the TopBox stack furthest down the page) will now act as the 'master' for style settings. So for example, if you added five TopBox stacks to a webpage, changing the window shade colour to red in the fifth TopBox stack will apply the same window shade colour to the previous four TopBox stacks on the same page. This should prove to be a massive timesaver and help greatly towards ensuring all TopBox stacks on a webpage share identical styling.

Triggering TopBox stacks

TopBox stacks can be triggered in one of five ways:
  1. Another TopBox
  2. Local image
  3. Warehoused image
  4. Stacks
  5. A custom trigger (documented below)

The Another TopBox option removes any sort of thumbnail, button or link from the page. Instead people will only be able to get to the TopBox using the next / previous navigation links in another TopBox stack. This option is great to use, when you want to display a single link or thumbnail image; yet provide visitors to your website the ability to navigate through a complete gallery of artwork, photographs, images, video or other content.

TopBox triggers making use of Local Images and Warehoused Images will display a static image on your webpage. Clicking or tapping the image will trigger the TopBox. Placing multiple TopBox stacks within a free stack like AdaptiveGrid or UsefulGrid will enable you to build a responsive thumbnail grid of clickable images. Local images are images dragged and dropped into Stacks, directly from your computer. Warehoused images are images previously published online to a folder on your web server, or another public location, such as a Flickr or Picasa album.

The Stacks option places a blank placeholder into the page; into which you can drag and drop just about any type of stack elements you desire. A link for the TopBox stack will be layered over this content, therefore making the entire trigger region clickable. Within limits, you can use just about any type of stack elements or content as a TopBox trigger, but obviously you would want to avoid anything that might try to 'steal' click events; like a manually sliding slideshow, a video or anything else needing mouse input.

Custom triggers

Support for custom triggers was added in version 4.1. Custom triggers work by passing a click event from a button or link elsewhere in the page to the TopBox stack. Thereby you can trigger a TopBox outside of the TopBox stack or configure multiple links or buttons on a webpage to trigger the same TopBox. To use custom triggers, scroll-down to the Advanced Settings in TopBox. In the custom trigger box, give the particular TopBox a class, ID or element name of something like .myTopBox. Then elsewhere in your page, create a link that references your custom name:

<a href="#" class="myTopBox">Click me!</a>

Or a button:

<button class="myTopBox">Click me!</button>

Or an image:

<img src="http://example.com/image.jpg" class="myTopBox" alt="Image title goes here">

Now when your link or button is clicked, we pass the click event along to TopBox, and this particular TopBox will be triggered (opened). You can set the Trigger Type to Custom in the stack settings, although its worth mentioning that custom triggers work regardless of how you're triggering your TopBox stacks.

Gallery sets

By default in modal configuration, TopBox stacks open and close as singular popup windows with no interaction between one another. Allocating a TopBox to a gallery set will automatically display previous / next buttons and turns TopBox from a modal window effect into a fully-functioning lightbox system. Gallery sets let you group TopBox stacks together, providing your website users with an easy method to click or tap their way through a collection of different TopBox stacks. A TopBox can only ever be assigned to a single gallery set, however a page can host multiple gallery sets and the number of TopBox stacks added to a named gallery set is unlimited. Each TopBox within a gallery set can be configured with different content; like a mixture of written text, images and video relating to a certain project. All TopBox stacks will share the same styling (the TopBox stack furthest down the page acts as the master).

Content types

TopBox supports an incredible range of different content types; therefore overcoming the limits imposed by many other lightbox and modal window addons for RapidWeaver. Using the drop-down menu in the stack settings, you can choose what type of content to display within that particular TopBox. Images, video, static content and audio are all supported and relatively easy to get setup within a few minutes. The 'Stacks' option inserts a blank placeholder, into which you can drag and drop any stack elements you want displayed within TopBox.

Content you link to (like warehoused images, retina images, audio or video) needs to be public (content that is marked private obviously will not display in your website or TopBox). Although TopBox is compatible with many content types and different stacks, there will undoubted be many which do not work within a modal window or lightbox setup, like TopBox. Additionally, TopBox will not automatically make certain content types or stack elements responsive to fit different screen sizes. As always, simple is often best! If you have particular plugins or content you need TopBox to display, its essential to use the free downloadable demo version provided, before committing to a purchase.

Style settings

The TopBox stack lowest down the page order acts as the 'master' style for all other TopBox stacks added previously. Several style settings can be changed, including the colour and opacity of the window shade, content colours, title colours, the background effect applied to the content box, rounded corners, button styling, content padding and box shadow effects. Rolling your mouse cursor over each setting will display an informational tooltip about what that particular setting does. There is plenty of scope to style you TopBox stacks to match your existing RapidWeaver theme, colour scheme or corporate branding.


All buttons in TopBox (like the close, next and previous) buttons are achieved using Font Awesome icons. This ensures the icons remain pin-sharp on retina displays and can be styled more easily with regular CSS markup. Given that all ThemeFlood RapidWeaver themes now include Font Awesome icons, it makes sense to reuse what's already provided, and reduce bandwidth in doing so. The Font Awesome Icons website lists all the icon designs available, including different arrow icons. So if you don't like the default icons in TopBox already, you can swap-out the existing icons for your own; by changing the markup in the Advanced Settings. If your chosen RapidWeaver theme lacks support for Font Awesome Icons, you will need to ensure the 'Font Awesome Icons' option is selected in the stack.

Custom callbacks

TopBox inherits some genes from the opensource Nivo Lightbox plugin. Much the same as Nivo lightbox, expert RapidWeaver users and experienced developers can make use of powerful callbacks to interact with other scripting on the page or within TopBox. For example, you could pause all HTML5 video in a webpage when TopBox is opened:


This jQuery Javascript code would be entered into Init or Open callback boxes, in the TopBox settings. Now when TopBox is opened, the video on your webpage will stop playing; ensuring that duplicate audio or video tracks are not playing simultaneously within the webpage at any one time. Experience of HTML and jQuery Javascript is definitely advantageous when using advanced settings like this.

Another real-world example would be to have TopBox close automatically, when a contact form inside the TopBox is submitted:

$(".nivo-lightbox-overlay").delay(5000).fadeOut("500", function() {

This callback would be entered into your Open Callback box (so that the code is only executed when TopBox is open). It listens for a form to pass validation and then to be submitted. A delay of 5000 milliseconds occurs, to allow for the display of a form success message. TopBox is then faded out of display (over a duration of 500 milliseconds). The final stage of the callback is to remove TopBox from the DOM and reset it ready for next time.

Equally so, the above markup could be modified from '$("form").submit' to '$("a.topBoxClose").click' if you wanted TopBox to close when a link with a class of '.topBoxClose' is clicked. This thereby opens prospects to create custom close buttons and similar within TopBox. The markup presented above is fully interchangeable between both TopBox and the Nivo lightbox supplied in ThemeFlood RapidWeaver themes already.

Triggering TopBox stacks from a page anchor

This feature was added in TopBox version 4.4. Firstly, ensure that every TopBox stack on your page has a unique Custom Trigger applied (you can change this in the TopBox advanced settings). Create a button or link in your webpage that can trigger the desired TopBox stack and act as an intermediary. This would be the HTML markup to use for a button, in instances where you wanted to trigger a TopBox stack with a custom trigger of .myTopBox in the stack settings:

<a href="#" class="myTopBox" hidden>Click me</a>

Note the inclusion of the HTML5 hidden attribute, which can be optionally used to make this button invisible. This may be desired if you want to just use this button as a proxy when the page loads, and not necessarily display the button to your website visitors.

The anchor link to trigger this TopBox would be as follows:


Basically all you do here is add a hash (#) character onto the end of the page link. Type the custom trigger after the hash, but omit the proceeding full-stop character. When viewed in a normal web browser, you should find that when the page loads, some Javascript code in the stack virtually 'clicks' your hidden proxy link and triggers the desired TopBox stack automatically on page load.

To test this functionality on this webpage, open a new browser tab and paste the following into the address bar:
You should see the 'simple image' TopBox example open as the page loads.

Please note that this feature should be used in moderation. Popups are often considered a major annoyance on the internet. You should only trigger a TopBox stack automatically in instances where a website visitor purposefully clicks a link from another page and is expecting something to happen. The Gateway stack we provide already is a better choice of stack to use, in all instances where you want to create subtle popup messages and use tracking cookies to prevent display of the popup on subsequent revisits.


Some basic TopBox troubleshooting tips to follow before raising a support request:
TopBox content is partially cropped / misaligned on the screen
  • Disable extensions in your web browser (like Ad Blocker Plus, Click2Play, script blocker, etc.)
  • Check the content going into the TopBox is responsive (flexible) and compatible with lightboxes or modal windows
  • Ensure the correct content type has been selected (e.g. AJAX for AJAX content, images for image content)

Error message displayed that the content cannot be found or loaded
  • Make sure the link being used to embed the content is correct (e.g. correct audio, video or image URL)
  • Check the service hosting the content is available and isn't down for maintenance or technical issues
  • Confirm the content is marked as 'public' and permitted to be embedded into websites
  • Preview the webpage outside of RapidWeaver preview, because RapidWeaver can't preview some types of content

Icons / buttons are missing
  • Ensure the 'Font Awesome Icons' option is enabled for at least one of the TopBox stacks on the page
  • Make sure there are no other stacks or scripts that might be loading conflicting versions of Font Awesome
  • Make sure CSS consolidation is enabled in RapidWeaver
You can use other icon designs or libraries inside TopBox, however we don't officially support them.

Scrollbars are displayed when I have images inside the TopBox
  • On the final TopBox in the page, set the padding and border radius style settings to 0px
  • Check the images added inside the TopBox don't have any fixed height or width constraints applied
Ultimately if it is physically impossible to fit you TopBox content within the screen, then vertical and / or horizontal scrollbars will be displayed as a safety precaution. Free stacks like RottenApple or UsefulStack can be used to target and hide problematic TopBox stacks on smaller screens.

Style settings not taking effect
  • Re-read the chapter again above, about inherited styles
  • Make sure the styles you are changing are in the final TopBox stack, furthest down the page (this acts as the master)
  • Check you didn't previously add some custom Nivo lightbox or TopBox CSS code to the page

Audio or video files suffer choppy playback issues or complete non-playback in Firefox
  • Host media files on a dedicated file sharing server for best results (like Amazon S3)
  • Make sure the server hosting your website is sending correct MIME types for OGG and WebM
  • HTML5 audio and video files need to be available in a choice of proprietary and opensource versions
  • Ensure there are no browser settings, plugins or extensions blocking media playback
Additionally, not all web browsers and devices support 'autoplay' of audio or video files. This means that when the TopBox opens, some users may need to click or tap the play buttons to begin watching or listening to content.

Simple is best!

The modern internet is all about doing more with less. TopBox is designed to supplement pages, not re-wrap existing layouts you've already setup. A mistake some people have made in the past is to try and cram TopBox full with a whole mixture of different stack elements, animation effects and complicated code. For example, putting slideshows inside TopBox. Things often fail as a result; either because things are not loading in the proper order or because considerations are not being made towards the horizontal and vertical scaling of components essential at different screen sizes. Many experts work on the "one effect per-page" principle; thereby ensuring things will always work reliably in the longterm and end users get the best possible user experience. When things don't work, there is normally a good reason for them not to work!
Bookmark or share this page
Baidu 百度
Renren 人人网
Weibo 微博
Contact Us
Email This Page
Print This Page
PS: This bookmarking and sharing popup is powered using our brilliant SocialPopup stack!


Like a lot of websites, Stacks4Stacks uses cookies to help enhance your browsing experience and handle things like purchases. We take your privacy seriously, and welcome you to freely opt-out of nonessential cookies at any time by reviewing your preferences on this page.