Magnific-Popup ¶

1. Requirements
2. Installation
3. Resources

Magnific Popup is a responsive jQuery lightbox plugin that is focused on performance and providing best experience for user with any device (Zepto.js compatible).

Donation: Pagseguro, PayPal

Requirements ¶

Installation ¶

Link:

<a class="test-popup-link" href="http://farm9.staticflickr.com/8241/8589392310_7b6127e243_b.jpg">Open popup</a>
<?php
$this->widget("ext.magnific-popup.EMagnificPopup", array('target' => '.test-popup-link'));
?>

YouTube:

<a href="www.youtube.com/watch?v=qObzgUfCl28" id="video">YouTube</a>
<?php
$this->widget("ext.magnific-popup.EMagnificPopup", array(
'target' => '#video',
'type' => 'iframe',
));
?>

Gallery - One link:

<a class="test-galery-link" href="http://farm9.staticflickr.com/8242/8558295633_f34a55c1c6_b.jpg"><img src="http://farm9.staticflickr.com/8242/8558295633_f34a55c1c6_s.jpg" width="75" height="75" /></a>
<?php
$this->widget("ext.magnific-popup.EMagnificPopup", array(
    'target' => '.test-galery-link',
    'options' => array(
        'gallery' => array(
            'enabled' => true,
        ),
        'items' => array(
            array('src' => 'http://farm9.staticflickr.com/8242/8558295633_f34a55c1c6_b.jpg'),
            array('src' => 'http://farm9.staticflickr.com/8382/8558295631_0f56c1284f_b.jpg'),
            array('src' => 'http://farm9.staticflickr.com/8225/8558295635_b1c5ce2794_b.jpg'),
            array('src' => 'http://farm9.staticflickr.com/8383/8563475581_df05e9906d_b.jpg'),
            array('src' => 'http://farm9.staticflickr.com/8235/8559402846_8b7f82e05d_b.jpg'),
        ),
    ),
));
?>

Galley - Multiple links:

<?php
$this->beginWidget("ext.magnific-popup.EGalleryMagnificPopup", array(
    'galleryOptions' => array(
        'preload' => array(0, 3)
    ),
));
?>
<a href="http://farm9.staticflickr.com/8242/8558295633_f34a55c1c6_b.jpg" title="The Cleaner"><img src="http://farm9.staticflickr.com/8242/8558295633_f34a55c1c6_s.jpg" width="75" height="75" /></a>
<a href="http://farm9.staticflickr.com/8382/8558295631_0f56c1284f_b.jpg" title="Winter Dance"><img src="http://farm9.staticflickr.com/8382/8558295631_0f56c1284f_s.jpg" width="75" height="75" /></a>
<a href="http://farm9.staticflickr.com/8225/8558295635_b1c5ce2794_b.jpg" title="The Uninvited Guest"><img src="http://farm9.staticflickr.com/8225/8558295635_b1c5ce2794_s.jpg" width="75" height="75" /></a>
<a href="http://farm9.staticflickr.com/8383/8563475581_df05e9906d_b.jpg" title="Oh no, not again!"><img src="http://farm9.staticflickr.com/8383/8563475581_df05e9906d_s.jpg" width="75" height="75" /></a>
<a href="http://farm9.staticflickr.com/8235/8559402846_8b7f82e05d_b.jpg" title="Swan Lake"><img src="http://farm9.staticflickr.com/8235/8559402846_8b7f82e05d_s.jpg" width="75" height="75" /></a>
<a href="http://farm9.staticflickr.com/8235/8558295467_e89e95e05a_b.jpg" title="The Shake"><img src="http://farm9.staticflickr.com/8235/8558295467_e89e95e05a_s.jpg" width="75" height="75" /></a>
<a href="http://farm9.staticflickr.com/8378/8559402848_9fcd90d20b_b.jpg" title="Who's that, mommy?"><img src="http://farm9.staticflickr.com/8378/8559402848_9fcd90d20b_s.jpg" width="75" height="75" /></a>
<?php $this->endWidget(); ?>

Resources ¶

• Github repo
• Last Version Magnific-Popup.zip