JSFiddle - React, Tailwind, and code Playground

by Nguyen Van Giang

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" title="Sample title 1" href="http://viblo.framgia.vn/uploads/images/88b619b41455f283cb5075fb69ba80148635911a//ce95e00f5060d0ae94b2d6f418fb9fe6b4a10db1.jpg"><img src="http://viblo.framgia.vn/uploads/images/88b619b41455f283cb5075fb69ba80148635911a//ce95e00f5060d0ae94b2d6f418fb9fe6b4a10db1.jpg" alt=""/></a>

<a rel="gallery" class="fancybox" title="Sample title 2" href="http://viblo.framgia.vn/uploads/images/88b619b41455f283cb5075fb69ba80148635911a//e6b03bbdc1c74657763b49de8d77e539f376fceb.jpg"><img src="http://viblo.framgia.vn/uploads/images/88b619b41455f283cb5075fb69ba80148635911a//e6b03bbdc1c74657763b49de8d77e539f376fceb.jpg" alt=""/></a>

CSS

img {
    width: 200px;
    height: 200px;
}

JavaScript

$(".fancybox")
        .attr('rel', 'gallery')
        .fancybox();