Frage Bild beim anklicken dauerhaft vergrößern

[Timer]

Hey,
ich würde gerne bei meiner Galerie machen, dass, wenn ich ein Bild anklicke, sich dieses über den Bildschirm vergrößert und man oben ein X anklicken kann oder neben das Bild klicken kann, damit es sich wieder schließt.
Jedoch würde ich jetzt :active benutzen, jedoch müsste ich da die Maustaste halten. Auch andere Möglichkeiten, die ich im Internet gefunden habe, gingen nicht.
http://timer.bplaced.net/galerie.html
Wie kann ich das am besten machen?

MfG
Timer

 

[Aaron3219]

Naja es ist theoretisch möglich, mit :checked zu arbeiten und dann eine checkbox irgendwo bei -10000px zu machen. Ich weiß, dass es auch Leute in diesem Forum gibt, die diese Lösung für eine gute Lösung halten, ich würde hierbei aber tatsächlich zu Javascript/Jquery greifen (Bzw. eine Mischung aus CSS und Javascript).

Edit:
Obwohl... es ist theoretisch auch ohne Möglich. Ich mache eben ein Beispiel fertig

 

[Timer]

Naja es ist theoretisch möglich, mit :checked zu arbeiten und dann eine checkbox irgendwo bei -10000px zu machen. Ich weiß, dass es auch Leute in diesem Forum gibt, die diese Lösung für eine gute Lösung halten, ich würde hierbei aber tatsächlich zu Javascript/Jquery greifen (Bzw. eine Mischung aus CSS und Javascript).

Habe mit Javascript/Jquery leider noch nicht sehr viel Erfahrung. Könntest du mir vlt ein Tutorial o.ä. für das oder ein ähnliches Thema schicken?

 

[Aaron3219]

Ja wie gesagt, ich mache gerade mal etwas fertig (da mir eingefallen ist, es ist auch ohne Javascript möglich).

ich mache das als edit dann hier rein, also ab und zu die Seite mal aktualisieren.

Edit:
so hier ist er:
https://jsfiddle.net/q5fe7k65/1/

2. Edit:
Damit du nicht jedes mal ein neues Popup für jedes Bild erstellen musst, würde hier Javascript ins Spiel kommen. Auch dafür mach ich mal eben was fertig.
So:
https://jsfiddle.net/nxvy3m7j/1/

Guck erstmal, ob das in deinem Sinne ist.

 

[Timer]

Ja wie gesagt, ich mache gerade mal etwas fertig (da mir eingefallen ist, es ist auch ohne Javascript möglich).

ich mache das als edit dann hier rein, also ab und zu die Seite mal aktualisieren.

Edit:
so hier ist er:
https://jsfiddle.net/q5fe7k65/1/

2. Edit:
Damit du nicht jedes mal ein neues Popup für jedes Bild erstellen musst, würde hier Javascript ins Spiel kommen. Auch dafür mach ich mal eben was fertig.
So:
https://jsfiddle.net/nxvy3m7j/1/

Guck erstmal, ob das in deinem Sinne ist.

Ich habe das jetzt leicht bearbeitet (auf deiner Seite funktioniert es so verändert noch) übernommen. Jedoch ist bei mir bei dem Popup eine Höhe von 0 px. Egal wie ich versuche, das zu ändern (z.B. height: auto), sieht es bei mir hässlich aus. Hier nochmal die Seite:
http://timer.bplaced.net/galerie.html
Wo hab ich da den Fehler drinnen? Ich finde nichts

 

[Timer]

Wozu das Rad neu erfinden, wenn es doch vorgefertigte Lightboxes gibt, z. B. Fancybox?

Da muss man, soweit ich das jetzt sehe, dass Bild zweimal hochladen: einmal groß und einmal klein. Das ist mir zu aufwändig

 

[Timer]

Nein, das HTML sieht so aus:

<a data-fancybox="gallery" href="big_1.jpg"><img src="small_1.jpg"></a>
<a data-fancybox="gallery" href="big_2.jpg"><img src="small_2.jpg"></a>

Kein Problem für img und href das selbe Bild zu verwenden und im img herunter zu skalieren.

Wenn ich das rein mach, öffnet sich das Bild einfach als neuen Link und ist nicht mehr die gleiche Seite.

 

[Timer]

Das allein reicht nicht aus. Du musst auch jQuery und das Lightbox-Skript einbinden, so wie es unter Quick Start hier beschrieben ist:
http://fancyapps.com/fancybox/3/

Trotzdem nichts
http://timer.bplaced.net/galerie - Kopie.html
PS: Ich habe nur die ersten 3 Bilder im 1. Spoiler eingebunden

 

[Timer]

Ich würde am liebsten die Version von Aaron3219 benutzen, da die noch am meisten funktioniert (nur das Bild wird nicht in das Popup geladen). Könntet ihr da nochmal schauen, woran das liegt?
http://timer.bplaced.net/galerie.html
Edit: mir ist gerade aufgefallen, dass ich jQuerry nicht eingebunden hatte. Hab ich gemacht. Geht trotzdem nicht

 

[Aaron3219]

Ja. Du hat Jquery auch nicht richtig eingebunden:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

ist eine Version die ziemlich alt ist (Ich glaube zumindest, dass es daran liegt).
https://code.jquery.com/jquery-3.2.1.js
ist da besser geeignet.

Eventuell liegt es daran. Bin mir aber unsicher.

Edit:
Nein der Grund ist, dass du das Script von mir im Head eingebunden hast. Script werden immer als letztes Element des bodys geladen!

 

[Timer]

Ja. Du hat Jquery auch nicht richtig eingebunden:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

ist eine Version die ziemlich alt ist (Ich glaube zumindest, dass es daran liegt).
https://code.jquery.com/jquery-3.2.1.js
ist da besser geeignet.

Eventuell liegt es daran. Bin mir aber unsicher.

Edit:
Nein der Grund ist, dass du das Script von mir im Head eingebunden hast. Script werden immer als letztes Element des bodys geladen!

Oh peinlich. Hab erst vor ein paar Wochen wieder angefangen zu programmieren. Danke für deine Hilfe

 

[Aaron3219]

Du hast aber immer noch Jquery 1.7.1 drinne.

 

[Timer]

Du hast aber immer noch Jquery 1.7.1 drinne.

Habe erst das aus dem Edit übernommen und hochgeladen und dann die neue Version eingefügt, jedoch vergessen hoch zu laden. Ist nun Drauf. Danke für deine Hilfe

?? Funktioniert bei mir einwandfrei!

Ok bei mir geht es nicht. Kann es sein, dass Chrome damit nicht kompatibel ist?