library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-14 11:14:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add photoswipe

Browse Source
This commit is contained in:
Jeremy Thomas 2024-06-11 03:03:31 +01:00
parent 6cebea9ce2
commit b84d16890f
2 changed files with 19 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
docs/assets/javascript/shop.js
View File

@ -533,11 +533,22 @@ document.addEventListener("DOMContentLoaded", () => {
if (images) { if (images) {
images.forEach(img => { images.forEach(img => {
const $figure = El("shop-product-image image is-square", "figure"); const $figure = El("shop-product-image image is-square", "a");
$figure.href = img.url;
$figure.dataset.pswpHeight = img.height;
$figure.dataset.pswpWidth = img.width;
$figure.target = "_blank";
const $img = document.createElement("img"); const $img = document.createElement("img");
$img.src = img.url; $img.src = img.url;
$figure.appendChild($img); $figure.appendChild($img);
$carousel.appendChild($figure); $carousel.appendChild($figure);
const lightbox = new window.PhotoSwipeLightbox({
gallery: '.shop-product-image',
pswpModule: window.PhotoSwipe
});
lightbox.init();
}); });
$images.appendChild($carousel); $images.appendChild($carousel);

9
docs/shop.html
View File

@ -9,6 +9,8 @@ breadcrumb:
- shop - shop
--- ---
<link rel="stylesheet" type="text/css" href="https://unpkg.com/photoswipe@5.4.4/dist/photoswipe.css">
<style type="text/css"> <style type="text/css">
:root { :root {
--shop-duration: 500ms; --shop-duration: 500ms;
@ -287,8 +289,9 @@ breadcrumb:
.shop-product-image { .shop-product-image {
flex-shrink: 0; flex-shrink: 0;
cursor: pointer; cursor: zoom-in;
overflow: hidden; overflow: hidden;
outline: none !important;
} }
.shop-product-image img { .shop-product-image img {
@ -298,7 +301,7 @@ breadcrumb:
} }
.shop-product-images:hover img { .shop-product-images:hover img {
transform: scale(1.1); transform: scale(1.04);
} }
.shop-product-heading { .shop-product-heading {
@ -496,4 +499,6 @@ breadcrumb:
</div> </div>
<script src="https://unpkg.com/@shopify/storefront-api-client@1.0.0/dist/umd/storefront-api-client.min.js"></script> <script src="https://unpkg.com/@shopify/storefront-api-client@1.0.0/dist/umd/storefront-api-client.min.js"></script>
<script src="https://unpkg.com/photoswipe@5.4.4/dist/umd/photoswipe.umd.min.js"></script>
<script src="https://unpkg.com/photoswipe@5.4.4/dist/umd/photoswipe-lightbox.umd.min.js"></script>
<script type="text/javascript" src="{{ site.url }}/assets/javascript/shop.js"></script> <script type="text/javascript" src="{{ site.url }}/assets/javascript/shop.js"></script>