Magnific Popup

Light and responsive lightbox script with focus on performance.

Plugin Documentation

Usage

JS

copy

<script src="assets/libs/magnific-popup/jquery.magnific-popup.min.js"></script>

CSS

copy

<script src="assets/libs/magnific-popup/magnific-popup.css"></script>

Initialization

copy

<script>
    $(document).on('ready', function () {
        $('.story-video').magnificPopup({
            delegate: '.video',
            type: 'iframe'
        });
    });
</script>

Examples

...
...
copy

<div class="position-relative mb-3 d-inline-block">
    <img src="../html/assets/img/content/about-02.jpg" class="rounded" alt="...">
    <div class="d-inline-block align-middle position-absolute top-50 start-50 translate-middle">
        <a class="popup-social-video video video-btn small" href="https://www.youtube.com/watch?v=C3KRwfj9F8Q">
            <img class="feather text-white" src="../html/assets/img/svg/play.svg" alt="...">
        </a>
    </div>
</div>
You can change the black overlay to primary overlay with replacing class overlay-black to overlay-primary and also you can change the overlay opacity as well with change class overlay-75.