JSFiddle - React, Tailwind, and code Playground

by Mahendran Sakkarai

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.css">
<div class="project-parent">
    <!-- Parent is always present -->
    <ul class="project-media">
        <!-- Loaded by Ajax request -->
        <li>
            <a href="http://lorempixel.com/400/200/sports" class="lightbox" data-fancybox-group="group-1234">
                <img src="http://lorempixel.com/400/200/sports" />
            </a>
        </li>
        <li>
            <a href="http://lorempixel.com/400/200/city" class="lightbox" data-fancybox-group="group-1234">
                <img src="http://lorempixel.com/400/200/city" />
            </a>
        </li>
    </ul>
</div>

CSS

.project-media a {
    display: block;
}
.project-media{
    list-style-type: none;
    padding: 0;
}

JavaScript

$('div.project-parent').on('click', '.lightbox', function () {
    var group = $(this).data('fancybox-group'), images;
    if(group !== undefined){
        images = $('[data-fancybox-group="'+ group +'"]').map(function(){
            return this.href;
        });
    }else{
        images = this.href;   
    }
    $.fancybox( images, {type: 'image'});
    return false;
});