Ich habe auf der Grundlage von Slimbox1.64 ein Modul umgesetzt das entweder als Einzelbild oder als Bildergallerie mit dem Lightbox-Effekt funktioniert.
Vorteil am Beispiel eines Einzelbildes:
Vorgabe:
Bild des Kunden ist ein 4MP Bild (2304x1728 Pixel)
Im Layout soll der Platz für das Bild 300x400px sein.
Das normale Vorgehen währe das vorhandene Bild dementsprechend auf die 300x400px anzupassen, auf den Server zu kopieren und dann in ein Standardbildmodul einzubinden.
Mit dem xtcSlimboxPic funktioniert das ganze nun so.
Im Template werden folgende angaben gemacht:
* Abzeigeart: Bild einzeln
* Vorschaubilder Breite max. 400px, Höhe max.400px
* Vorschaubilder beschneiden Breite 300px, Höhe 400px
* Slimboxbildgröße (Zoom) Breite max. 1000px, Höhe max.800px
Das Ergebnis ist, ein Vorschaubild von 300x400px (automatisch Beschnitten) und bei Klick auf dieses Bild ein Lightbox Effekt wo das Bild innerhalb der Box mit Original Proportionen dann 1000x741px (duch max. 1000x800px) groß ist.
Vorteil: der Kunde kann seine Bilder Fotografieren, hochladen, einbinden, und sie passen immer ohne Vorherige anpassungen in das Layout.
Beispiel für "Bilderset mermals mit HTML-Bereich"
Man könnte auf einer Seite mehrere Gallerien aus mehreren Verzeichnissen inkl. einem Textbereich für die jeweilige Gallerie als eine Gesamtgallerie mit einem Modul umsetzen.
Ich selbst setze es bei einem Kunden ein der mehrere Objekt mit jeweils mehreren Zimmern hat. Jedes Zimmer hat nun einen eigenen Bilderordner und auf einer Seite wird das gesamte Objekt als Zimmerbeschreibung, Zimmerbilder, nächste Zimmerbeschreibung, Zimmerbilder, nächste Zimmerbeschreibung, Zimmerbilder... dargestellt und bei klick auf die Bilder werden ALLE Bilder in einer Bildergallerie mit Lightbox-Effekt dargestellt.
Allgemein
Die Vorschaubilder und die Bilder innerhalb des Lightboxeffekts werden automatisch auf die max. definierte Größe die im Template angegeben wurde umgerechnet. Vorschaubilder können auch beschnitten werden, so dass alle Vorschaubilder ein und die selbe Größe, unabhängig vom Originalbild (Bsp. Hoch- oder Querformat) haben. Die Bilder in den Bildersets sind jeweils in einem span class=xtcSlimboxPicCell hinterlegt und können damit per CSS positioniert werden.
Nun suche ich ein paar Freiwillige zum testen von dem ganzem!
Slimbox ist ein 4kb Clone von Lightbox 2.0 der durch Optimierung im JS um eingiges schneller als das Original Lightbox ist.
Noch ein Vorteil laut Forum:
Auswahlmöglichkeiten:Da die Slimbox auf mootools basiert, wird sie nicht über das onLoad-Event, sondern über das mootools-eigene DOMready-Event initialisiert! Also schon wenn das DOM fertig aufgebaut ist, aber die Inhalte noch nicht fertig geladen wurden.
Das ist extrem hilfreich, wenn man z.B. in einer Gallerie viele Thumbnails auf einer Seite lädt und der User das erste schon anklickt, bevor die komplette Seite geladen wurde. In solchen Fällen versagen Lightboxes mit normaler onLoad-Initialisierung dann nämlich meistens.
* Bild einzeln (wie Standardbildmodul)
* Bildset einzeln (einzelne Bildergallerie aus einem Verzeichnis)
* Bildset mehrfach (einzelne Bildergallerie aus mehreren Verzeichnissen)
* Bildset mehrfach mit HTML-Bereich (einzelne Bildergallerie aus mehreren Verzeichnissen, pro Verzeichnis ein HTML-Textbereich)
Einstellmöglichkeiten Template:
* Vorschaubildgröße (Originalverhältnis) einstellbar
* Vorschaubild auf voreingestellte Größe beschneidbar
* Slimboxbild (Zoom) Größe einstellbar
Funktionsweise Bild einzeln:
1. Im Editor Bild wie gewohnt auswählen.
2. Im Template Größen einstellen und Anzeigeart auf "Bild einzeln" stellen.
Funktionsweise Bildset/-s:
1. Im Template Größen einstellen und Anzeigeart auf "Bildset..." stellen.
2. Verzeichnis auswählen das die Bilder enthält.
Funktionsweise Bildsets mit HTML-Bereich:
1. Im Template Größen einstellen und Anzeigeart auf "Bildset mehrfach mit HTML-Bereich" stellen.
2. Verzeichnisse auswählen welche die Bilder enthalten.
3. Im Editor über der jeweiligen Bildgruppe den Text einfügen.
Changlog:
0.0.6
* ADD Bilder bei Vorschaubilder auf vordefiniertes Format beschneiden.
0.0.5
* ADD Bilder-Sets (Bildergalerie mit „Ligthbox“-Effekt) mit jeweiligen HTML-Bereich (CMS_HTML) aus mehreren verschiedenen Verzeichnissen erstellbar
* ADD Auswahl mehrerer Verzeichnisse wird über jedem ein extra editierbarer HTML-Bereich ausgegeben
* CHANGE Auswahlmöglichkeit ob Einzelbild, Bilderset (ein Verzeichnis), Bilder-Sets (mehrere Verzeichnisse) oder Bilder-Sets (mehrere Verzeichnisse) mit jeweiligen HTML-Bereich
* mehrfach in einem Artikel einsetzbar
0.0.4
* ADD Bilder-Sets (Bildergalerie mit „Ligthbox“-Effekt) aus mehreren verschiedenen Verzeichnissen erstellbar
* ADD Anzahl der Verzeichnisse ist Dynamisch
* CHANGE Auswahlmöglichkeit ob Einzelbild, Bilderset (ein Verzeichnis) oder Bilder-Sets (mehrere Verzeichnisse)
0.0.3
* ADD Bilder-Set (Bildergalerie mit „Ligthbox“-Effekt)
* ADD Auswahlmöglichkeit ob Einzelbild oder Bilder-Set
* ADD Anzahl der Spalten beim Bilder-Set
0.0.2
* CHANGE Slimbox-JS zu 1.64
* ADD „Ligthbox“-Effekt für Bildmodul
* ADD Resize für „Ligthbox“-Effekt
0.0.1
* ADD Bildresize in Contenido Bildmodul in der Normalansicht
* ADD Slimbox-JS 1.63
Demo
Download
Viel Spass damit!
yodatortenboxer