Lightbox
Create modals that contain images, image galleries, videos, and inline content. Powered by Magnific.
Single Images
<a href="path/to/foo.jpg" class="lightbox lightbox--image js-lightbox--image" title="[Title]"><img width="[XXX]" height="[YYY]" alt="[Alternate Text]" src="path/to/thumb.jpg" srcset="[Sources]" itemprop="image"></a>
Lightbox Group
<p class="lightbox--group js-lightbox--group">
<a href="path/to/foo.jpg" title="[Title]"><img width="[XXX]" height="[YYY]" alt="[Alternate Text]" src="path/to/thumb.jpg" srcset="[Sources]" itemprop="image"></a>
<a href="path/to/foo.jpg" title="[Title]"><img width="[XXX]" height="[YYY]" alt="[Alternate Text]" src="path/to/thumb.jpg" srcset="[Sources]" itemprop="image"></a>
<a href="path/to/foo.jpg" title="[Title]"><img width="[XXX]" height="[YYY]" alt="[Alternate Text]" src="path/to/thumb.jpg" srcset="[Sources]" itemprop="image"></a>
</p>
Video
<a href="https://www.youtube.com/watch?v=z5rRZdiu1UE" class="lightbox lightbox--video js-lightbox--video">YouTube</a> <a href="http://vimeo.com/63038043" class="lightbox lightbox--video js-lightbox--video">Vimeo</a>
Inline Content
Different sizes have different "max-width" values. All sizes are responsive by default.
This Is The Title For The Lightbox And It's Really, Really, Really, Really Long
Appropriately scale intuitive intellectual capital without competitive best practices. Globally transition customized applications via turnkey leadership skills. Rapidiously maintain functional platforms without cross-media portals.
Collaboratively incentivize distinctive web services before functionalized alignments. Objectively integrate distinctive catalysts for change without go forward meta-services. Appropriately cultivate team building niche markets before standardized e-tailers.
This Is The Title For The Lightbox And It's Really, Really, Really, Really Long
Appropriately scale intuitive intellectual capital without competitive best practices. Globally transition customized applications via turnkey leadership skills. Rapidiously maintain functional platforms without cross-media portals.
Collaboratively incentivize distinctive web services before functionalized alignments. Objectively integrate distinctive catalysts for change without go forward meta-services. Appropriately cultivate team building niche markets before standardized e-tailers.
This Is The Title For The Lightbox And It's Really, Really, Really, Really Long
Appropriately scale intuitive intellectual capital without competitive best practices. Globally transition customized applications via turnkey leadership skills. Rapidiously maintain functional platforms without cross-media portals.
Collaboratively incentivize distinctive web services before functionalized alignments. Objectively integrate distinctive catalysts for change without go forward meta-services. Appropriately cultivate team building niche markets before standardized e-tailers.
This Is The Title For The Lightbox And It's Really, Really, Really, Really Long
Appropriately scale intuitive intellectual capital without competitive best practices. Globally transition customized applications via turnkey leadership skills. Rapidiously maintain functional platforms without cross-media portals.
Collaboratively incentivize distinctive web services before functionalized alignments. Objectively integrate distinctive catalysts for change without go forward meta-services. Appropriately cultivate team building niche markets before standardized e-tailers.
This Is The Title For The Lightbox And It's Really, Really, Really, Really Long
Appropriately scale intuitive intellectual capital without competitive best practices. Globally transition customized applications via turnkey leadership skills. Rapidiously maintain functional platforms without cross-media portals.
Collaboratively incentivize distinctive web services before functionalized alignments. Objectively integrate distinctive catalysts for change without go forward meta-services. Appropriately cultivate team building niche markets before standardized e-tailers.
This Is The Title For The Lightbox And It's Really, Really, Really, Really Long
Appropriately scale intuitive intellectual capital without competitive best practices. Globally transition customized applications via turnkey leadership skills. Rapidiously maintain functional platforms without cross-media portals.
Collaboratively incentivize distinctive web services before functionalized alignments. Objectively integrate distinctive catalysts for change without go forward meta-services. Appropriately cultivate team building niche markets before standardized e-tailers.
This Is The Title For The Lightbox And It's Really, Really, Really, Really Long
Appropriately scale intuitive intellectual capital without competitive best practices. Globally transition customized applications via turnkey leadership skills. Rapidiously maintain functional platforms without cross-media portals.
Collaboratively incentivize distinctive web services before functionalized alignments. Objectively integrate distinctive catalysts for change without go forward meta-services. Appropriately cultivate team building niche markets before standardized e-tailers.
<a href="#foo" class="lightbox lightbox--inline js-lightbox--inline">Open X-Small</a>
<div id="foo" class="inline-popup inline-popup--[width] mfp-hide">
<div class="inline-popup__header">
<h5>[Lightbox Title]</h5>
</div>
<div class="inline-popup__content">
[Lightbox Content]
</div>
</div>
Modal Content
Modals are more static than lightboxes. They can only close themselves. Modals are also responsive by default and can use the inline popup width classes for sizing.
Appropriately scale intuitive intellectual capital without competitive best practices. Globally transition customized applications via turnkey leadership skills. Rapidiously maintain functional platforms without cross-media portals.
Collaboratively incentivize distinctive web services before functionalized alignments. Objectively integrate distinctive catalysts for change without go forward meta-services. Appropriately cultivate team building niche markets before standardized e-tailers.
<a href="#modal-popup" class="lightbox lightbox--modal js-lightbox--modal">Open Modal</a>
<div id="modal-popup" class="inline-popup modal-popup mfp-hide">
<div class="inline-popup__content">
[Modal Content]
</div>
<div class="modal-popup__actions">
<button class="button modal-popup-close js-modal-popup-close">Close</button>
</div>
</div>
<div id="modal-progress-bar-popup" class="inline-popup inline-popup--xs modal-popup modal-popup--progress-bar mfp-hide">
<div class="inline-popup__header">
<h5>Your File(s) Are Uploading...</h5>
</div>
<div class="inline-popup__content">
<div class="progress-bar progress-bar--linear progress-bar--animated progress-75">
<div class="progress-bar__trench">
<div class="progress-bar__meter"></div>
</div>
</div>
<div class="inline-popup-disclaimer">
<p>
<strong>Do not refresh this window while your upload is in progress.</strong> You can continue working in other browser windows and tabs.
</p>
</div>
</div>
</div>
Please be patient while this is happening.
<div id="modal-spinner-popup" class="inline-popup modal-popup modal-popup--spinner mfp-hide">
<div class="inline-popup__header">
<h5>Please be patient while this is happening.</h5>
</div>
<div class="inline-popup__content">
<div class="modal-spinner">
<i class="fa fa-cog fa-spin"></i>
</div>
</div>
</div>
Class Reference
| Class | Info |
|---|---|
| lightbox | Denotes a lightbox element. |
| lightbox--image | Denotes a single lightbox image element. |
| lightbox--video | Denotes a single lightbox video element. |
| lightbox--inline | Denotes a single inline lightbox element. |
| lightbox--modal | Denotes a single modal lightbox element. |
| inline-popup | Background for lightbox content. |
| lightbox--group | Denotes a group of lightbox image elements. For example, a slideshow. |
| inline-popup--[width] | Sets the max-width of an inline popup or modal popup. Values are the same as breakpoints. |
| inline-popup__header | Container for the inline popup's header. Should be added to a div. |
| inline-popup__content | Container for the inline popup's content. Should be added to a div. |
| inline-popup-disclaimer | Container for the inline popup's disclaimer. Should be added to a div. |
| modal-popup | Background for modal content. Used in conjunction with the "inline-popup" class. |
| modal-popup__actions | Container for the modal popup's actions (e.g., "Close" button). Should be added to a div. |
| modal-popup--progress-bar | Denotes a "progress bar" modal. |
| modal-popup--spinner | Denotes a "spinner" modal. |
| modal-popup-close | Close button for modal. |
| mfp-content | Magnific class for primary lightbox container. Added to a div. |
| mfp-figure | Magnific class for lightbox content container. Added to a div. |
| mfp-img | Magnific class for lightbox image. Added to an img. |
| mfp-bottom-bar | Magnific class for lightbox title, description, and counter container. Added to a div. |
| mfp-title | Magnific class for lightbox title and description. Added to a div. |
| mfp-caption | Magnific class for lightbox caption. Added to a div. |
| mfp-action | Magnific class for lightbox action text. Added to a div. |
| mfp-counter | Magnific class for lightbox counter container. Added to a div. |
| mfp-close | Magnific class for close button. Added to a button. |
| mfp-arrow | Magnific class for left/right arrows. Added to a button. |
| mfp-arrow-left | Magnific class for left arrow. Added to a button. |
| mfp-arrow-right | Magnific class for right arrow. Added to a button. |