Ich habe nach einer Möglichkeit gesucht, Bilder in kleiner Darstellung in Beiträge zu integrieren und sie mit einem Klick hoch zu zoomen. WordPress bietet diese Möglichkeit standardmässig über die Mediathek an.

Diashow Mediathek

Dieser Beitrag ist mittlerweile schon über 5 Jahre alt. Diese Version von Fancybox scheint mit dem aktuellen WordPress nicht mehr zu funktionieren.

Die aktuelle Version finden Sie unter ‘https://fancyapps.com/fancybox/’

Mit dieser Methode können Sie Fotos verwenden, welche in der Mediathek vorhanden sind. Wählen Sie im Editor Dateien einfügen. Im Fenster Medien hinzufügen wählen Sie links Gallerie erstellen. Wählen Sie die Fotos aus welche in der Gallerie erscheinen sollen. Das kann auch nur ein einzelnes Bild sein. Bei nur 1 Bild kann zu keinen weiteren Bildern geblättert werden. Bei mehreren Bildern können Sie die Bilder innerhalb dieser Gallerie durchblättern. Die Reigenfolge und die Spalten können Sie in den Einstellungen der Gallerie ändern.

Das Ergebnis überzeugt mich aber weniger. Ausser dem Bild wird noch die Kommentarmöglichkeit angezeigt. Für das Album meine Ferienfotos mag das ja noch Sinn machen, nicht aber für mein Einsatzgebiet. Da soll einfach das Bild im Beitrag platzsparend eingefügt werden, und bei Bedarf hochgezoomt werden. Für die Originalansicht gibts einen separaten Link der das Bild in einem neuen Fenster/Tab öffnet, auch nicht ideal.

einfach einzufügen
einfach zu bearbeiten

Bilder müssen in der Mediathek vorhanden sein
nur bedingte Kontrolle über Anordnung und Grösse
unschöne Darstellung in der Grossansicht
Grossansicht scrollt weg
keine Originalansicht in der Grossansicht, wenn Bildschirm kleiner als das Bild ist
nur bedingte Kontrolle über Anordnung und Grösse

Fancybox

Da mich die Lösung mittels der Mediathek nicht überzeugt, habe ich nach einer anderen Lösung gesucht.  Die Übersichtlichkeit in der Mediathek ist standardmässig nicht gerade befriedigend. Das ist unter Anderem ein Grund weshalb ich es bevorzuge, die Bilder in einem eigenen Verzeichnis zu strukturieren. So bekommt jeder Beitrag sein eigenes Verzeichnis, ggf. auch mit Unterverzeichnis.

Bei den Plugins bin ich nicht fündig geworden. Also musste eine externe Lösung her. Dabei bin ich auf die Fancybox gestossen.

Fancybox benötigt jQuery, CSS und etwas JavaScript. Um ein kleines Bild gross zu zoomen braucht es ein kleines Bild das im Beitrag angezeigt wird und ein grosses Bild in das hochgezoomt wird.

Am Ende des Beitrags finden Sie den Downloadlink um die nötigen Dateien runter zu laden. Fügen Sie die nötigen Zeilen in den Header der Seite ein, um die drei Dateien zu laden. Die Erste wird direkt vom Anbieter geladen, die beiden anderen Pfade passen Sie ggf. an.

Das Einbinden der Bilder geht jetzt ganz einfach. Erst mal das kleine Bild einbinden. Darum herum kommt noch ein Link (soll ja was passieren beim Klicken). Dieser verweist natürlich auf das grosse Bild. Weiter benötigt der Link noch ein Zusatz um die Funktion auszuführen. Dem kleinen Bild können Sie mit dem title noch einen Hinweis einbinden, dass man doch drauf klicken soll. Dieser wird beim Überfahren des Bildes angezeigt.

Das Ganze schaut jetzt so aus:

Aber ehrlich, die Bilder aus der Mediathek machen mit dem Rahmen und dem Schatten schon mehr her. Photoshop? Mitnichten, nur etwas CSS. Dafür bekommt das kleine Bild die Klasse bildrahmen zugewiesen.

Et voilà:

Das Bild hat jetzt einen schönen Rahmen mit Schlagschatten. Genau so wie die restlichen Bilder.

Vielleicht ist es Ihnen schon aufgefallen, die Bilder die hier mit Fancybox integriert sind, sind keine getrennten Gallerien. Sie können das erste, einzelne Bild zoomen und dann weiter zu den Nächsten blättern. Sie kennen das schon aus Wikipedia, da funktioniert das genau so.

+ schöner, einfacher Effekt ohne Schnickschnack.
+ Blättern zu allen Bildern auf der Seite.
+ Diashow-Player.
+ Teilen-Funktion (nicht wirklich nötig)

– Thumbnails (die kleinen Bilder) müssen mit dem Grafikprogramm selber erstellt werden.
– manuelle Nachbearbeitung des HTML Code.
– keine Bildunterschriften.

sehr gut