42 lines
1.9 KiB
PHP
42 lines
1.9 KiB
PHP
|
<?php
|
||
|
|
|
||
|
|
declare(strict_types=1);
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Overlay für die Bild-Großansicht. Props:
|
||
|
|
* $label string Bezeichnung des Dialogs (Screenreader)
|
||
|
|
* $count int Anzahl der Bilder — bei genau einem gibt es weder
|
||
|
|
* Zähler noch Vor/Zurück (wäre beides sinnlos)
|
||
|
|
*
|
||
|
|
* Gehört IMMER in denselben [data-lightbox-gallery]-Container wie die
|
||
|
|
* zugehörigen Bildlinks (assets/js/lightbox.js sucht von dort aus). Steht
|
||
|
|
* `hidden` im Markup, bis JS es übernimmt — ohne JS bleiben die
|
||
|
|
* Vorschaubilder normale Links auf die Bilddatei.
|
||
|
|
*/
|
||
|
|
$label = $label ?? 'Bild in Großansicht';
|
||
|
|
$count = $count ?? 0;
|
||
|
|
$mehrere = $count > 1;
|
||
|
|
?>
|
||
|
|
<div class="lightbox" role="dialog" aria-modal="true" aria-label="<?= e($label) ?>" data-lightbox-dialog hidden>
|
||
|
|
<?php /* Keine sichtbare Bildunterschrift (Beschluss 30.07.2026): der Alt-Text
|
||
|
|
trägt die Beschreibung. sizes steht statisch, das srcset erbt das Bild
|
||
|
|
vom angeklickten Vorschaubild (lightbox.js). */ ?>
|
||
|
|
<img class="lightbox__img" src="" alt="" sizes="100vw" data-lightbox-img>
|
||
|
|
<?php if ($mehrere): ?>
|
||
|
|
<p class="lightbox__counter" aria-live="polite">
|
||
|
|
<span data-lightbox-current>1</span> von <?= (int) $count ?>
|
||
|
|
</p>
|
||
|
|
<?php endif; ?>
|
||
|
|
<button class="btn btn--icon lightbox__btn lightbox__close" type="button" data-lightbox-close aria-label="Ansicht schließen">
|
||
|
|
<?= icon('x-lg') ?>
|
||
|
|
</button>
|
||
|
|
<?php if ($mehrere): ?>
|
||
|
|
<button class="btn btn--icon lightbox__btn lightbox__prev" type="button" data-lightbox-prev aria-label="Vorheriges Bild">
|
||
|
|
<?= icon('chevron-left') ?>
|
||
|
|
</button>
|
||
|
|
<button class="btn btn--icon lightbox__btn lightbox__next" type="button" data-lightbox-next aria-label="Nächstes Bild">
|
||
|
|
<?= icon('chevron-right') ?>
|
||
|
|
</button>
|
||
|
|
<?php endif; ?>
|
||
|
|
</div>
|