Lightbox

‹ Back

Lightboxes are implemented using Magnific Popup.


Basic Lightbox of Hidden Content

To implement a lightbox you need the data-lightbox-basic attribute. The value of the attribute will override the type of the lightbox. By default it's inline.

Open lightbox

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque odit saepe, ipsam corrupti delectus autem labore dolorum ratione sit rem.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque odit saepe, ipsam corrupti delectus autem labore dolorum ratione sit rem.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque odit saepe, ipsam corrupti delectus autem labore dolorum ratione sit rem.

<a href="#example-1" data-lightbox-basic>Open lightbox</a>
<div class="mfp-hide" id="example-1">
  <div class="panel--padding content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque odit saepe, ipsam corrupti delectus autem labore dolorum ratione sit rem.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque odit saepe, ipsam corrupti delectus autem labore dolorum ratione sit rem.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque odit saepe, ipsam corrupti delectus autem labore dolorum ratione sit rem.</p>
  </div>
</div>

There is a section helper class that you can use to seperate content in lightboxes:

Open lightbox

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque odit saepe, ipsam corrupti delectus autem labore dolorum ratione sit rem.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque odit saepe, ipsam corrupti delectus autem labore dolorum ratione sit rem.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque odit saepe, ipsam corrupti delectus autem labore dolorum ratione sit rem.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque odit saepe, ipsam corrupti delectus autem labore dolorum ratione sit rem.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque odit saepe, ipsam corrupti delectus autem labore dolorum ratione sit rem.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque odit saepe, ipsam corrupti delectus autem labore dolorum ratione sit rem.

<a href="#example-sections" data-lightbox-basic>Open lightbox</a>
<div class="mfp-hide" id="example-sections">
  <div class="section panel--padding content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque odit saepe, ipsam corrupti delectus autem labore dolorum ratione sit rem.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque odit saepe, ipsam corrupti delectus autem labore dolorum ratione sit rem.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque odit saepe, ipsam corrupti delectus autem labore dolorum ratione sit rem.</p>
  </div>
  <div class="section panel--padding content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque odit saepe, ipsam corrupti delectus autem labore dolorum ratione sit rem.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque odit saepe, ipsam corrupti delectus autem labore dolorum ratione sit rem.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque odit saepe, ipsam corrupti delectus autem labore dolorum ratione sit rem.</p>
  </div>
</div>

Sizing

You can add the data-lightbox-size="small" attribute to the lightbox to give it a smaller window:

Open small lightbox

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque odit saepe, ipsam corrupti delectus autem labore dolorum ratione sit rem.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque odit saepe, ipsam corrupti delectus autem labore dolorum ratione sit rem.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque odit saepe, ipsam corrupti delectus autem labore dolorum ratione sit rem.

<a href="#example-2" data-lightbox-basic data-lightbox-size="small">Open small lightbox</a>
<div class="mfp-hide" id="example-2">
  <div class="panel--padding content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque odit saepe, ipsam corrupti delectus autem labore dolorum ratione sit rem.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque odit saepe, ipsam corrupti delectus autem labore dolorum ratione sit rem.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque odit saepe, ipsam corrupti delectus autem labore dolorum ratione sit rem.</p>
  </div>
</div>

fullscreen is also a valid sizing option:

Open fullscreen lightbox

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque odit saepe, ipsam corrupti delectus autem labore dolorum ratione sit rem.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque odit saepe, ipsam corrupti delectus autem labore dolorum ratione sit rem.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque odit saepe, ipsam corrupti delectus autem labore dolorum ratione sit rem.

<a href="#example-fullscreen" data-lightbox-basic data-lightbox-size="fullscreen">Open fullscreen lightbox</a>
<div class="mfp-hide" id="example-fullscreen">
  <div class="panel--padding content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque odit saepe, ipsam corrupti delectus autem labore dolorum ratione sit rem.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque odit saepe, ipsam corrupti delectus autem labore dolorum ratione sit rem.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque odit saepe, ipsam corrupti delectus autem labore dolorum ratione sit rem.</p>
  </div>
</div>

Scrollable Lightbox

You can use the shared/inline_lightbox partial to markup your scrollable lightbox, use the data-lightbox attribute instead of data-lightbox-basic to complete the scrollable lightbox.

This lightbox will automatically go fullscreen at smaller screensizes. This functionality can be disabled with the $fullscreen-mobile sass variable in the lightbox component.

Open lightbox
<a href="#example-scrollable" data-lightbox data-lightbox-size="small">Open lightbox</a>

<div id="example-scrollable" class="mfp-hide lightbox__default">

  <div class="lightbox--header">
    <div class="lightbox--title">
          </div>
    <button type="button" class="lightbox--close" data-lightbox-close>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" style="" class="icon-close">
  <g fill="none" fill-rule="evenodd" stroke="#000000" stroke-width="2" transform="translate(1 1)" stroke-linecap="round" stroke-linejoin="round" class="icon--stroke">
    <path d="M.333333333.333333333L15.6666667 15.6666667M15.6666667.333333333L.333333333 15.6666667"/>
  </g>
