Foto Popup-Vollansicht
Im Louma-Theme ist ein Plugin integriert, welches die große Ansicht von Bildern erlaubt.
Derzeit ist es allerdings notwendig diese Funktion im HTML-Code an die Bilder zu übergeben. Mit dieser Anleitung ist das aber kein Hexenwerk.
So soll das unter anderem dann aussehen wenn ein Bild auf vollen Zoom vergrößert wird:
Diese Funktion kann auf alle normalen Bilder auf der Website angewendet werden.
Voraussetzung dafür ist
- ein aktiver Link auf das große Bild
- eine wichtige CSS Klasse für den Link setzen
1. Aktiven Link setzen
Was machen wir:
Es muss ein Link auf dem kleinen Bild gesetzt werden, mit dem großen Bild als Link-Ziel.
Wie:
Hierzu wechseln wir in der Website (im angemeldeten Zustand) zuerst in den Bearbeiten-Modus.
Falls nicht schon vorhanden, fügen Sie nun wie gewohnt ein Bild an der gewünschten Stelle hinzu.
Hier unser Beispielbild innerhalb der Seite:
Nun kopieren wir uns den Pfad vom gewünschten, großen Bild in die Zwischenablage.
Hierzu öffnen wir wieder den Foto-Dialog:
Suchen Sie in der Übersicht ihr gewünschtes Ziel-Bild das Sie in groß anzeigen lassen wollen (kann auch das selbe Bild sein welches Sie gerade hinzugefügt haben).
Mit einem Rechtsklick auf das Bild öffnen Sie ein Dialog. Dies ist je nach verwendetem Browser unterschiedlich und kopieren Sie die Grafikadresse / Bildadresse.
Schließen Sie nun den Foto-Dialog.
Mit einem Klick auf das kleine Bild (im Bearbeiten-Modus) markieren Sie dieses nun.
Wenn Sie die Anpassen-Option sehen, dann haben Sie das Bild richtig ausgewählt,
verwenden Sie die Anpassungen-Funktion aber NICHT, denn wir müssen nun nur ein Link auf das Bild setzen.
Öffnen Sie nun die Option zur Verlinkung.
Im Link-Dialog klicken Sie in das Feld für URL oder E-Mail Adresse und mit einem Rechtsklick → "Einfügen" definieren Sie hier das große Bild als Link-Ziel.
Speichern Sie die Ansicht.
Das Bild ist nun mit dem großen Bild verlinkt.
2. Link-Klasse ändern
Was machen wir:
Wir müssen dem Link nun sagen, dass er das Foto mit der neuen Funktion öffnen soll.
Dies geht aktuell nur über den HTML Editor.
Wie:
Öffnen Sie den HTML Editor:
Suchen Sie den Link <a href....> vom Bild im HTML Code,
am besten orientieren Sie sich dabei am Textinhalt der Seite.
Wenn es in dem Anker <a ...> schon eine Class=" " gibt, dann befüllen Sie diese mit dem Zusatz popup-img wie im Beispiel zu sehen.
Wenn der Anker keine class=" " enthält, dann fügen Sie diese hinzu. Ggf. sind schon mehrere CSS Klassen enthalten, fügen Sie dann ihre neue CSS Klasse mit einem Leerzeichen hinter die anderen hinzu.
Speichern Sie die Ansicht und auch den Bearbeiten-Modus,
nun sollte sich das Bild mit der großen Vorschau-Funktion auf dem Bild öffnen können.