The LightboxMe stack is the ideal solution when you want to show one or a few items in a lightbox. The stack is highly customizable, yet easy to work with and uses a very light-weight script that won’t put a big burden on the page load. As the creator of the plugin, Buck Wilson, puts it:
“Have you ever had a DOM element that you wanted lightboxed, but didn't want all the fanciness of all the lightbox-related plug-ins out there? Lightbox_me is for you. […] no muss no fuss.”
Demos Example #1 shows some text with the default settings of the stack. Example #2: shows some text with a lot of custom settings (see fig. 3). Actually, this stack can show everything you make with a stack: an image (example #3), a video (example #4), a contact form (example #5), an iframe (example #6),…
Bonus: the LightboxMe Stack is one of the few lightbox stacks that has the option to use a background image as the overlay (example #7).
The LightboxMe stack is meant for showing single lightboxes. Although it is possible to show sequences of items (example & how-to), this is not for the faint of heart and you may be better-off with another stack.
Usage
Drag any content you want to show in a lightbox inside this stack.
Give the content of this stack an ID that is unique for the page (use only a‑z, A‑Z, 0‑9, no spaces, no punctuation marks or other special characters).
To trigger this lightbox, give an empty link* (text, image, button…) the same id (fig. 1). If you want more than one link on the page to trigger this lightbox, give each link a unique id that starts with this stack’s ID (e.g. uniqueID1, uniqueID2, etc.) New in version 1.5.0: instead of an id, you can now also use a data-lbm tag for a link (fig. 2) If you want the lightbox to open automatically when the page finished loading, or when the visitor scrolls down, you can skip this step.
Set the background, border (radius) and padding of the lightbox with the settings in this stack; not with the general settings that come with every stack — unless you have something special in mind.
To close the lightbox, you can use the close icon, but also an empty link* inside the lightbox with a class lbmClose (fig. 3).
This stack tries to use the text and link styling of the theme in the lightbox, but that does not work with every theme. If necessary, use the lightbox content settings to style text and links. These settings can of course also be used to overrule the theme settings.
The width set does not include the close icon or shadow. If necessary, decrease the width to make room for them, especially on small screens.
Min. width and max. width will overrule the fluid width, unless the stack contains only a single image.
When the lightbox contains a full width image (like in example #3) of the stack:
Set the width to the maximum width of the lightbox.
Enable set max. width (under LightboxMe: lightbox settings)
Set the max. width to {(width of the image) + (border width + margin + padding of the image)*2} or lower.
* for an empty link, set the URL of that link to # (a.k.a. hash or number sign, see fig. 2 and 3). Background This stack is based on the Lightbox_me plugin by Buck Wilson. Limitations
When the visitor has JavaScript disabled in his browser, the lightboxes will not work.
In RapidWeaver Preview mode, you may experience glitches like a ‘flash’ when the lightbox is opening, the lightbox not covering the whole page or the page jumping to the top when closing the lightbox. This only happens within RapidWeaver, not in the published or exported page. Please preview your page in a browser and see if it happens there too before reporting a bug.
If you use the option start with lightbox open with a delay in combination with other lightboxes, you may end up with two lightboxes open at the same time. When closing one of them, the overlay will disappear. For this reason, my advice is to use the option start with lightbox open with a delay solely when it is the only lightbox on the page.
Support Please use this form to report all issues, questions and comments.
Do you like this stack? Please consider leaving a review in the RapidWeaver Community’s Addons section [link].
fig. 1: To trigger a lightbox, give an empty link the same id as the lightbox…
fig. 2: …or use a data-lbm tag.
fig. 3: To close the lightbox with a link inside it, you can use an empty link with a class lbmClose.
fig. 3
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.
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.
This form is for demo purposes only. Feel free to play with it, but keep in mind that any message sent will end up in a black hole and will never be read!