</svg>    </button>
  </div>

  <div class="lightbox--body">
    
    <div class="content">
        <div class="panel--padding content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque odit saepe, ipsam corrupti delectus autem labore dolorum ratione sit rem.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque odit saepe, ipsam corrupti delectus autem labore dolorum ratione sit rem.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque odit saepe, ipsam corrupti delectus autem labore dolorum ratione sit rem.</p>
  </div>
    </div>

  </div>


</div>
<%= render layout: "shared/inline_lightbox", locals: { inline_id: "example-scrollable" } do -%>
  <div class="panel--padding content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque odit saepe, ipsam corrupti delectus autem labore dolorum ratione sit rem.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque odit saepe, ipsam corrupti delectus autem labore dolorum ratione sit rem.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque odit saepe, ipsam corrupti delectus autem labore dolorum ratione sit rem.</p>
  </div>
<%- end -%>

You can also pass a capture in to the local lightbox_footer variable to add something below the scrollable area:

Open lightbox
<a href="#example-scrollable-footer" data-lightbox data-lightbox-size="small">Open lightbox</a>

<div id="example-scrollable-footer" class="mfp-hide lightbox__default">

  <div class="lightbox--header">
    <div class="lightbox--title">
          </div>
    <button type="button" class="lightbox--close" data-lightbox-close>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" style="" class="icon-close">
  <g fill="none" fill-rule="evenodd" stroke="#000000" stroke-width="2" transform="translate(1 1)" stroke-linecap="round" stroke-linejoin="round" class="icon--stroke">
    <path d="M.333333333.333333333L15.6666667 15.6666667M15.6666667.333333333L.333333333 15.6666667"/>
  </g>
</svg>    </button>
  </div>

  <div class="lightbox--body">
    
    <div class="content">
        <div class="panel--padding content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque odit saepe, ipsam corrupti delectus autem labore dolorum ratione sit rem.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque odit saepe, ipsam corrupti delectus autem labore dolorum ratione sit rem.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque odit saepe, ipsam corrupti delectus autem labore dolorum ratione sit rem.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque odit saepe, ipsam corrupti delectus autem labore dolorum ratione sit rem.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque odit saepe, ipsam corrupti delectus autem labore dolorum ratione sit rem.</p>
  </div>
    </div>

  </div>

    <div class="lightbox--footer">
      
  <div class="button-set">
    <div><button type="button" class="button__confirm">Ok</button></div>
    <div><button type="button" class="button__cancel" data-lightbox-close>Cancel</button></div>
  </div>
    </div>

</div>
<%= render layout: "shared/inline_lightbox", locals: { inline_id: "example-scrollable-footer", lightbox_footer: capture { %>
  <div class="button-set">
    <div>
      <button type="button" class="button__confirm">
        Ok
      </button>
    </div>
    <div>
      <button type="button" class="button__cancel" data-lightbox-close>
        Cancel
      </button>
    </div>
  </div>
<%- } } do -%>
  <div class="panel--padding content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque odit saepe, ipsam corrupti delectus autem labore dolorum ratione sit rem.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque odit saepe, ipsam corrupti delectus autem labore dolorum ratione sit rem.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque odit saepe, ipsam corrupti delectus autem labore dolorum ratione sit rem.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque odit saepe, ipsam corrupti delectus autem labore dolorum ratione sit rem.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque odit saepe, ipsam corrupti delectus autem labore dolorum ratione sit rem.</p>
  </div>
<%- end -%>

Note that this will keep the content on the screen at all times, outside of the scrollable area. If you don't want this content always on the screen, consider using .section classes instead:

Open lightbox
<a href="#example-scrollable-sections" data-lightbox data-lightbox-size="small">Open lightbox</a>

<div id="example-scrollable-sections" class="mfp-hide lightbox__default">

  <div class="lightbox--header">
    <div class="lightbox--title">
          </div>
    <button type="button" class="lightbox--close" data-lightbox-close>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" style="" class="icon-close">
  <g fill="none" fill-rule="evenodd" stroke="#000000" stroke-width="2" transform="translate(1 1)" stroke-linecap="round" stroke-linejoin="round" class="icon--stroke">
    <path d="M.333333333.333333333L15.6666667 15.6666667M15.6666667.333333333L.333333333 15.6666667"/>
  </g>
</svg>    </button>
  </div>

  <div class="lightbox--body">
    
    <div class="content">
        <div class="section panel--padding content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque odit saepe, ipsam corrupti delectus autem labore dolorum ratione sit rem.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque odit saepe, ipsam corrupti delectus autem labore dolorum ratione sit rem.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque odit saepe, ipsam corrupti delectus autem labore dolorum ratione sit rem.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque odit saepe, ipsam corrupti delectus autem labore dolorum ratione sit rem.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque odit saepe, ipsam corrupti delectus autem labore dolorum ratione sit rem.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque odit saepe, ipsam corrupti delectus autem labore dolorum ratione sit rem.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque odit saepe, ipsam corrupti delectus autem labore dolorum ratione sit rem.</p>
  </div>
  <div class="section panel--padding content">
    <div class="button-set">
      <div><button type="button" class="button__confirm">Ok</button></div>
      <div><button type="button" class="button__cancel" data-lightbox-close>Cancel</button></div>
    </div>
  </div>
    </div>

  </div>


