JSFiddle - React, Tailwind, and code Playground

by martinba

HTML

<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">
<div id="images">
    <a href="http://cambelt.co/icon/avatar/500x500.jpg" target="_blank" rel="a"><img src="http://cambelt.co/icon/avatar/50x50.jpg" alt="" /></a>
    <a href="http://cambelt.co/icon/link/500x500.jpg" target="_blank" rel="a"><img src="http://cambelt.co/icon/link/50x50.jpg" alt="" /></a>
    <a href="http://cambelt.co/icon/bookmark/500x500.jpg" target="_blank" rel="a"><img src="http://cambelt.co/icon/bookmark/50x50.jpg" alt="" /></a>
    <a href="http://cambelt.co/icon/bubble/500x500.jpg" target="_blank" rel="a"><img src="http://cambelt.co/icon/bubble/50x50.jpg" alt="" /></a>
    <a href="http://cambelt.co/icon/info/500x500.jpg" target="_blank" rel="a"><img src="http://cambelt.co/icon/info/50x50.jpg" alt="" /></a>
</div>
<button type="button" onclick="fancybox_init()">Init Fancybox</button>
<button type="button" onclick="fancybox_destroy()">Destroy Fancybox</button>

JavaScript

function fancybox_init()
{
    $("#images>a").removeAttr('target').fancybox();   
}

function fancybox_destroy()
{
    $("#images>a").unbind('fancybox');
}