JSFiddle - React, Tailwind, and code Playground

by mstalfoort

HTML

<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">
<script src="https://raw.github.com/jquery/jquery-metadata/master/jquery.metadata.js"></script>
<a class="various" rel="gallery1" href="http://farm9.staticflickr.com/8481/8215602321_69d9939b8b_b.jpg" title="The Trail (Msjunior-Check out my galleries)">
<img src="http://farm9.staticflickr.com/8481/8215602321_69d9939b8b_m.jpg" alt="" /></a>

<a class="various" rel="gallery1" href="http://farm9.staticflickr.com/8200/8220393833_e52cabfe80_b.jpg" title="Trees (Joerg Marx)">
<img src="http://farm9.staticflickr.com/8200/8220393833_e52cabfe80_m.jpg" alt="" /></a>

<a class="various" rel="gallery1" href="http://farm9.staticflickr.com/8200/8207750975_bd288a2a1f_b.jpg" title="Templanza (Chico Team)">
<img src="http://farm9.staticflickr.com/8200/8207750975_bd288a2a1f_m.jpg" alt="" /></a>

<a class="various" rel="gallery1" href="http://farm9.staticflickr.com/8199/8220132885_9e693356e9_b.jpg" title="Misty Tree Orchard (Stanley Zimny)">
<img src="http://farm9.staticflickr.com/8199/8220132885_9e693356e9_m.jpg" alt="" /></a>

<a class="various fancybox.iframe" rel="gallery1" href="http://www.youtube.com/embed/L9szn1QQfas?autoplay=1">Youtube (iframe)</a>

<a class="various" rel="gallery1" href="http://vimeo.com/36031564">Vimeo (iframe)</a>

JavaScript

$(document).ready(function() {
    $(".various").fancybox({
        //maxWidth    : 800,
        //maxHeight   : 600,
        //fitToView   : false,
        //width       : '70%',
        //height      : '70%',
        //autoSize    : false,
        //closeClick  : false,
        openEffect  : 'none',
        closeEffect : 'none',
        helpers : {
            media : {}
        }
    });
});