If you want a dead-simple lightbox with minimal features, then look no further than LiteBox! This lightbox effect purposefully does-away with features like navigation and image captions to focus purely on presenting your photographs in their simplest form. LiteBox is perfect if you have a couple of images on a webpage you want to lightbox. Any images nested within the LiteBox stack are automatically lightboxed. Alternatively you can have LiteBox scan your pages for HTML / Markdown images and convert them into clickable, lightboxed images. Consider using stacks like FancyViewer, SwipeGallery, TopBox or ProGallery; if you require a more sophisticated image lightboxing solution.
LiteBox supports jpg, png, gif, svg and the new WebP image format. The lightbox effect works reliably in all modern, mainstream web browsers. On smaller screens (like tablets and smartphones) the images are scaled-down proportionately to fit the screen. Website users can easily close the LiteBox lightbox by clicking the close button, the window shade or hitting the escape key on their keyboard.
LiteBox supports jpg, png, gif, svg and the new WebP image format. The lightbox effect works reliably in all modern, mainstream web browsers. On smaller screens (like tablets and smartphones) the images are scaled-down proportionately to fit the screen. Website users can easily close the LiteBox lightbox by clicking the close button, the window shade or hitting the escape key on their keyboard.
Please note: LiteBox requires a minimum of RapidWeaver 6 and Stacks 3. This stack will not install or function correctly on older versions of either Stacks or RapidWeaver.
Example
Here is a working example of the LiteBox stack. In this example we placed a free AdaptiveGrid stack inside a LiteBox stack, then dropped-in a couple of JPG images.





Setup
To get a LiteBox stack working in your webpage, follow these instructions- Once installed into Stacks and RapidWeaver, add a new Stacks page type to your project if you've not done so already
- Open the Stacks Library and search for 'LiteBox'. Drag and drop a single copy of LiteBox into your stacks page
- Configure any of the LiteBox settings, shown in the Stacks sidebar
- Drag and drop additional stacks or images inside LiteBox, into the drop zone marked 'drag stacks here'
- Preview the page in RapidWeaver. You should find the images you just added will open inside a lightbox when clicked
- When finished, export or publish your webpage.
It's strongly recommended that only a single LiteBox stack is added to each page of your project.
Controlling which images are lightboxed
By default, LiteBox will automatically ligthbox all images that are detected within the stack. However the stack can be configured to detect and lightbox images elsewhere on the page. To accomplish this, enable the LightBox External Images option and provide a Scope (a named HTML element, ID or class selector). The scope could be something as broad asbody
(to lightbox all images in the page) or you could restrict lightboxing to an individual container like #contentContainer
.