Bilder mit AJAX noch eleganter vergrößern |
|
Donnerstag, 18. Dezember 2008
|
||
|
Ein Script namens Lighbox 2 war Mittelpunkt eines weit über ein Jahr altem Beitrag bei Professor Web. Heute möchte ich ein anderes Script vorstellen, dass noch mehr kann.
"Highslide JS" heißt das Script über das dieser Artikel hier berichtet. Es ist ein JavaScript das mit AJAX Technologie verschiedenste Möglichkeiten bietet die Inhalte einer Website noch ansprechender aufzubereiten, als in meinem alten Beitrag beschrieben. Der Ursprung dieses Scriptes, dessen Programmierer aus Norwegen stammt, liegt ganz klar bei der Lighbox-Funktionalität - also dem Nachladen von Bildern und deren Vergrößerung. Mehr als nur Bilder vergrößern Das Script kann mehr. Schon auf der Startseite zeigt der Entwickler die ganze Flexibilität seiner Software. In dem aufpoppenden Fenster können nicht nur vergrößerte Bilder angezeigt werden, sondern beliebige HTML-Inhalte oder spezielle Funktionen wie eine Navigation um zum nächsten Bild zu springen oder das "Popup-Fenster" zu verschieben.  Man kann über die Einstellungen das bloße Bild vergrößert darstellen oder einen Untertitel anzeigen. Wobei man diesen beliebig positionieren kann. Dieser Untertitel wird dann aus dem ALT-Tag des Ursprungsbildes geladen oder aus dem Titel des Links. Man kann diesen Text auch manuell vergeben. Das alles kann flexibel verändert werden. HTML-Inhalte in Highslide  Die Popups lassen sich mit normalem HTML-Inhalt befüllen. Dabei ist es egal, ob sich dieser in einem versteckten DIV auf der Seite befindet oder in einer anderen HTML-Datei, die dann asynchron nachgeladen wird.Sogar die Höhe der Inhaltsbox lässt sich dynamisch einstellen. So passt sich die Höhe dem Inhalt an - besonders praktisch, wenn man in der Box dynamische JavaScript-Funktionen verwendet. Weitere Elemente Flash Filme und iFrames die externe Inhalte darstellen sind ebenfalls möglich abzubilden. Der große Vorteil daran ist, dass die nachträglich aufpoppenden Inhalte nicht im ursprünglichen Content zu sehen sind. Möchte sich jemand die drei Bilder im aktuellen Content nicht in einer super Auflösung anschauen muss er das auch nicht, er hat jedoch die Möglichkeit dies mit einem Klick zu tun. Skins Diese Box lässt sich optisch nach den eigenen Wünschen anpassen. Man kann selbst Skins erstellen oder die Standard-Skins verwenden, die so neutral gestaltet wurden, dass sie sich auf praktisch jede Website passen. Die Einbindung Um Highslide in die eigene Website zu integrieren gibt es 4 verschiedene JavaScript-Dateien von der man aber nur eine, je nach gewünschtem Funktionsumfang, benötigt.
Die Dateigrößen sind im Übrigen die Angaben der komprimierten Dateien. Man erhält zudem noch vier weitere JS-Dateien, die unkomprimiert sind und so teilweise doppelte Datei-Größen verursachen. Abgesehen von den JS-Dateien müssen noch Bilder hochgeladen werden, die das Skin darstellen, und eine CSS-Datei. Die Inhalte der CSS müssen aber nicht gezwungenermaßen in einer eigenen Datei stehen. Es reicht, wenn man deren Inhalt in die eigene, aktuelle CSS-Datei einfügt. Sind diese Voraussetzungen erfüllt, kann man in Head-Bereich nun damit beginnen die Standardeinstellungen für das Öffnen der Highslides zu definieren. Das sieht dann z.B. so aus: <script type="text/javascript"> Das graphicsDir gibt an wo unsere Skins liegen. Da wir kein explizites Skin gewählt haben wir ein weißes und eckiges Standardskin genommen. Mit showCredits = false wird der Hinweis "Powered by Highslide JS" deaktiviert. Keine Sorge, auch in der kostenlosen Variante für nicht-kommerzielle Zwecke darf dieser Hinweis ohne Bedenken entfernt werden. Mit der letzten Zeile im JavaScript allowMultipleInstances = false wird angewiesen, dass nur ein Bild gleichzeitig geöffnet werden darf. Ist bereits ein Bild offen, wird das automatisch geschlossen sobald man ein anderes öffnet. Man kann dem Besucher es jedoch auch ermöglichen so viele Bilder wie er möchte zu öffnen. Da er das Fenster verschieben darf, kann er so z.B. mehrere Bilder miteinander vergleichen. Damit nicht alle, sondern nur ausgewählte Bilder mit dieser Funktion ausgestattet werden muss dem Link, dass im href das vergrößerte Bild beinhaltet noch die Klasse "highslide" und das JS-Event onclick geben werden. So sieht es dann im Code aus: <a href="gross.jpg" class="highslide" onclick="return hs.expand(this)"> Wenn wir im übrigens möchten, dass in der vergrößerten Version ein Untertitel erscheint, der sich aus dem ALT-Tag des kleinen Bildes zusammensetzt, dann reicht eine kleine, weitere Zeile Code im JavaScript im Head: hs.captionEval = 'this.thumb.alt'; Lizenz und Kosten Das Script ist für den nicht-kommerziellen Bereich kostenfrei. Alle anderen müssen eine kleine Gebühr bezahlen, wobei eine Single-Website-Lizenz gut 20 Euro (29 USD) und eine uneingeschränkte Lizenz, die man beliebig oft verwenden darf knapp 128 Euro (179 USD) kostet. Für das Geld erhält man Zugriff auf eine sehr gute und ausführliche Dokumentation und API in der alle möglichen Befehle und Einstellungsvarianten ausführlich und mit Beispielen (allerdings Alles auf englisch) erklärt werden - und wenn man gar nicht mehr weiter weiß, gibt es auch ein Support-Forum in dem der Entwickler des Scripts ebenfalls fleißig Posts am beantworten ist. Er versteht übrigens Deutsch, kann es nur nicht schreiben, daher wären Englischkenntnisse von Vorteil :) Fazit Mein Fazit ist die Empfehlung, dieses Script unbedingt mal anzuschauen und auszuprobieren. Eine Seite habe ich sogar mal fast ausschließlich damit umgesetzt: Schwan-Design (Auf die Logos rechts klicken). Das Script erleichtert einem die Arbeit sehr und ermöglicht neue Funktionen, die dem Besucher das Surfen einfacher und komfortabler gestalten. Der Preis für eine unbegrenzte Lizenz ist ebenfalls okay - und ich bin sicher, dass dieses Script es sogar in die nächste Professor Web Version schaffen wird um auch hier mehr Komfort in der Darstellung der Inhalte reinzubringen. Link AJAX-Script: Highslide JS  Kommentare (2)
|
||
| Letzte Aktualisierung ( Mittwoch, 17. Dezember 2008 ) | ||
| < Zurück | Weiter > |
|---|
