LightboxGallery + Pfeile & Esc

[F.Medhusa]

hallo liebe gemeinde,

auf meiner homepage möchte ich eine photo-gallery mittels lightbox einbinden.
dazu habe ich folgendes JS - schnipsel gefunden:

<code>
$(document).ready(function() {
$("img").click(function() {
$src = $(this).attr("src");
if (!$("#light-box").length > 0) {
$("body").append("<div id='light-box'><span class='material-icons'>close</span><img src=''></div>");
$("#light-box").show();
$("#light-box img").attr("src", $src);
} else {
$("#light-box").show();
$("#light-box img").attr("src", $src);
}
});
$("body").on("click", "#light-box span", function() {
$("#light-box").hide();
});
});
</code>

Quelle: https://codepen.io/sidtheangel/pen/ONRKZa

das hat soweit auch ganz gut funktioniert.
weiters würde ich gerne noch 2 funktionen hinzufügen.

1: der user soll sich mit den cursor - tasten (links & rechts) durch die bilder 'klicken' können.

2: mit der ESC - taste soll die lightbox 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.

dankeschonmal für eure antworten!

liebste grütze & ein fröhliches neues jahr wünschend,
medhusa

 

[basti1012]

Hier habe bisschen gegoogelt und etwas gefummelt und es macht das, was du möchtest

https://basti1012.bplaced.net/index.php?ordner=html&id=675

 

[F.Medhusa]

hi,

ich hab den code leicht modifiziert & erfolgreich eingebunden.
danke für deine schnelle antwort, das war auf jeden fall hilfreich!

allerdings stehe ich jetzt vor einem anderen problem.
auf meiner homepage sind nicht nur 3 bilder sondern 6.
die ersten 3 sind kleiner als die letzten 3..

daher meine frage:
wo genau in deinem code kann ich:

max-height: 180px;
max-width: 180px;

für die bilder, bevor man sie anklickt (also bevor die lightbox öffnet) festlegen?

lg


edit:

auf dem smartphone werden alle bilder gleich groß dargestellt.
(mit deiner lösung funktioniert übrigens auch das "durchwischen")

 

[basti1012]

erstell doch eine neue classe zb class="bildbefore" und dann gibst du jeden bild die klasse . dann kannst du in der css deine werte eingeben wie das vorm klicken aussehen soll. hoffe ich habe dich jetztrichtig verstanden

 

[F.Medhusa]

mit class hat'S funktioniert!
vielen dank & danke auch für die fancybox - empfehlung, sieht auch sehr brauchbar aus!