Stack Lightbox

With Stack Lightbox you can activate the lighboxing effect on nearly every other Stack on your page. Images, videos, text and much more. Use it to emphasize special parts and bring a modern user experience to your visitors.
Stacks Image 854

Screenshots

Settings

    Title Position: box (black round box under the LightBox), inside, outside, hover (Like my OverlayBox)
    Transition (in/out): 'fade', 'elastic', 'none'
    Speed (in/out): Time between slides in ms
    Overlay Opacity: Opacity of the background
    Overlay Color: Color of the screens background
    Border Color: Sets the border's color of the lightboxed element
    Border Width: Sets the border's width
    iFrame Width / Height: If you display another webpage you can define its dimensions
    Load on Start: You can enter the ID of a Lightbox Stack like #lightbox1 or a resource like ../../../resources/image.jpg

Stack Lightbox

    ID: Each Stack LightBox needs a unique ID
    Width/Height: Set up using pixel values or 'auto'. 'auto' will try to guess the correct size of the content. For my ContentScroller Stack you need to set the height and width explicitely!

Infos and Requirements

Rapidweaver
Rapidweaver 5/6/7
Stacks 2 only
Stacks 2 / 3
Responsive
Compatible to
responsive themes

Downloads

Stacks Image 7201

Download Project File

Browser Compatibility

  • Safari
  • Chrome
  • Opera
  • Internet Explorer
  • Firefox

How To

How to set up a Stack LightBox:

At first you need to put the StackLightBox Loader on top of your page. There you can set up a few attributes for the lightbox behaviour on this page.
You can set up invisible content using the "Stack LightBox". You need to give it a unique ID. Afterwards add a link to any content (outside the Stack LightBox!).
Stacks Image 7244
    In the URL part insert the ID of the Stack LightBox you want to show.
    Add a Custom Atribute and name it 'class' with value 'mb_lightbox'.
    If you want to group it in order to cycle through a gallery of lightboxed elements you have to add another attribute: 'rel'
    All elements that should appear grouped need to have the same 'rel'-value, for example 'gallery1',...
    If you don't add the rel attribute all non 'rel'-led elements will be grouped too, so if you want one lightbox to appear non-grouped you need to give it a unique 'rel'-value.
    Use the attribute "data-order" and an integer to create an ordering for your grouped lightboxes.
    You can display another webpage lightboxed if you setup an URL and set the class to "mb_lightbox iframe"
    You can display YouTube videos lightboxed if you setup a link to the video and set the class to "mb_lightbox_youtube"
    You can display Vimeo videos lightboxed if you setup a link to the video and set the class to "mb_lightbox_vimeo“
Just wanted to say that it works fantastically, too. Best Lightbox I've used.
L. Richards
I think I've bough every lightbox out there for RW and your is the ONLY one that does what it should easily.
M. Medford
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.
Stacks Image 719
Stacks Image 723
Big Buck Bunny
(c) copyright 2008, Blender Foundation / www.bigbuckbunny.org
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. 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. 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. 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. 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.
Stacks Image 737