Lightbox and popups

Containers documentation

  1. Home
  2. Containers
  3. Lightbox and popups

Lightbox general settings

Examples

Installation

<link rel='stylesheet' href='../../HTWF/scripts/magnific-popup.css'>
<script src='../../HTWF/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' });
Open lightbox
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 (../../HTWF/css/animations.css)

Animations documentation here
Fade Left Show Scale Pulse Horizontal Rotate 20
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.
Global lightbox CSS You can convert every image link automatically to lightbox with class lightbox-global. Add this class to the container of the images, for convert all the images of a page add the class to the body. The links must not have the class lightbox.
Deep linking URL
Grid and masonry lists
To open the lightbox of a grid or masonry item on page load use the url www.your-site.com?lightbox=list-123. Replace 123 with item number you want to open. If you have multiple grids use the url www.your-site.com?lightbox=list-123&id=YOUR-ID. Replace YOUR-ID with the ID of the container of the grid list you want to open. Only image box components are supported.
Sliders
To open the lightbox of a slider item on page load use the url www.your-site.com?lightbox=slide-123. Replace 123 with slide number you want to open. If you have multiple sliders use the url www.your-site.com?lightbox=slide-123&id=YOUR-ID. Replace YOUR-ID with the ID of the container of the sliders you want to open. Only image box components are supported.
Single item
To open a single item by id use the url www.your-site.com?lightbox=YOUR-ID
Supported components: image-box, buttons, custom lightbox with class box-lightbox and all objects with class lightbox.

Complete documentation and external resources

Documentation Plugin website Github page