JSFiddle - React, Tailwind, and code Playground

by Ritwika Das

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 rel="gallery" class="fancybox" href="http://oi66.tinypic.com/r8b8g0.jpg"><img src="http://oi66.tinypic.com/r8b8g0.jpg" alt=""/></a>

CSS

.fancybox-type-iframe .fancybox-nav {
    width: 60px;       
}

.fancybox-type-iframe .fancybox-nav span {
    visibility: visible;
    opacity: 0.5;
}

.fancybox-type-iframe .fancybox-nav:hover span {
    opacity: 1;
}

.fancybox-type-iframe .fancybox-next {
    right: -60px;
}

.fancybox-type-iframe .fancybox-prev {
    left: -60px;
}

JavaScript

$(".fancybox").fancybox();
   /* .attr('rel', 'gallery')
    .fancybox({
        openEffect  : 'none',
        closeEffect : 'none',
        nextEffect  : 'none',
        prevEffect  : 'none',
        padding     : 0,
        margin      : [20, 60, 20, 60] // Increase left/right margin
    });*/