Slimbox - eine (bessere) Lightbox Alternative

Hier findest du Tutorien mit Detaillierte Beschreibungen für den KompoZer

Slimbox - eine (bessere) Lightbox Alternative

Beitragvon Manni_T » Sa 31. Jan 2009, 20:19

Hallo zusammen

Beim lernen und basteln mit KompoZer habe ich auch mal die Lightbox ausprobiert.
Leider gab es da kleine Probleme.
So hab ich mich umgeschaut nach Alternativen, welche es zuhauf gibt. Am besten gefällt mir im Moment Slimbox.
Diese gibt es in Version 1.* (derzeit 1.69). Ebenso bekommt man nun eine Version 2.*.
Die deutsche Übersetzung ist im Moment in Version 1.65 hier zu haben.

Die Demoseite des Autors: http://www.digitalia.be/demo/slimbox/

Die Unterschiede von Lightbox und Slimbox:
Erstmal ist die Grundfunktion die Gleiche, es werden nur Bilder dargestellt. Außerdem ist Slimbox kompatibel zu Lightbox (Einstellungen).
Slimbox hat aber nun doch einige Vorteile. Die Größe des ganzen Pakets ist deutlich kleiner.
Es sind nur 2 sehr kleine Scripte nötig. Die CSS ist einiges kleiner. Es sind nur 4 Grafikdateien dabei. Desweitern sind keine IE Hacks notwendig wie z.B.

Code: Alles auswählen
body {
   margin: 0px;
   padding: 0px;
}


Slimbox ist schnell. Bei Lightbox muss erst das Bild fertig geladen werden, bevor man weiter klicken oder beenden kann.
Bei Slimbox kann man ruckzuck z.B. 3 Bilder vorwärts klicken.

Standart sind folgende Tasten:
vorwärts --> Pfeiltaste vor, n
zurück --> Pfeiltaste zurück, p
beenden --> Esc, x, c

Mit der Maus kann man dies natürlich auch bedienen.

Integration:

In der Kopf eurer HTML Datei (vor </head>) müsst Ihr die folgenden beiden Scripte eintragen:
Code: Alles auswählen
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/slimbox.js"></script>


Nun die slimbox.css einbinden.
Code: Alles auswählen
<link rel="stylesheet" href="css/slimbox.css" type="text/css" media="screen" />


Ich habe aber einfach die Einträge der slimbox.css in meine schon vorhandene css Datei kopiert. Die meisten werden ja ein vorhandenes Projekt mit der Slimbox ausbauen wollen.

Wichtig: die Pfade zu den folgenden Dateien müsst ihr in eurer css überprüfen/korrigieren:
Code: Alles auswählen
prevlabel.gif
nextlabel.gif
loading.gif
closelabel.gif


Nun muss zu jedem gewünschten Bild Tag mindestens folgender Eintrag hinzugefügt werden:
Code: Alles auswählen
rel="lightbox"

Ein Beispiel:
Code: Alles auswählen
<a href="bilder/bild_1.jpg" title="Mein neues Bild" rel="lightbox"></a>

Unter title=" " könnt ihr eine Bildbeschreibung eintragen. Diese sieht man dann unten in der Animation.

Hat man nun mehrere zusammengehörende Bilder, kann man diese gruppieren.
Code: Alles auswählen
<a href="bilder/bild_1.jpg" rel="lightbox-galerie"></a>
<a href="bilder/bild_2.jpg" rel="lightbox-galerie"></a>
<a href="bilder/bild_3.jpg" rel="lightbox-galerie"></a>

Die Bezeichnung hängt man mit einem Bindestrich hinter lightbox ran. Laut dem Autor soll man keine eckigen Klammern nehmen, da diese bei einer Validierung nach neuesten Standarts (XHTML, XML) Probleme machen können.
Die Bezeichnung der Gruppierung ist beliebig. Sie dient nur dem Script zum erkennen. Das Script stellt dann die "vor + zurück" Funktion und den Text "Bild x von y" ein.

Das war es schon.

Slimbox lässt sich natürlich umfangreich konfigurieren.
Speziell die Loop funktion hab ich bei mir aktiviert. Somit kann man in einer Gruppierung einfach weiter klicken (vom letzten zum ersten Bild oder anders rum). Weitere Details und Möglichkeiten findet ihr auf der Seite des Autors.

Ich hab nun mal jeweils die aktuellen kompletten Slimbox Versionen auf deutsch gemacht.
Version 1.7 --> neues MooTools Script (aktuell 1.2.2)
Version 2.03 --> basiert auf jQuery (aktuell 1.3.2)

EDIT: Slimbox aktualisiert auf 1.71; Slimbox2 aktualisiert auf 2.03 (04.12.09)
EDIT: Slimbox2 aktualisiert auf 2.04 (06.05.10)

Gruß Manfred
Du hast keine ausreichende Berechtigung, um die Dateianhänge dieses Beitrags anzusehen.
ende
Manni_T
 
Beiträge: 642
Registriert: Sa 17. Jan 2009, 01:08

Re: Slimbox - eine (bessere) Lightbox Alternative

Beitragvon Iguanna » Do 19. Dez 2013, 19:48

Hallo,
funktioniert das mit der Slimbox auch in der Vorschua, oder erst, wenn alles hochgeladen ist?
Iguanna
 
Beiträge: 22
Registriert: Mo 13. Apr 2009, 13:09


Zurück zu KompoZer-Tutorien

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast

cron