Ich such' mir was
HTML-Bilder in Vollgröße anzeigen
Die Bilder dieser Site können in Vollgröße angezeigt werden. Hier sehen Sie, wie so etwas geht.
Im HTML Editor können Bilder eingefügt werden. Diese Bilder werden intern in zwei verschiedenen Auflösungen gespeichert.
-
Die Maximalgröße.
Die Maximalgröße ist die Größe, die das Bild im Original hat, außer es ist größer als die, in den globalen Einstellungen eingestellte maximale Bildgröße. Wenn das Original größer als die, in den globalen Einstellungen angegebene maximale Bildgröße, so wird das Bild auf die angegebene Größe unter Beibehaltung des Seitenverhältnisses verkleinert. -
Die Ausgabegröße
Im HTML Editor kann das Bild nun nach belieben verkleinert oder, bis zur Maximalgröße, vergrößert werden. Beim Speichern des Dokuments wird das Bild nun in der Ausgabegröße gespeichert. Auf diese Weise werden bei Anzeigen der Seite nur so viel Daten übertragen, wie wirklich nötig sind.
Nun kann es sein, dass Sie auf Ihrer Website - so wie hier - beim Klick auf das Bild in der Ausgabegröße, das Bild in Maximalgröße anzeigen möchten. Das kann in einem neuen Fenster geschehen. Eleganter ist es aber mit JavaScript. Hier gibt es eine ganze Reihe von unterschiedlichen Tools, Allen gemein ist, dass Sie den URL auf die Maximalgröße benötigen.
Zur Anzeige einer Maximalansicht habe ich ein Script geschrieben, welches mir anhand der Bild-ID das Bild zurückliefert. Nun lässt sich das Bild ausgeben, indem das Script wie folgt aufgerufen wird./2folks/script/getImage.php?id=<id>.
Nun habe ich eine PHP-Funktion mit dem Namen CreatePicSizableHtml geschrieben, sie in ein Script ausgelagert und dann in das entsprechende Module eingebunden. Dieser Funktion übergeben ich das HTML, so dass es in meinem Beispiel nicht
echo $doc->content["text"]->value;
sondern
echo CreatePicSizableHtml($doc->content["text"]->value);
heisst.
Die Funktion baut einen Link für ein JavaScript-Tool zusammen, welches die Bilder in Maximalgröße anzeigt. Sie filtert zunächst alle Image-Tags heraus, Dann extrahiert sie aus den Image-Tags die entsprechende Bild-ID. Nun wird für jedes Image-Tag ein Konstrukt aus Anchor und DIV gebaut und anschließend die Image-Tags mit den Konstrukten erstetzt, das wars. Dieser Link sieht
natürlich für jedes JavaScript-Tool ein wenig anders aus. Hier habe ich Highslide benutzt. Kostenpflichtig für kommerziellen Einsatz, aber ein schönes Tool mit geringen Lizenzkosten.