JSFiddle - React, Tailwind, and code Playground

by sandra v

HTML

<script src="http://pcapr.googlecode.com/svn-history/r75/trunk/script/fancybox/jquery.fancybox-1.3.4.js"></script>
<link rel="stylesheet" href="http://pcapr.googlecode.com/svn-history/r75/trunk/script/fancybox/jquery.fancybox-1.3.4.css">
<span class="test"><img src='http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg'/></span>

<span class="test2"><img src='http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg'/></span>

<span class="test"><img src='http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg'/></span>
    
    <div class='p'>
    <div id="myDivID">together
        <div><img src='http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg'> </div>
    </div>
        </div>
        
            <div class='p'>
    <div id="myDivID2">apart
        <div><img src='http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg'> </div>
    </div>
        </div>

CSS

.p {
   display:none;
}
.test img, .test2 img {
    display: block;
    width: 200px; 
    height; auto;
    float: left;
}

JavaScript

$(".test").fancybox({
        'href'          : '#myDivID',
        'padding'       : 0
});

$(".test").hover(function() {
    $(this).click();
    $("#fancybox-overlay").remove(); //remove the overlay so you can close when hover off.
}, function() {
    $.fancybox.close();
});

$(".test2").fancybox({
        'href'          : '#myDivID2',
        'padding'       : 0
});

$(".test2").hover(function() {
    $(this).click();
    $("#fancybox-overlay").remove(); //remove the overlay so you can close when hover off.
}, function() {
    $.fancybox.close();
});