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 { horizontalScroller } from "../../routes/common/horizontal-scroller/horizontal-scroller.js";
import { htmlEscape } from "escape-goat";
import { PathFilePointer } from "@sealcode/file-manager";
const component_arguments = {
title: new ComponentArguments.ShortText(),
@ -45,28 +46,27 @@ export class HorizontalGallery extends Component<typeof component_arguments> {
data-controller="glightbox"
>
{horizontalScroller({
elements: (images || []).map((image) => (
elements: (images || []).map(({ image, caption, alt }) => (
<>
<div
class="image-wrapper"
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",
container: {
width: 800,
height: 500,
objectFit: "contain",
},
alt: image.alt,
alt: alt,
})}
</div>
{image.caption?.trim() ? (
<div class="caption">{image.caption}</div>
) : (
""
)}
{caption?.trim() ? <div class="caption">{caption}</div> : ""}
</>
)),
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 = window.GLightbox({
elements: this.pictureWrapperTargets.map((e) => {
const img = e.querySelector("img");
elements: this.pictureWrapperTargets.map((wrapper) => {
const img = wrapper.querySelector("img");
return {
type: "image",
href: img.getAttribute("src"),
description: e.getAttribute("data-glightbox-caption"),
href:
wrapper.getAttribute("data-glightbox-big-image") ||
img.getAttribute("src"),
description: wrapper.getAttribute("data-glightbox-caption"),
alt: img.getAttribute("alt") || "",
};
}) as any,