Basierend auf ColorBox, ein leicht anpassbares Lightbox Plugin für jQuery.
Die deutsche Übersetzung für das Dotclear Plugin wurde von Dotclear-Germany der deutschen Community für die Blog Software Dotclear erstellt.
ColorBox ist mit 6 verschiedenen Themen bereits ausgestattet, um das Äußere Erscheinungsbild der Lightbox zu wählen. Sie können einige von den Themen modifizieren, indem Sie Ihre persönlichen stylesheet und Bilder hinzufügen.
Das Lightbox Classic theme ist speziell : es ist so konzipiert, das es genauso aussieht wie das ehemalige Lightbox Plugin von Olivier Meunier und hat keine Anzahl Zähler und keine Slideshow Befehle.
ColorBox modales Fenster kann komplett mit CSS gestylt werden, und seine Bilder in der Navigation modifiziert.
ColorBox erlaubt es, das für jedes Thema Sie einen persönlichen Stylesheet definieren können und diesen in Ihren Public oder Ihren Theme-Ordner speichern können. Diese Regel werden die bestehenden Themen Regeln überschreiben.
Wie geht das?
Sie können Ihre persönlichen Dateien in folgenden Ordnern speichern:
In dem gewählten Ordner, erstellen Sie zuerst die notwendigen Unterverzeichnisse, um die folgende Hierarchie zu bekommen :
colorbox/themes/x/
wobei x die Nummer des Themes ist die Sie ändern möchten. In diesen Ordner laden Sie alle Änderungen genau für dies Theme. Wiederholen Sie diesen Vorgang jedesmal wenn Sie ein and change each time x Theme ändern bzw. modifizieren wollen.
Fügen Sie nun im Verzeichnis x ein Stylesheet mit dem Namen colorbox_user.css hinzu, wo nur die Regeln enthalten sind, die Sie wollen für Ihr Theme.
#cboxOverlay{background-color:red;}
wenn Sie z.B. möchten das Ihr Hintergrund Fenster von der Lightbox in Rot erscheint.
Wenn Sie Ihre Navigation Grafiken anpassen möchten, laden Sie bitte Ihre Bilder in den persönlichen Ordner den Sie angelegt haben und verküpfen diese in der colorbox_user.css dementsprechend.
Standardmäßig ist ColorBox nur für Bilder innerhalb von Beiträgen aktiviert.
Wenn Sie es für die zusätzliche Blöcke aktivieren wollen, geben Sie hier die Liste der jQuery-Selektoren, durch Kommata getrennt, die diesen Blöcken entsprechen.
Zum Beispiel, wenn Sie ColorBox für die Blöcke #sidebar und #pictures aktivieren wollen, schreiben Sie bitte:
div#sidebar,div#pictures
in das entsprechende Feld. Bitte beachten Sie, dass die Bilder in den entsprechenden enthaltenen Blöcken als getrennte Gruppen von Bildern in der Slideshow betrachtet werden können.
Wenn Sie das Feld leer lassen, werden nur Bilder in den Post Beiträgen in der ColorBox angezeigt.
| Option | Standard | Beschreibung |
|---|---|---|
| Transition type | "elastic" | Der transition type kann auf "elastic", "fade" oder "none" gesetzt werden. |
| Transition speed | 350 | Stellt die Geschwindigkeit des Fades und elastischen Übergänge, in Millisekunden. |
| Opacity | 0.85 | Die Overlay-Opazität. Bereich: 0 bis 1. |
| Auto open ColorBox | false | Wenn true, wird die Lightbox automatisch und ohne Eingabe von den Besuchern geöffnet. |
| Enable preloading for photo group | true | Ermöglicht das springen mit 'Weiter' und 'Zurück' von Inhalt in einem gemeinsamen Gruppen Zusammenhang stehen (dieselben Werte für die 'rel-Attribut), nachdem der aktuelle Inhalt fertig geladen ist. Setzen Sie auf 'false' um dies zu deaktivieren. |
| Enable close by clicking on overlay | true | Wenn true, ermöglicht das Schließen der ColorBox durch Klicken auf den Hintergrund-Overlay. |
| Enable slideshow | false | Wenn true, fügt eine automatische Diashow zu einer Gruppe von Bildern hinzu. |
| Auto start slideshow | true | Wenn true, die Slidesshow wird automatisch gestartet. |
| Slideshow speed | 2500 | Definiert die Geschwindigkeit der Slideshow, in Millisekunden. |
| Slideshow start display text | "start slideshow" | Text für den Slideshow Start Button. |
| Slideshow stop display text | "stop slideshow" | Text für den Slideshow Stop Button |
| Key | Standard | Beschreibung |
|---|---|---|
| Standard Titel | false | Hier kann als Anchor ein alternativer Titel für die ColorBox eingetragen werden. |
| Aktuelle Text | "{current} of {total}" | Text-Format für die Inhalte Gruppe / Galerie zählen. {current} und {total} werden erkannt und ersetzt mit konkreten Zahlen, während ColorBox läuft. |
| Vorheriger Text | "previous" | Text für die vorherige Schaltfläche in einer gemeinsamen Beziehung Gruppe (gleiche Werte für 'rel-Attribut). |
| Nächster Text | "next" | Text für die nächste Schaltfläche in einer gemeinsamen Beziehung Gruppe (gleiche Werte für 'rel-Attribut). |
| Schliessen Text | "close" | Text für den Schliessen Button. Die 'Esc' Taste schließt ebenfalls die ColorBox. |
| Schleife auf Slideshow Bilder | true | Wenn 'true' erzeugt ColorBox eine Schleife der Bilder (Klickt man auf das letzte Bild so springt Colorbox wieder zum ersten Bild). |
| Zeigen Sie den Inhalt in einem iframe | false | Wenn 'true', werden die Inhalte in einem iFrame angezeigt. |
| Key | Standard | Beschreibung |
|---|---|---|
| Feste Breite | false | Erzeugt eine feste totale Breite. Dies schließt Grenzen und Schaltflächen ein. Beispiel: "100%", "500px", oder 500 |
| Feste Höhe | false | Erzeugt eine feste totale Höhe. Dies schließt Grenzen und Schaltflächen ein. Beispiel: "100%", "500px", oder 500 |
| Feste Breite innen | false | Dies ist eine Alternative zu 'Feste Breite' um eine innere feste Breite einzustellen. Dies schließt die Grenzen und Schaltflächen aus. Beispiel: "50%", "500px", oder 500 |
| Feste innere Höhe | false | Dies ist eine Alternative zu 'Feste Höhe' um eine innere feste Höhe einzustellen. Dies schließt die Grenzen und Schaltflächen aus. Beispiel: "50%", "500px", oder 500 |
| Fotos skalieren | true | Wenn 'true', und wenn maxWidth, maxHeight, innerWidth, innerHeight, Breite oder Höhe definiert wurden, wird ColorBox Fotos skalieren, innerhalb der diese Werte passen. |
| Zeige überlaufenden Inhalt | false | Wenn 'false', wird ColorBox scrollbars zeigen, um Inhalt zu überfluten. Das konnte auf der Verbindung mit der in der Größe anpassen Methode (sieh unten) für einen glatteren Übergang verwendet werden, wenn Sie Inhalt an einem bereits offenen Beispiel von ColorBox anhängen. |
| ursprüngliche Breite | 300 | Stellen Sie die ursprüngliche Breite, vor jeglicher Inhalte geladen werden. |
| ursprüngliche Höhe | 100 | Stellen Sie die ursprüngliche Höhe, vor jeglicher Inhalte geladen werden. |
| Max Breite | false | Stellen Sie eine maximale Breite für geladene Inhalt. Beispiel: "100%", 500, "500px" |
| Max Höhe | false | Stellen Sie eine maximale Höhe für geladene Inhalt. Beispiel: "100%", 500, "500px" |
| Option | Standard | Beschreibung |
|---|---|---|
| Callback Name für onOpen Aktion | false | Rückrufaktion, die direkt vor ColorBox schießt, beginnt sich zu öffnen. |
| Callback Name für onLoad Aktion | false | Rückrufaktion, die direkt vor dem Versuchen schießt, den Zielinhalt zu laden. |
| Callback Name für onComplete Aktion | false | Rückrufaktion, die direkt nach dem geladenen Inhalt schießt, wird gezeigt. |
| Callback Name für onCleanup Aktion | false | Rückrufaktion, die am Anfang des nahen Prozesses schießt. |
| Callback Name für onClosed Aktion | false | Rückrufaktion, die einmal ColorBox schießt, wird geschlossen. |
ColorBox zeigt nicht nur Bilder. Hier sind einige Beispiele für andere Möglichkeiten dies Sie ausprobieren können
Erzeugen Sie eine Datei mit dem Namen test.html mit dem HTML-Code, den Sie in der ColorBox anzeigen möchten, zum Beispiel
<p>Test</p>
<p><img src="/public/test.jpg" alt="" /></p>
Senden Sie die Datei und das Bild in Ihren public Ordner.
Schreiben Sie folgendes (wiki syntax) in Ihren Eintrag:
///html
<script type="text/javascript">
$(document).ready(function(){
$(".html").colorbox();
});
</script>
<p><a class="html" href="/public/test.html" title="My pretty html">html</a></p>
///
Wenn Sie auf den Link, test.html klicken, wird es in der ColorBox dargestellt.
Auf der gleichen Idee, wenn test.html enthält einen Video-Player-Code in seinem object tags, wird das Video in ColorBox angezeigt.
Möglichkeiten, die dieses System bietet, sind zahlreich und interessant...