LightboxMe Stack

Show any content in a lightbox

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.

This stack requires the Stacks plugin by YourHead (version 3).

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.

Dating in the fifties
(source)

In this example, the BlueBall FreeStack Contact Stack is used.

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!

Please use this form to contact me.

Contact Form

Fields marked with * are required.

Look! A lightbox with an animated gif as the overlay!

How cool is that?

(image source)

You’re been on this page for 10 seconds now…

See? You can even make the LightboxMe Stack open a lightbox after a given time!

continue…

Sorry for interrupting you again…

…but I really wanted to show you that you can now even make the LightboxMe Stack open a lightbox after scrolling down (500px to be precise in this case) for the first time!

continue…

You’re about to enter the LightboxMe Stack product page.

As you can see, with this stack you can even start with an open lightbox.
New in version 1.1.0: you can now set a delay before the lightbox opens automatically!

continue…

Lightbox #1

This is a simple example of a sequence of lightboxes made with the LightboxMe Stack.

prev | close | next

Lightbox #1

This is a simple example of a sequence of lightboxes made with the LightboxMe Stack.

prev | close | next

Lightbox #2

Here’s how it works: on the prev and next links, set both a class lbmClose and the id for the previous/next lightbox.

prev | close | next

Lightbox #3

On all lightboxes except the first, set the overlay speed to 0 (zero).

prev | close | next

Lightbox #4

Remember to use unique IDs for all prev and next links!

prev | close | next

Lightbox #5

For example: both the prev link in this lightbox and the next link in lightbox #3 link to lightbox #4. The first has an ID lb4‑5; the next link in lightbox #3 has an ID lb4‑3.

prev | close | next

Lightbox #6

Because the first lightbox has the overlay speed set to 300ms, going back from lightbox #2 to lightbox #1 looks rather ugly.

prev | close | next

Lightbox #7

That’s why I used two identical lightboxes: one with an ID lb0 and an overlay speed of 300ms; the other with an ID lb1 and an overlay speed of 0ms.

prev | close | next

Lightbox #8

The first lightbox you see in this sequence has the ID lb0; the prev link in lightbox #2 links to lightbox #1 (with the ID lb1).

prev | close | next

Lightbox #9

Congratulations! You made it to the end!

As you can see, this solution is not for the faint of heart. You may be better-off with another stack, but if you want to try it anyway: there’s a demo file with this page included in the download.

prev | close | start over

Marathia’s Stacks

stacks for the rest of us

LightboxMe Stack

Contact Form