jqueryのLightBox、FancyBoxを導入してみる

2021年12月31日2021年12月31日 Bluebear-IO 525 Views 0 Comments FancyBox, lightbox

jqueryのLightBox、FancyBoxを導入してみる。

執筆現在FancyBox３は終了し、v4が最新となっている

CSSとjsを読み込みして導入

<!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@4.0/dist/fancybox.css" />
</head>
<body>
<!-- Content -->

<a data-fancybox data-src="拡大したときに表示させたい画像URL">
 <img src="画像URL" />
</a>

<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script>
</body>
</html>