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="Title type float">
	<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="Title type inside">
	<img src="http://viblo.framgia.vn/uploads/images/88b619b41455f283cb5075fb69ba80148635911a//e6b03bbdc1c74657763b49de8d77e539f376fceb.jpg" alt="" />
</a>
<a id="single_3" href="http://viblo.framgia.vn/uploads/images/88b619b41455f283cb5075fb69ba80148635911a//e6b03bbdc1c74657763b49de8d77e539f376fceb.jpg" title="Title type outside">
	<img src="http://viblo.framgia.vn/uploads/images/88b619b41455f283cb5075fb69ba80148635911a//e6b03bbdc1c74657763b49de8d77e539f376fceb.jpg" alt="" />
</a>
<a id="single_4" href="http://viblo.framgia.vn/uploads/images/88b619b41455f283cb5075fb69ba80148635911a//e6b03bbdc1c74657763b49de8d77e539f376fceb.jpg" title="Title type over">
	<img src="http://viblo.framgia.vn/uploads/images/88b619b41455f283cb5075fb69ba80148635911a//e6b03bbdc1c74657763b49de8d77e539f376fceb.jpg" alt="" />
</a>

CSS

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

JavaScript

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

$("#single_2").fancybox({
    helpers : {
        title : {
            type : 'inside'
        }
    }
});

$("#single_3").fancybox({
    helpers : {
        title : {
            type : 'outside'
        }
    }
});

$("#single_4").fancybox({
    helpers : {
        title : {
            type : 'over'
        }
    }
});