JSFiddle - React, Tailwind, and code Playground

by Imri Paloja

HTML

<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">
<a class="fancybox" data-title-id="title-1" href="http://i.imgur.com/GhdkYpw.jpg"><img src="http://i.imgur.com/GhdkYpw.jpg" alt=""/></a>
<div id="title-1" class="hidden">
    <a href="http://vimeo.com/60879507">Southpark: Reverse Cowgirl</a>
</div>

<div id="title-2" class="hidden">
    This is <b>2nd title</b>. <a href="http://google.com">Some link</a>
</div>

CSS

.hidden {
 display: none;   
}
.fancybox-title a {
 color: #fff;        
}
body {
 padding: 20px;   
}
img {
    width:200px;
    height:100px;
}

JavaScript

$(".fancybox")
    .attr('rel', 'gallery')
    .fancybox({
        beforeLoad: function() {
            var el, id = $(this.element).data('title-id');

            if (id) {
                el = $('#' + id);
            
                if (el.length) {
                    this.title = el.html();
                }
            }
        }
    });