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 id="single_1" href="http://viblo.framgia.vn/uploads/images/88b619b41455f283cb5075fb69ba80148635911a//e6b03bbdc1c74657763b49de8d77e539f376fceb.jpg" title="No effect">
	<img src="http://viblo.framgia.vn/uploads/images/88b619b41455f283cb5075fb69ba80148635911a//e6b03bbdc1c74657763b49de8d77e539f376fceb.jpg" alt="" />
</a>
<a id="single_2" href="http://viblo.framgia.vn/uploads/images/88b619b41455f283cb5075fb69ba80148635911a//e6b03bbdc1c74657763b49de8d77e539f376fceb.jpg" title="Elastic effect">
	<img src="http://viblo.framgia.vn/uploads/images/88b619b41455f283cb5075fb69ba80148635911a//e6b03bbdc1c74657763b49de8d77e539f376fceb.jpg" alt="" />
</a>

CSS

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

JavaScript

$("#single_1").fancybox({
    openEffect : 'none',
    closeEffect	: 'none',
    helpers: {
        title : {
            type : 'float'
        }
    }
});

$("#single_2").fancybox({
    openEffect	: 'elastic',
    closeEffect	: 'elastic',
});