JSFiddle - React, Tailwind, and code Playground

by dfsq

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() {
    $(document).unbind('click.fb-start');
    $("#images>a").attr('target', '_blank');
}