</div>
<%= render layout: "shared/inline_lightbox", locals: { inline_id: "example-scrollable-sections" } do -%>
  <div class="section panel--padding content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque odit saepe, ipsam corrupti delectus autem labore dolorum ratione sit rem.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque odit saepe, ipsam corrupti delectus autem labore dolorum ratione sit rem.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque odit saepe, ipsam corrupti delectus autem labore dolorum ratione sit rem.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque odit saepe, ipsam corrupti delectus autem labore dolorum ratione sit rem.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque odit saepe, ipsam corrupti delectus autem labore dolorum ratione sit rem.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque odit saepe, ipsam corrupti delectus autem labore dolorum ratione sit rem.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque odit saepe, ipsam corrupti delectus autem labore dolorum ratione sit rem.</p>
  </div>
  <div class="section panel--padding content">
    <div class="button-set">
      <div>
        <button type="button" class="button__confirm">
          Ok
        </button>
      </div>
      <div>
        <button type="button" class="button__cancel" data-lightbox-close>
          Cancel
        </button>
      </div>
    </div>
  </div>
<%- end -%>

Types

You can pass a value in to data-lightbox to override the type of the lightbox. This example sets the type to iframe.

<a href="/" data-lightbox="iframe">Open lightbox</a>

Images and Galleries

<a href="http://placehold.it/500x500" data-lightbox="image">Open image</a>

To lightbox up a gallery of images, simply create a container with data-lightbox-gallery attribute. No data-attributes are needed on the images or anchors themselves as it's all delegated through this container.

<div data-lightbox-gallery>
  <a href="http://placehold.it/500x300">
    <img src="http://placehold.it/150x150" />
  </a>
  <a href="http://placehold.it/500x400">
    <img src="http://placehold.it/150x150" />
  </a>
  <a href="http://placehold.it/500x500">
    <img src="http://placehold.it/150x150" />
  </a>
  <a href="http://placehold.it/500x600">
    <img src="http://placehold.it/150x150" />
  </a>
</div>

Linking Modals

Linking to a modal from within a modal can look pretty lame because it's sudden and jarring. You can improve the experience by adding data-lightbox-linked attribute on your lightbox links that appear inside modals to fade them out before the modal fades in.

Open lightbox

Modal #1

Link to modal #2

Modal #2

<a href="#linked-1" data-lightbox-basic data-lightbox-size="small">Open lightbox</a>
<div class="mfp-hide" id="linked-1">
  <div class="panel--padding content">
    <p>Modal #1</p>
    <p><a href="#linked-2" data-lightbox-basic data-lightbox-size="small" data-lightbox-linked>Link to modal #2</a></p>
  </div>
</div>
<div class="mfp-hide" id="linked-2">
  <div class="panel--padding content">
    <p>Modal #2</p>
  </div>
</div>

Custom close button

Open lightbox

This lightbox has a custom close button.

<a href="#custom-close" data-lightbox-basic data-lightbox-size="small">Open lightbox</a>
<div class="mfp-hide" id="custom-close">
  <div class="panel--padding content">
    <p>This lightbox has a custom close button.</p>
    <p><button data-lightbox-close>Click this to close this modal.</button></p>
  </div>
</div>

Custom lightbox actions

Sometimes you need a lightbox to open programatically. Below is a code sample using the openLightbox method which hooks directly in to Magnific Popups $.magnificPopup.open() function:

Ornament.C.Lightbox.openLightbox({
  type: "inline",
  items: {
    src: "#id-of-element"
  }
});

The code above gets all the default lightbox settings then specifies the inline type and that the popup should open up the element of #id-of-element.

This method ensures that all the Ornament settings for magnific popup are retained when you open your new lightbox.

You can read more about programatic popup options at the Magnific Popup documentation page.

You can preview the default settings by using:

Ornament.C.Lightbox.defaults

Magnific Popup has a function to close all popups, which might come in handy:

$.magnificPopup.close();

or alternatively, we have an alias for it in Ornament:

Ornament.C.Lightbox.closeLightbox();

Both functions do exactly the same thing, there's no reason to use one over the other. Dealer's choice.


Rails data-confirm replacement

Rails has a method for easily adding a yes/no dialog confirmation box to links via it's data-confirm="[message]" attribute. Ornament over-rides that behaviour to turn it in to a much nicer lightbox with no other requirements:

<a href="/styleguide" data-confirm="Are you sure?">Delete my account</a>

The text of the link is pulled in to the header of the lightbox. The text in the data-confirm attribute is used for the text in the lightbox.

You can over-ride the text on the confirm and cancel buttons by passing in data-confirm-cancel="" and data-confirm-confirm="".

<a href="/styleguide" data-confirm="Do you really, really want to delete your account?" data-confirm-cancel="No! I don't want to any more!" data-confirm-confirm="Yes! I really, really do.">Delete my account</a>