JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css"
/>
</head>
<body>
<div>
<a
data-fancybox="gallery"
data-src="https://lipsum.app/id/2/1024x768"
data-caption="Optional caption,<br />that can contain <em>HTML</em> code"
>
<img src="https://lipsum.app/id/2/200x150" />
</a>
<a data-fancybox="gallery" data-src="https://lipsum.app/id/3/1024x768">
<img src="https://lipsum.app/id/3/200x150" />
</a>
<a data-fancybox="gallery" data-src="https://lipsum.app/id/4/1024x768">
<img src="https://lipsum.app/id/4/200x150" />
</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
<script>
Fancybox.bind('[data-fancybox="gallery"]', {
Toolbar: {
items: {
facebook: {
tpl: '<button class="f-button"><svg><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg></button>',
click: () => {
window.open(
"https://www.facebook.com/sharer/sharer.php?u=" +
encodeURIComponent(window.location.href) +
"&t=" +
encodeURIComponent(document.title),
"",
"left=0,top=0,width=600,height=300,menubar=no,toolbar=no,resizable=yes,scrollbars=yes"
);
},
},
twitter: {
tpl: '<button class="f-button"><svg><path stroke="none" d="M0 0h24v24H0z"/><path d="M22 4.01c-1 .49-1.98.689-3 .99-1.121-1.265-2.783-1.335-4.38-.737S11.977 6.323 12 8v1c-3.245.083-6.135-1.395-8-4 0 0-4.182 7.433 4 11-1.872 1.247-3.739 2.088-6 2 3.308 1.803 6.913 2.423...