Responsive Lightbox

gistfile1.html

<!-- Include the following snippets in the "Custom CSS and JS" section of Sitecore -->
<!-- In the "Vendor CSS" box: -->
<link href="/content/magnific-popup.css" type="text/css" rel="stylesheet">
<!-- In the "Custom JS" box: -->
<script src="/scripts/jquery.magnific-popup.min.js"></script>

<!-- For single images: -->

<script>
    $(document).ready(function() {
        $('.image-lightbox').magnificPopup({ type: 'image' });
    });
</script>
<p><a href="/path/to/image.jpg" class="image-lightbox">Lightbox Image Test</a></p>

<!-- For image galleries: -->

<script>
    $(document).ready(function() {
        $('.gallery-lightbox').magnificPopup({ type: 'image', gallery:{ enabled:true } });
    });
</script>
<p><a href="/path/to/image-1.jpg" class="gallery-lightbox">Lightbox Gallery Test</a><br>
<a href="/path/to/image-2.jpg" class="gallery-lightbox">Lightbox Gallery Test</a>
<a href="/path/to/image-3.jpg" class="gallery-lightbox">Lightbox Gallery Test</a></p>

<!-- For YouTube videos: -->
<!-- Note that you need to paste the YouTube video ID (the "lFZB-jd1Yks" in the sample below)
into both the JavaScript function for it to function correctly. -->

<script>
    $(document).ready(function() {
        $('.youtube-lightbox').magnificPopup({
            type: 'iframe',
            iframe: { patterns: { youtube: { src: '//www.youtube.com/embed/lFZB-jd1Yks?autoplay=1&rel=0' } } }
        });
    });
</script>
<p><a href="https://www.youtube.com/watch?v=lFZB-jd1Yks" class="youtube-lightbox">Lightbox YouTube Test</a></p>

<!-- If you need to have multiple instances of different videos (or single images and galleries) on a single page,
you need to duplicate the "magnificPopup" function and use unique class names for each instance. ie: -->

<script>
    $(document).ready(function() {
        $('.youtube-lightbox-1').magnificPopup({
            type: 'iframe',
            iframe: { patterns: { youtube: { src: '//www.youtube.com/embed/lFZB-jd1Yks?autoplay=1&rel=0' } } }
        });
        $('.youtube-lightbox-2').magnificPopup({
            type: 'iframe',
            iframe: { patterns: { youtube: { src: '//www.youtube.com/embed/XYmIpPvewZ0?autoplay=1&rel=0' } } }
        });
        $('.youtube-lightbox-3').magnificPopup({
            type: 'iframe',
            iframe: { patterns: { youtube: { src: '//www.youtube.com/embed/_TXxn3wQq9c?autoplay=1&rel=0' } } }
        });
    });
</script>
<p><a href="https://www.youtube.com/watch?v=lFZB-jd1Yks" class="youtube-lightbox-1">Lightbox YouTube Test</a></p>
<p><a href="https://www.youtube.com/watch?v=XYmIpPvewZ0" class="youtube-lightbox-2">Lightbox YouTube Test</a></p>
<p><a href="https://www.youtube.com/watch?v=_TXxn3wQq9c" class="youtube-lightbox-3">Lightbox YouTube Test</a></p>

<!-- For inline content: -->

<script>
    $(document).ready(function() {
        $('.open-popup-link').magnificPopup({ type:'inline', midClick: true, closeBtnInside: true });
    });
</script>
<p class="action-button"><a class="open-popup-link" href="#the-popup-id"><span>Read More</span></a></p>
<div id="the-popup-id" class="mfp-popup mfp-hide">
    <h2>The popup content.</h2>
    <p>Donec id elit non mi porta gravida at eget metus.</p>
</div>

<!-- Full documentation at: http://dimsemenov.com/plugins/magnific-popup/ -->