-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathsample.html
22 lines (18 loc) · 1.51 KB
/
sample.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="ja" itemscope itemtype="http://schema.org/WebPage">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<script async src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
<style>.modal-content {background-color: unset;} #LightboxCanvas{max-width:100%; max-height:100%;}</style>
</head>
<body>
<h2 class="text-center mt-4">Bootstrap Lightbox Sample</h2>
<h5 class="text-center mb-4">Lightbox for Boostrap 5 environment</h5>
<p class="text-center">
<a data-modal="bs-lightbox" href="https://avalon-studio.work/wp-content/uploads/winter-camping.jpg"><img src="https://avalon-studio.work/wp-content/uploads/winter-camping-1024x512.jpg" width="256" height="128" border="0"></a>
<a data-modal="bs-lightbox" href="https://avalon-studio.work/wp-content/uploads/bay-bridge-with-treasure-island.jpg"><img src="https://avalon-studio.work/wp-content/uploads/bay-bridge-with-treasure-island-1024x512.jpg" width="256" height="128" border="0"></a>
</p>
<script async type="text/javascript" src="https://cdn.jsdelivr.net/gh/avalon-studio/Bootstrap-Lightbox@latest/bs5lightbox.js" crossorigin="anonymous"></script>
</body>
</html>