Component

Lightbox and popups

LIGHTBOX INTRODUCTION


Examples


Installation

<link rel='stylesheet' href='../scripts/magnific-popup.css'>
<script src='../scripts/jquery.magnific-popup.min.js'></script> 

Usage

<a class="lightbox" href="http://www.framework-y.com/images/thumb.png"> ... </a>
<a class="lightbox" data-lightbox-anima="show-scale" href="http://www.framework-y.com/images/thumb.png"> ... </a>
<a id="lightbox-demo" href="http://www.framework-y.com/images/thumb.png"> ... </a>
<script>
    $(document).ready(function () {
        $('#lightbox-demo').magnificPopup({
            type: 'image'
        });
    });
</script>
<div onclick="$.magnificPopup.open({ items: { src: 'http://www.framework-y.com/images/thumb.png' }, type: 'image' });"></div>
<!-- EXAMPLE CUSTOM HTML LIGHTBOX -->
<div id="demo-id" class="box-lightbox" data-trigger="load" data-lightbox-anima="fade-top"> ... </div>
<!-- EXAMPLE YOUTUBE VIDEO LIGHTBOX -->
<div class="box-lightbox" data-trigger="load" data-lightbox-anima="fade-left" data-link="https://www.youtube.com/watch?v=bpqhStV2_rc"> ... </div>
<!-- EXAMPLE CUSTOM HTML LIGHTBOX -->
<a class="lightbox-trigger" data-trigger="scroll" href="#demo-id"></a>
<div id="demo-id" class="box-lightbox" data-trigger="scroll" data-lightbox-anima="fade-top"> ... </div>
<!-- EXAMPLE YOUTUBE VIDEO LIGHTBOX -->
<a class="lightbox-trigger" data-trigger="scroll" href="#demo-id"></a>
<div id="demo-id" class="box-lightbox" data-trigger="scroll" data-lightbox-anima="fade-left" data-link="https://www.youtube.com/watch?v=bpqhStV2_rc"> ... </div>

Main settings

Name Type Description
HTML initialization CSS class Add class lightbox to lightbox link, href attribute is the link (or content) of the lightbox. Example: <a class="lightbox" href="content-link"> ... </a>.
Javascript initialization Javascript To make a link lightbox ready use function $('#target').magnificPopup({ type: 'content-type' });. When link is clicked lightbox is open.
HTML settings Data attribute Most of settings can be passed through data-options attribute: data-options="option:value,option:value, ...". Full options here.
Javascript direct opening Javascript You can open a lightbox directly with Javascript function $.magnificPopup.open({ items: { src: 'content-link' }, type: 'content-type' });

Try it
Animations HTML Add attribute data-lightbox-anima="animation-name" to lightbox object.
Example: <a class="lightbox" href="content-link" data-lightbox-anima="fade-left"> ... </a>.
You can use animations also with <a class="lightbox" href="content-link" data-options="anima:animation-name"> ... </a>.
Animations list available on animation page.
Plugin dependency

This feature require Animations component (../css/animations.css)

Animations documentation here

Try it
Show on load HTML Create a HTML element with class .box-lightbox and data attribute data-trigger="load". You can add settings as usually, like data-options and data-lightbox-anima.

If you want show the custom HTML content you must add also a unique ID
If you want show other content types use the attribute data-link="link youtube or others link".
Use data-click="your-link" to redirect to a new page when user click the box, use data-click-target="_blank" for open in a new window.
Use data-expire="123" to hide the lightbox for 123 days after the first time is showed. Set to 0 for reset.
Show on scroll HTML To show lightbox on page scroll, when user go to a specified area of page, you must add a trigger link with class lightbox-trigger, data attribute data-trigger="scroll" and href="id-lightbox". The trigger link can be hidden but must not use CSS value display:none, after this insert the lightbox element with data attribute data-trigger="scroll" element like examples above.
Youtube and video attributes String If you need to add some attribute to Youtube (or other) link. Use ? instead of &. Example: https://www.youtube.com/watch?v=HIfDatvJbLM?rel=0 rel=0 is the attribute.

Complete documentation and external resources