LightboxGallery und Pfeile und Esc
Hallo liebe Gemeinde,
auf meiner Homepage möchte ich eine photo-gallery mittels light Box einbinden.
Dazu habe ich folgendes JS - schnipsel gefunden:
Quelle: https://codepen.io/sidtheangel/pen/ONRKZa
Das hat so weit auch ganz gut funktioniert.
Weiters würde ich gerne noch 2 Funktionen hinzufügen.
1: der User soll sich mit dem Cursor - tasten (links & rechts) durch die Bilder „klicken“ können.
2: mit der ESC - tasten soll die light Box geschlossen werden. (so, als würde man auf das X klicken..)
da ich allerdings keine Ahnung von JS habe und mal schwer vermute, irgendetwas im *.js file dafür verändern/hinzufügen zu müssen, wollte ich mich an euch wenden.
danke schonmal für eure antworten!
liebste grütze & ein fröhliches neues jahr wünschend,
medhusa
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
Der hier verwendete Code
<ul>
<li><a href="/image/10_big.jpg" data-imagelightbox="c"><img src="/image/10.jpg" alt="Countryside somewhere in Lithuania" /></a></li>
<li><a href="/image/11_big.jpg" data-imagelightbox="c"><img src="/image/11.jpg" alt="Storm in Klaipeda" /></a></li>
<li><a href="/image/12_big.jpg" data-imagelightbox="c"><img src="/image/12.jpg" alt="Sunset over Plateliai lake" /></a></li>
</ul>
<style>
html
{
/* killing 300ms touch delay in IE */
-ms-touch-action: manipulation;
touch-action: manipulation;
}
body
{
font-family: 'Fjalla One', sans-serif;
color: #333;
background-color: #efefef;
}
.is-hidden
{
display: none;
}
.btn
{
text-transform: uppercase;
color: #efefef;
background-color: #333;
padding: 0.313em 0.625em; /* 5 10 */
}
.btn:hover,
.btn:focus { background-color: #c00; }
.btn:active { background-color: #a00; }