fritzmg/contao-magnific-popup

Magnific Popup lightbox for Contao

, _(*1)

Contao Magnific Popup

Contao extension to integrate the Magnific Popup overlay., _(*2)

Usage

Simply activate the j_magnific_popup template in your page layout under jQuery. Do not activate j_colorbox or moo_mediabox as well!, _(*3)

The Magnific Popup will work with all links that use the data-lightbox="..." parameter. Of course you can still initialize and manipulate the Magnific Popup via your own JavaScript., _(*4)

Customizing

If you want to use your own custom parameters, simply create your own j_magnific_popup template and insert your custom options there. For example, if you want to enable the zoom feature of Magnific Popup:, _(*5)

  ContaoMagnificPopup.init({
    // put your custom configuration here
    zoom: { enabled: true }
  });

Refer to the Magnific Popup Documentation for all available parameters., _(*6)

Types

By default, the extension defines the type for all Magnific Popup instances as image. You can set any of the types supported by Magnific Popup through several ways:, _(*7)

• through the data-lightbox parameter itself, e.g., _(*8)

  <a href="page.html" data-lightbox="iframe">Page</a>
  

  You can still also define a custom grouping name anywhere in the parameter:, _(*9)

  <a href="page.html" data-lightbox="iframe group1">Page</a>
  

• by using your own Magnific Popup initialisation, _(*10)
• by setting the type globally through the options in your own j_magnific_popup template

Additional Parameters

To support some compatibility with the old lightbox parameters of Contao, you can also define the width and height of the iframe popup like so:, _(*11)

<a href="page.html" data-lightbox="iframe 800 600">Page</a>