kuba/strona-czynna
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Glightbox: use big version of the image if available

Browse Source
This commit is contained in:
Kuba Orlik 2026-01-01 21:28:25 +01:00
parent 6874cea8dc
commit d2efb9a160
2 changed files with 15 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/back/jdd-components/horizontal-gallery/horizontal-gallery.jdd.tsx
View File

@ -8,6 +8,7 @@ import type {
import { Component, ComponentArguments, insert_nbsp } from "@sealcode/jdd"; import { Component, ComponentArguments, insert_nbsp } from "@sealcode/jdd";
import { horizontalScroller } from "../../routes/common/horizontal-scroller/horizontal-scroller.js"; import { horizontalScroller } from "../../routes/common/horizontal-scroller/horizontal-scroller.js";
import { htmlEscape } from "escape-goat"; import { htmlEscape } from "escape-goat";
import { PathFilePointer } from "@sealcode/file-manager";
const component_arguments = { const component_arguments = {
title: new ComponentArguments.ShortText(), title: new ComponentArguments.ShortText(),
@ -45,28 +46,27 @@ export class HorizontalGallery extends Component<typeof component_arguments> {
data-controller="glightbox" data-controller="glightbox"
> >
{horizontalScroller({ {horizontalScroller({
elements: (images || []).map((image) => ( elements: (images || []).map(({ image, caption, alt }) => (
<> <>
<div <div
class="image-wrapper" class="image-wrapper"
data-glightbox-target="pictureWrapper" data-glightbox-target="pictureWrapper"
data-glightbox-caption={htmlEscape(image.caption || "")} data-glightbox-caption={htmlEscape(caption || "")}
data-glightbox-big-image={
image instanceof PathFilePointer ? image.getURL() : ""
}
> >
{render_image(image.image, { {render_image(image, {
sizesAttr: "100vw", sizesAttr: "100vw",
container: { container: {
width: 800, width: 800,
height: 500, height: 500,
objectFit: "contain", objectFit: "contain",
}, },
alt: image.alt, alt: alt,
})} })}
</div> </div>
{image.caption?.trim() ? ( {caption?.trim() ? <div class="caption">{caption}</div> : ""}
<div class="caption">{image.caption}</div>
) : (
""
)}
</> </>
)), )),
render: async ({ scroller, markers }) => ( render: async ({ scroller, markers }) => (

10
src/front/controllers/glightbox.stimulus.ts
View File

@ -30,12 +30,14 @@ export default class GlightboxController extends Controller {
]); ]);
this.gallery?.destroy(); this.gallery?.destroy();
this.gallery = window.GLightbox({ this.gallery = window.GLightbox({
elements: this.pictureWrapperTargets.map((e) => { elements: this.pictureWrapperTargets.map((wrapper) => {
const img = e.querySelector("img"); const img = wrapper.querySelector("img");
return { return {
type: "image", type: "image",
href: img.getAttribute("src"), href:
description: e.getAttribute("data-glightbox-caption"), wrapper.getAttribute("data-glightbox-big-image") ||
img.getAttribute("src"),
description: wrapper.getAttribute("data-glightbox-caption"),
alt: img.getAttribute("alt") || "", alt: img.getAttribute("alt") || "",
}; };
}) as any, }) as any,