JSFiddle - React, Tailwind, and code Playground

by DannyEnglander

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 href="#test" class="fancybox " rel="gallery">
    <img src="http://lorempixel.com/g/640/300/technics/2/">
</a>

<div id="test" style="display:none;">
    <h2>slide 1</h2> 
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque blandit, mi sed sollicitudin hendrerit, elit elit tristique velit, ut sagittis urna dolor non metus. Fusce viverra lacus sit amet urna porttitor eu mollis massa hendrerit.
</p>
     <img src="http://lorempixel.com/g/640/300/technics/2/">
         
         <h4>Random content foo</h4>
</div>

<a href="#test2" class="fancybox" rel="gallery" style="display:none;"></a>

<div id="test2" style="display:none;">
     <h2>slide 2</h2> 
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque blandit, mi sed sollicitudin hendrerit, elit elit tristique velit, ut sagittis urna dolor non metus. Fusce viverra lacus sit amet urna porttitor eu mollis massa hendrerit.
</p>
     <img src="http://lorempixel.com/g/640/300/technics/4/">
         
         <h4>Random content bar</h4>
</div>

CSS

.foo {
    font-family: verdana;
}

.foo img {
    width: 100% !important;
    height: auto;
}

h2 {
    font-size: 2em;
}

p {
    margin: 0 0 10px 0;
}

.hidden {
    display:none;
}

JavaScript

$(".fancybox").fancybox({
    openEffect  : 'none',
    closeEffect : 'none',
    maxWidth  : 700,
    wrapCSS   : 'foo',
    afterLoad   : function() {
        this.content = this.content.html();
    }
});