Moin zusammen, ich habe Bilder im Text eingebunden und möchte diese bei Klick als Lightbox vergrößern, ähnlich wie es bei Produktfotos geht. Ist das denn machbar? Vielen Dank und viele Grüße, Thomas.
Gehen tut das mit Bootstrap Bordmitteln. Voraussetzung ist aber, dass du das Bild bereits in hoher Auflösung auf dem Server liegen hast. Im Contentmanager legst du dir ganz normal ein Bild an als kleine Vorschau gehts dann in die Quelltextansicht und fügst da folgendes hinzu: HTML: <a href="#" data-toggle="modal" data-target="#großesBild1"> <img src="pfad/zu/deinem/kleinen/bild" title="Zum vergrößern klicken" alt="kleines Vorschaubild"/> </a> <div class="modal fade" id="großesBild1" tabindex="-1" role="dialog" aria-labelledby="großesBild1Label"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="großesBild1Label">Vergrößerung</h4> </div> <div class="modal-body"> <img class="img-responsive" src="pfad/zu/deinem/großen/bild" title="Großes Bild" alt="Großes Bild"/> </div> </div> </div> </div> Näheres dazu hier: http://getbootstrap.com/javascript/#modals Der a-Tag um dein kleines Bild herum bewirkt, dass bei Klick auf das Bild ein Bootstrap-Modal aufgemacht wird, welches die id "großesBild1" hat. Der weitere Code darunter ist für das Modal.
Hallo Torben, danke Dir. Ich komme noch nicht ganz nach. Was heisst "Im Contentmanager legst du dir ganz normal ein Bild an als kleine Vorschau"? Ich mache für jedes Bild einen neuen Eintrag im Content Manager. Ok. Dort im Quelltext werfe ich den Code oben hinein, entsprechend Pfade und Dateinamen angepasst. Auch ok. Bilder in kleiner und großer Version sind schon per FTP auf dem Server. Soweit auch ok. Aber wie binde ich das ganze Konstrukt dann hier ein? https://www.haufwerk.com/de/auftragspraeparation/ Ich habe dann ja einen Contentmanager-Eintrag pro Bild... Viele Grüße, Thomas.
Entschuldige, da hab ich mich ein wenig missverständlich ausgedrückt. Du hast ja schon einen Contentmanagereintrag wo du die Bilder drin hast. Um diese Bilder baust du die a-Tags wie in meinem Beispiel und auch das HTML für die Modals. Du musst für jedes Modal eine neue id vergeben, da es sonst zu Anzeigeproblemen kommt. Wenn du da nicht weiterkommst, poste hier am besten mal den Inhalt der Seite, wo du die Bilder drauf hast als Quelltext, dann schau ich da einmal drauf.
Ah, okay. Nee, der Inhalt kommt nicht aus dem Content-Manager, die angegebene Seite ist ein Kategorietext mit versteckten Produkten, ansonsten hätte ich den Content nicht in die Hierarchie der Produktgruppen bekommen (war vor längerer Zeit mal hier ein Thema). Dann isses klar, ich probiere das später mal aus und gebe Bescheid. Jetzt muss ich erstmal vom Rechner weg, die Sonne scheint Danke Dir erstmal!
Oops, den Link hab ich hier ja gar nicht angegeben: https://www.haufwerk.com/de/auftragspraeparation/
Hallo @Torben (Gambio), ich habe das jetzt mal ausprobiert, aber leider klappt es nicht. Der Code sieht meiner Meinung nach ok aus: Code: <a href="#" data-toggle="modal" data-target="#Bild1"> <img src="/images/auftragspraep/1_kl.jpg" title="Zum vergrößern klicken" alt="kleines Vorschaubild"/> </a> <div class="modal fade" id="Bild1" tabindex="-1" role="dialog" aria-labelledby="Bild1Label"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="Bild1Label">Vergrößerung</h4> </div> <div class="modal-body"> <img class="img-responsive" src="/images/auftragspraep/1.jpg" title="Bild 1" alt="Bild 1"/> </div> </div> </div> </div> Außerdem ist das Vorschaubild dann nicht responsiv. Man könnte es kleiner machen, aber ich bevorzuge eine Darstellung wie jetzt - Vorschau über die gesamte Breite, bei Klick darauf öffnet sich das Modal mit Vergrößerung. Was ist denn falsch...? Danke schonmal und viele Grüße, Thomas.
Hallo, auch ich möchte im Content ein klickbares Vorschaubild erstellen. Leider funktioniert der Code nicht :-( Gibt es schon eine Lösung?
Nö... Ich habe das Thema auch ad acta gelegt - eine Lightbox-Darstellung von Bildern ist nicht sonderlich toll für Mobilgeräte, meine jetzige Lösung (großes Bild geht in separatem Browser-Tab auf) dann schon eher. Gruss, Thomas.
Is jemand weiter gekommen, das wäre genau das was ich für meine Content Seite suche.. Das kleine bild wird auch angezeigt, bei klick passiert leider nichts Hier der Quellcode Vll hat jemand ne idee Code: <a href="#" data-toggle="modal" data-target="#großesBild1"> <img src="/images/content/aquarium_umbau_klein.jpg" title="Zum vergrößern klicken" alt="kleines Vorschaubild"/> </a> <div class="modal fade" id="großesBild1" tabindex="-1" role="dialog" aria-labelledby="großesBild1Label"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="großesBild1Label">Vergrößerung</h4> </div> <div class="modal-body"> <img class="img-responsive" src="/images/content/aquarium_umbau_groß.jpg" title="Großes Bild" alt="Großes Bild"/> </div> </div> </div> </div>
Nö, wie geschrieben, ich hab's wegen Mobil-Unfreundlichkeit sein gelassen. @Torben (Gambio) hat dann ja hier auch nicht mehr rein geschaut, so dass ich an der oben beschriebenen Stelle nicht mehr weiterkam. Gruss, Thomas.