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.

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.
 
LiteBox Image
LiteBox Image
LiteBox Image
LiteBox Image
LiteBox Image
LiteBox Image
 

Setup

To get a LiteBox stack working in your webpage, follow these instructions
  1. Once installed into Stacks and RapidWeaver, add a new Stacks page type to your project if you've not done so already
  2. Open the Stacks Library and search for 'LiteBox'. Drag and drop a single copy of LiteBox into your stacks page
  3. Configure any of the LiteBox settings, shown in the Stacks sidebar
  4. Drag and drop additional stacks or images inside LiteBox, into the drop zone marked 'drag stacks here'
  5. Preview the page in RapidWeaver. You should find the images you just added will open inside a lightbox when clicked
  6. 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 as body (to lightbox all images in the page) or you could restrict lightboxing to an individual container like #contentContainer.

Floating images and captions

LiteBox is able to automatically convert regular HTML and Markdown images into clickable lightboxes. Sometimes the images or figures you are generating in a page with Markdown may not appear in the correct position or render too large. The floating options let you float targeted images or figures either left and right, with written page content wrapping around. You can configure the amount of padding around these floating elements and set a maximum width.
 

Contribute

If you find this stack element useful in your personal or commercial web projects; please consider making a small contribution towards ongoing support and updates. There are many different ways you can contribute to the Stacks4Stacks project, and benefits for doing so.