Add photoswipe for photo enlarge on click
This commit is contained in:
parent
0545542026
commit
77dd363db7
SSH key fingerprint:
SHA256:HDYu2Pm4/TmSX8GBwV49UvFWr1Ljg8XlHxKeCpjJpOk
2 changed files with 116 additions and 25 deletions
|
|
@ -10,6 +10,95 @@
|
||||||
<link rel="stylesheet" href="{{ get_url(path='fonts.css') }}">
|
<link rel="stylesheet" href="{{ get_url(path='fonts.css') }}">
|
||||||
<link rel="stylesheet" href="{{ get_url(path='forkawesome.css') }}">
|
<link rel="stylesheet" href="{{ get_url(path='forkawesome.css') }}">
|
||||||
<link rel="stylesheet" href="{{ get_url(path='main.css') }}">
|
<link rel="stylesheet" href="{{ get_url(path='main.css') }}">
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/photoswipe@5.3.7/dist/photoswipe.css">
|
||||||
|
<script type="module">
|
||||||
|
import PhotoSwipeLightbox from "https://unpkg.com/photoswipe@5.3.7/dist/photoswipe-lightbox.esm.js";
|
||||||
|
import PhotoSwipe from "https://unpkg.com/photoswipe@5.3.7/dist/photoswipe.esm.js";
|
||||||
|
const lightbox = new PhotoSwipeLightbox({
|
||||||
|
gallery: '.instant a',
|
||||||
|
pswpModule: PhotoSwipe
|
||||||
|
});
|
||||||
|
|
||||||
|
// use <picture> instead of <img>
|
||||||
|
lightbox.on('contentLoad', (e) => {
|
||||||
|
const { content, isLazy } = e;
|
||||||
|
|
||||||
|
const avifSrc = content.data.element.dataset.pswpAvif;
|
||||||
|
const webpSrc = content.data.element.dataset.pswpWebp;
|
||||||
|
if (avifSrc || webpSrc) {
|
||||||
|
// prevent to stop the default behavior
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
content.pictureElement = document.createElement('picture');
|
||||||
|
|
||||||
|
if (avifSrc) {
|
||||||
|
const sourceAvif = document.createElement('source');
|
||||||
|
sourceAvif.srcset =avifSrc;
|
||||||
|
sourceAvif.type = 'image/avif';
|
||||||
|
content.pictureElement.appendChild(sourceAvif);
|
||||||
|
}
|
||||||
|
if (webpSrc) {
|
||||||
|
const sourceWebp = document.createElement('source');
|
||||||
|
sourceWebp.srcset = webpSrc;
|
||||||
|
sourceWebp.type = 'image/webp';
|
||||||
|
content.pictureElement.appendChild(sourceWebp);
|
||||||
|
}
|
||||||
|
|
||||||
|
const source = document.createElement('source');
|
||||||
|
source.srcset = content.data.src;
|
||||||
|
if (/.png$/.test(content.data.src)) {
|
||||||
|
source.type = 'image/png';
|
||||||
|
} else {
|
||||||
|
source.type = 'image/jpeg';
|
||||||
|
}
|
||||||
|
content.pictureElement.appendChild(source);
|
||||||
|
|
||||||
|
content.element = document.createElement('img');
|
||||||
|
content.element.src = content.data.src;
|
||||||
|
content.element.setAttribute('alt', '');
|
||||||
|
content.element.className = 'pswp__img';
|
||||||
|
content.pictureElement.appendChild(content.element);
|
||||||
|
|
||||||
|
content.state = 'loading';
|
||||||
|
|
||||||
|
if (content.element.complete) {
|
||||||
|
content.onLoaded();
|
||||||
|
} else {
|
||||||
|
content.element.onload = () => {
|
||||||
|
content.onLoaded();
|
||||||
|
};
|
||||||
|
|
||||||
|
content.element.onerror = () => {
|
||||||
|
content.onError();
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
// by default PhotoSwipe appends <img>,
|
||||||
|
// but we want to append <picture>
|
||||||
|
lightbox.on('contentAppend', (e) => {
|
||||||
|
const { content } = e;
|
||||||
|
if (content.pictureElement && !content.pictureElement.parentNode) {
|
||||||
|
e.preventDefault();
|
||||||
|
content.slide.container.appendChild(content.pictureElement);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// for next/prev navigation with <picture>
|
||||||
|
// by default PhotoSwipe removes <img>,
|
||||||
|
// but we want to remove <picture>
|
||||||
|
lightbox.on('contentRemove', (e) => {
|
||||||
|
const { content } = e;
|
||||||
|
if (content.pictureElement && content.pictureElement.parentNode) {
|
||||||
|
e.preventDefault();
|
||||||
|
content.pictureElement.remove();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
lightbox.init();
|
||||||
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
|
|
|
||||||
|
|
@ -1,48 +1,50 @@
|
||||||
|
{% set avif_src = src |
|
||||||
|
replace(from=".jpg",to=".avif") |
|
||||||
|
replace(from=".png",to=".avif") %}
|
||||||
|
|
||||||
{% set orig_thumb = src %}
|
{% set orig_thumb = src %}
|
||||||
{% if thumb %}
|
{% if thumb %}
|
||||||
{% set orig_thumb = src |
|
{% set orig_thumb = src |
|
||||||
replace(from=".jpg",to=thumb~".jpg") |
|
replace(from=".jpg",to=thumb~".jpg") |
|
||||||
replace(from=".png",to=thumb~".png") %}
|
replace(from=".png",to=thumb~".png") %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% set webp_thumb = thumb |
|
{% set avif_thumb = orig_thumb |
|
||||||
replace(from=".jpg",to=".webp") |
|
replace(from=".jpg",to=".avif") |
|
||||||
replace(from=".png",to=".webp") %}
|
replace(from=".png",to=".avif") %}
|
||||||
{% set avif_thumb = webp_thumb |
|
|
||||||
replace(from=".webp",to=".avif") %}
|
|
||||||
|
|
||||||
{% set src_url = get_url(path=src) %}
|
{% set src_url = get_url(path=src) %}
|
||||||
|
{% set avif_url = get_url(path=avif_src) %}
|
||||||
|
|
||||||
{% set thumb_url = get_url(path=orig_thumb) %}
|
{% set thumb_url = get_url(path=orig_thumb) %}
|
||||||
{% set webp_url = get_url(path=webp_thumb) %}
|
{% set avif_thumb_url = get_url(path=avif_thumb) %}
|
||||||
{% set avif_url = get_url(path=avif_thumb) %}
|
|
||||||
|
|
||||||
{% set img_data = get_image_metadata(path=src) %}
|
{% set img_data = get_image_metadata(path=src) %}
|
||||||
|
{% set avif_data = true %}
|
||||||
|
|
||||||
{% set thumb_data = get_image_metadata(path=orig_thumb) %}
|
{% set thumb_data = get_image_metadata(path=orig_thumb) %}
|
||||||
{% set avif_data = get_image_metadata(path=avif_thumb,allow_missing=true) %}
|
{% set avif_thumb_data = true %}
|
||||||
{% set webp_data = get_image_metadata(path=webp_thumb,allow_missing=true) %}
|
|
||||||
<div class="box"
|
<div class="box"
|
||||||
style="--w:{{thumb_data.width}};--h:{{thumb_data.height}};"
|
style="--w:{{thumb_data.width}};--h:{{thumb_data.height}};"
|
||||||
>
|
>
|
||||||
<figure class="instant"
|
<figure
|
||||||
|
class="instant"
|
||||||
style="max-width:calc({{thumb_data.width}}px + 4vw)"
|
style="max-width:calc({{thumb_data.width}}px + 4vw)"
|
||||||
itemprop="associatedMedia" itemscope
|
itemprop="associatedMedia" itemscope
|
||||||
itemtype="http://schema.org/ImageObject"
|
itemtype="http://schema.org/ImageObject"
|
||||||
>
|
>
|
||||||
<picture
|
<a href="{{src_url}}" itemprop="contentUrl"
|
||||||
|
data-pswp-width="{{img_data.width}}" data-pswp-height="{{img_data.height}}"
|
||||||
class="thumb {%if avif_data %} avif{%endif%}{%if webp_data %} webp{%endif%}"
|
{%if avif_data %}data-pswp-avif="{{avif_url}}"{%endif%}
|
||||||
data-size="{{img_data.width}}x{{img_data.height}}"
|
|
||||||
>
|
>
|
||||||
{% if avif_data %}
|
<picture class="thumb">
|
||||||
<source srcset="{{avif_url}}" type="image/avif">
|
{% if avif_thumb_data %}
|
||||||
{% endif %}
|
<source srcset="{{avif_thumb_url}}" type="image/avif">
|
||||||
{% if webp_data %}
|
|
||||||
<source srcset="{{webp_url}}" type="image/webp">
|
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<source srcset="{{thumb_url}}" type="image/{{thumb_data.format}}">
|
<source srcset="{{thumb_url}}" type="image/{{thumb_data.format}}">
|
||||||
<img itemprop="thumbnail" src="{{thumb_url}}"
|
<img itemprop="thumbnail" src="{{thumb_url}}"
|
||||||
{% if caption %} alt="{{caption | markdown | striptags}}{% endif %}"/>
|
{% if caption %} alt="{{caption | markdown | striptags}}{% endif %}"/>
|
||||||
</picture>
|
</picture>
|
||||||
<a href="/{{src_url}}" itemprop="contentUrl"></a>
|
</a>
|
||||||
{% if caption %}
|
{% if caption %}
|
||||||
<figcaption>
|
<figcaption>
|
||||||
{{ caption | markdown | safe }}
|
{{ caption | markdown | safe }}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue