LightboxPlus Stacks

Use each of these stacks to turn your standard Photo Album page* or CollagePlus Stack into a beautiful, responsive lightbox gallery.

All lightbox plugins used in these stacks are carefully selected to ensure trouble-free functioning in all recent browsers and operating systems and work in Preview mode. All lightboxes are fully responsive and support keyboard navigation; some of them even support swiping on mobile devices.

Besides that, all lightboxes are free to use, even in commercial work, so no worries about buying licenses**.

The LightboxPlus Stacks work together seamlessly with the Photo Album Beautifier Stack and a Photo Album page* and with the CollagePlus Stack.

Even implementing them on existing Photo Album pages is a breeze.

*with the help of the PlusKit Plugin by YourHead or Joe Workman’s Global Content Stack.
**The TOS “R”Us Plugin is donationware (there's a donation button on the bottom of this page); all others are released under a MIT License.
 

PhotoboxPlus Stack

Photobox­Plus Stack

Based on Yair Even Or’s Photobox Plugin.

‘A lightweight image gallery modal window script […]. Bottom row of thumbnails, navigated by mouse movement. [Images] can be resized using the mousewheel. Touch-friendly swipe left/right to change image. Auto-playing of images at a set interval.

For demos and the options, please visit the demo pages.
 

ResponsiveLightboxPlus Stack

Respon­sive­Lightbox­Plus Stack

Based on Duncan McDougall’s Responsive Lightbox Plugin.

‘[An] image-only, responsive, super lightweight, jQuery lightbox plugin.’

For demos and the options, please visit the demo pages.
 

ShinyboxPlus Stack

Shinybox­Plus Stack

Based on One-com’s Shinybox Plugin.

‘A jQuery "lightbox" plugin for desktop, mobile and tablet [that supports] swipe gestures for mobile.’

For demos and the options, please visit the demo pages.
 

SimpleLightboxPlus Stack

Simple­Lightbox­Plus Stack

Based on André Knieriem’s Simple Lightbox Plugin.

‘[A] lightweight (< 6kb minified) jquery plugin [that is] responsive, touchfriendly, minimalistic [and supports] swipe gestures for next/previous image.

For demos and the options, please visit the demo pages.
 

TOS“R”UsPlus Stack

TOS­“R”­Us­Plus Stack

Based on Fred Heusschen’s TOS “R”Us Plugin.

‘[A] jQuery plugin for scrolling/swiping [on] a desktop, tablet or smartphone. It's responsive by default.’

For demos and the options, please visit the demo pages.
 

VanillaboxPlus Stack

Vanilla­box­Plus Stack

Based on cocopon’s Vanillabox Plugin.

‘A simple, modern Lightbox-like plugin for jQuery. Simple design, no decoration. It focuses your content.’

For demos and the options, please visit the demo pages.

Usage
With a Photo Album page and the PlusKit Plugin by YourHead

1. Add a Photo Album Page, a Stacks page and a PlusKit page to your project.
In Page Inspector > General of both the Photo Album Page and the PlusKit page disable Enabled and Show in Menu. Give both pages a meaningful name. I prefer to make the pages that are only used for importing into other pages with PlusKit subpages of the PlusKit page, but that’s up to you.

2. On the Photo Album Page:
  • Make sure that Album type is set to Gallery (not Slideshow!) in Page Inspector > Page > General on the Photo Album Page.
  • If you want the captions to appear with the lightbox images, make sure to set Captions to Everywhere or Thumbnails only in Page Inspector > Page > General on the Photo Album Page.
  • If you don’t want the captions to appear with the lightbox images, use the option in the LightboxPlus stack.
  • If you want the captions to appear with the lightbox images, but not with the thumbnails, just add .thumbnail‑caption {display: none;} in Page Inspector > Header > CSS on the Photo Album Page – or use the option in the Photo Album Beautifier stack.

3. Add a LightboxPlus stack to the Stacks page.
In the stack’s HUD on the right, set the option use with to Photo Album page. Set the other options to your liking.

4. Import the Photo Album Page into the Stacks page.
On the photo album page, add @import((PAGENAME)) in any styled text area, select the code and apply Format > Ignore Formatting.

5. Optionally, add a Photo Album Beautifier stack.
In this case, set the option use with to Photo Album page and Photo Album Beautifier stack and drag the LightboxPlus stack into the drop zone of the Photo Album Beautifier stack (fig. 1).
See the Photo Album Beautifier stack product page for more information.
With the CollagePlus stack

1. Add a CollagePlus stack to a Stacks page.
In the CollagePlus stack’s HUD on the right, set the option use this stack to with a LightboxPlus stack.

2. Drag a LightboxPlus stack into the dropzone of the CollagePlus stack (fig. 2).
In the LightboxPlus stack’s HUD on the right, set the option use with to CollagePlus stack.

3. Set the other options of both stacks to your liking.

See the CollagePlus stack product page for more information.
Pro tip: by nature, a Photo Album page creates pages for each image with a single, big version of that image and some links (back, next, home). The LightboxPlus stacks change these links, and as a result you no longer go to those pages, but see the images in a lightbox instead.

There is no way to prevent the publishing of those single image pages. This means that search engines may index them, and present them in search results. To prevent that, add that following meta tag to each page that shows the thumbnails of a Photo Album page: <meta name="robots" content="index, nofollow" /> (fig. 3).
Background
These stacks are partly inspired on Adam Merrifield's sdLightboxAlbums script.

Limitations
  • Don’t use more than one of these stacks on a page. The result will be unpredictable at best.
  • When the visitor has JavaScript disabled in his browser, the stacks will not work and the ‘normal’, one image per page photo album pages will be shown when you import a Stacks page into a Photo Album page.
  • These stacks only work properly with a Photo Album page in themes that already have a lightbox built in when the Photo Album Beautifier stack is added.
  • Inline HTML (like <b>…</b> etc.) does show in the captions of the thumbnails, but will be ignored in the captions of the lightboxes.

Support

Please use this form to report all issues, questions and comments.

This stack requires both the Stacks plugin (version 3 or higher) and the PlusKit Plugin by YourHead.
There are dozens and dozens of lightboxes out there, but they will only make it into this series if they…
  • use jQuery
  • are responsive
  • work in all recent browsers and operating systems, including IE8
  • are free to use, even in commercial work
  • are well maintained by the author, so any bugs are fixed frequently
Suggestions for other lightboxes that may be worthwhile turning into a stack are always welcomed – as long as they meet these criteria!
Do you like these stacks? Please consider leaving a review in the RapidWeaver Community’s Addons section:
[
SimpleLightboxPlus Stack] [PhotoboxPlus Stack] [Respon­siveLightboxPlus Stack] [ShinyboxPlus Stack] [TOS­“R”‑UsPlus Stack] [PA/Vanilla­box Stack]
LightboxPlus stack with a Photo Album Beautifier stack
fig. 1


LightboxPlus stack with a CollagePlus stack
fig. 2


robots meta tag
fig. 3 (RapidWeaver 6)
robots meta tag
fig. 4 (RapidWeaver 7)
© 2012-2017 Marathia Web Design | Contact