<lm-preview-image> – Bildeforhåndsvisning / Image preview

Om komponenten

Kanonisk navn

<lm-preview-image>

Synonymer

bildeforhåndsvisning, lightbox, image modal, photo preview, image viewer

Kategori

medieinnhold, dialog

ARIA-mønster

Dialog (Modal) - bildeforhåndsvisningen åpnes som en modal dialog over siden.

Parts

miniatyr, apne-knapp, miniatyr-bilde, miniatyr-tekst, dialog, lukk-knapp, full-bilde, dialog-tekst, metadata, kart, kart-lenke

Native-first-vurdering

Komponenten bruker native <button> og <dialog> for åpning og lukking. Det finnes ingen egen HTML-primitiv for bildeforhåndsvisning utover å kombinere disse med vanlig <img>.

Nettleserstøtte

Bruker native <dialog> og Invoker Commands API (command="show-modal"/"close" + commandfor) for åpning og lukking. Den valgfrie posisjonsvisningen er en vanlig OpenStreetMap-iframe; uten iframe-støtte faller bare kartdelen bort, mens bildevisningen ellers fortsatt fungerer.

Design-tokens

var(--radius-small, ...), var(--font-size-extra-small, ...), var(--caption-overlay-gradient, ...), var(--caption-overlay-text-color, ...), var(--radius-large, ...), var(--shadow-elevated, ...), var(--scrim-color, ...), var(--font-size-small, ...), var(--opacity-muted, ...), var(--border-color, ...)

Sist endret

14. september 2026

Brukt

1 sted

Formål

Generisk bildeprimitiv: viser et miniatyrbilde som åpnes i full størrelse i en dialog. Den kan også vise bildetekst, metadata og en valgfri kartposisjon.

Egner seg for

• Bildevedlegg eller gallerier der et klikk på miniatyren skal åpne full størrelse i dialog.
• Bilder som også trenger kort bildetekst, metadata og eventuelt en enkel kartposisjon.

Egner seg ikke for

• Zooming, beskjæring, annotering eller karusellnavigasjon mellom flere bilder; komponenten viser ett bilde om gangen.
• Tilfeller der miniatyr og fullvisning trenger helt ulik markup eller flere kartpunkter; komponenten eier strukturen og støtter bare én valgfri {lat, lng}-posisjon.

Bruk

<script type="module" src="/designsystem/komponenter/medieinnhold/preview-image/preview-image.js"></script>

<lm-preview-image src="blob:..." alt="Kvittering fra hotell" caption="15. jun 2025 · Oslo"></lm-preview-image>

const bilde = document.querySelector("lm-preview-image");
bilde.metadata = [
    {label: "Bildet tatt", value: "15. jun 2025"},
    {label: "Sted", value: "Oslo, Norge"},
];
bilde.location = {lat: 59.91, lng: 10.75}; // viser innebygd kart i dialogen

bilde.addEventListener("preview-image:open", () => { ... });

Prøv selv

Rediger koden under - resultatet oppdateres live.

Attributter

Events

Parts

Styling med ::part()

Hver part over kan restyles direkte fra et vanlig, ytre stilark - uten å måtte endre selve komponenten eller duplisere den:

lm-preview-image::part(miniatyr) {
    /* egne stiler for "Wrapperen rundt miniatyrvisningen." */
}

lm-preview-image::part(apne-knapp) {
    /* egne stiler for "Knappen som åpner dialogen." */
}

lm-preview-image::part(miniatyr-bilde) {
    /* egne stiler for "Bildet i miniatyren." */
}

lm-preview-image::part(miniatyr-tekst) {
    /* egne stiler for "Bildeteksten under miniatyren." */
}

lm-preview-image::part(dialog) {
    /* egne stiler for "Selve <dialog>-elementet." */
}

lm-preview-image::part(lukk-knapp) {
    /* egne stiler for "Lukkeknappen i dialogen." */
}

lm-preview-image::part(full-bilde) {
    /* egne stiler for "Bildet i full størrelse." */
}

lm-preview-image::part(dialog-tekst) {
    /* egne stiler for "Bildeteksten i dialogen." */
}

lm-preview-image::part(metadata) {
    /* egne stiler for "Metadata-listen." */
}

lm-preview-image::part(kart) {
    /* egne stiler for "Innebygd kart i dialogen." */
}

lm-preview-image::part(kart-lenke) {
    /* egne stiler for "Lenken som åpner posisjonen i ekstern karttjeneste." */
}

Tilgjengelighet

Åpneknappen har aria-label="Vis bilde i full størrelse", begge <img>-elementene får alt fra komponentens attributt, og den valgfrie kart-iframe-en har title="Kart over posisjon". Tastaturstøtten følger native knapper og dialog. Skjermlesere får alt-tekst, eventuell figcaption, metadata via <dl>, og lenke til fullt kart når location er satt.

• Åpneknappen har aria-label="Vis bilde i full størrelse", begge <img>-elementene får alt fra komponentens alt-attributt, og den valgfrie kart-iframe-en har title="Kart over posisjon".
• Tastaturstøtten følger native knapper og dialog: miniatyren kan åpnes med Enter eller Mellomrom, Escape lukker dialogen, og lukkeknappen er en vanlig <button>.
• Skjermlesere får alt-tekst, eventuell <figcaption>, metadata via <dl>, og en vanlig lenke til fullt kart når location er satt.
• Komponenten har ingen egen animasjon eller høy-kontrastlogikk.

Detaljer

• Åpning og lukking styres deklarativt med Invoker Commands API via command="show-modal" og command="close", ikke med JS-kall til showModal() eller close().
• Miniatyrbildet er kvadratisk som standard og kan styres utenfra via --lm-preview-image-aspect-ratio.
• location bruker OpenStreetMap sitt nøkkelfrie embed-endepunkt, så komponenten trenger ingen ekstern kartpakke.
• metadata og location er komplekse verdier og settes derfor som JS-properties, ikke attributter.

Referanser

Se også:

• ../preview-document/index.html - Bruker samme miniatyr-til-dialog-mønster for dokumenter i stedet for bilder.
• ../map-embed/index.html - Bruker samme type OpenStreetMap-iframe når forhåndsvisningen også skal vise en kjent posisjon.
• ../../layout/grid/index.html - Brukes ofte som ytre layout for et responsivt galleri av bilde- eller kvitteringsforhåndsvisninger.

Brukes av:

• turer/js/features/receipts/receipts.js - kvitteringsrutenettet (bildevedlegg vises som miniatyrer med bildetekst, klikk åpner dem i full størrelse sammen med EXIF-metadata og posisjon på kart hvis tilgjengelig).

Avhengigheter: designsystem/funksjoner/sikkerhet/escape-html/escape-html.js (trygg rendering av metadata-verdier).