Slimbox - eine (bessere) Lightbox Alternative

Antworten
Admin
Administrator
Beiträge: 83
Registriert: Di 19. Aug 2014, 10:47

Slimbox - eine (bessere) Lightbox Alternative

Beitrag von Admin » Do 21. Aug 2014, 15:58

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/" onclick="window.open(this.href);return false;

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
Dieses Tutorial wurde am 31.01.2009 von Manni_T für KompoZer-Web erstellt.

do-se
Beiträge: 7
Registriert: Mo 8. Dez 2014, 23:53

Re: Slimbox - eine (bessere) Lightbox Alternative

Beitrag von do-se » Di 9. Dez 2014, 00:11

Hallo zusammen

Jetzt wollte ich diese Möglichkeit mit Slimbox2 mal ausprobieren und entdecke, dass man da jQuery braucht. :shock:
Auf den weiterführenden link habe ich nun die Qual der Wahl.
Im downloadbereich weiß ich nicht was ich mir holen soll.
Habs schon mit Version 1.11 probiert, habe aber das dumme Gefühl, dass da noch etwas fehlt.

Wenn ich nach obiger Anleitung vorgehe, dann erscheinen keine Minibilder auf der Hauptseite sondern nur die Bildnamen.
Wenn ich auf die Namen klicke, dann startet die Bildershow, aber die Bilder sind riesengroß.

Wäre für einen kleinen Tip echt dankbar.

Liebe Grüße

camouflage1984
Beiträge: 244
Registriert: Di 19. Aug 2014, 14:34

Re: Slimbox - eine (bessere) Lightbox Alternative

Beitrag von camouflage1984 » Di 9. Dez 2014, 15:29

Hallo do-se

Wenn du die slimbox heruntergeladen hast die Seite example.html im Firefox öffnest und dann in den Quelltext gehst siehst du sowas
do-se-1.jpg
do-se-1.jpg (62.04 KiB) 6274 mal betrachtet
dann klickst du auf den Link von jQuery und du wirst hier weitergeleitet:
do-se-2.jpg
do-se-2.jpg (214.42 KiB) 6274 mal betrachtet
hier markierst du alles und lädst es auf deinen Rechner speicherst es in dem Ordner ab wo auch die Slimbox ist im Ordner js und nennt sie jquery.min.js

Dann änderst du den Link

Code: Alles auswählen

<script type="text/javascript" src="js/jquery.min.js"></script>
und schon kannst du offline damit arbeiten ;)

Oder du lädst die js Datei hier
jquery.min.js.zip
(31.32 KiB) 190-mal heruntergeladen
herunter :mrgreen:

Gruß
camouflage1984
Lachen ist gesund :-)
camouflage1984.de Webseite / wzp-galipix Das Galerie Script / wzp-cms Das einfache CMS / wzp-webdesign

do-se
Beiträge: 7
Registriert: Mo 8. Dez 2014, 23:53

Re: Slimbox - eine (bessere) Lightbox Alternative

Beitrag von do-se » Mi 10. Dez 2014, 16:30

Hallo camouflage1984

Vielen Dank für den Schubser und die richtige Version von jQuery.
Habe alles entsprechend im Quellcode eingefügt und ausprobiert.

Das Ergebnis ist das selbe. Keine Vorschaubilder und auf Klick kommt die Show mit Riesenbildern.

Und jetzt ist der Groschen endlich gefallen und ich würde am liebsten im Boden versinken.
Slimbox erzeugt die Show und macht noch lange keine passenden Bilder. :oops:

Das heißt, ich müsste alle meine Bilder erst als Thumbnail und einmal als reduzierte Größe bereitstellen und dann einbinden....Uff

Dabei habe ich doch schon eine schicke Galerie. Die "WZP-Galipix" erzeugt die Thumbnails und die Show wird auch richtig dargestellt. Nur eben in der Galerieseite und nicht auf meiner Seite direkt. Die Thumbnails konnte ich mir schon mal mopsen und einbinden, die Show natürlich so direkt nicht.
Wie kann ich diese Show in meiner Webseite integrieren?

Die Frage gehört zwar jetzt nicht mehr zum Thema Slimbox, aber vielleicht gibt es ja schon eine Anleitung, die ich bis jetzt noch nicht gefunden habe.

Viele Grüße

camouflage1984
Beiträge: 244
Registriert: Di 19. Aug 2014, 14:34

Re: Slimbox - eine (bessere) Lightbox Alternative

Beitrag von camouflage1984 » Do 11. Dez 2014, 00:11

Hallo do-se

Hier kann ich dir dieses Script empfehlen http://www.wzp-galipix.com/galerie.html

Das Script erstellt vorschaubilder, diese werden automatisch mit den Originalen verknüpft und dann in der Lytebox angezeigt. Natürlich kannst du die Anzeige auf Slimbox einstellen ;)

Code: Alles auswählen

<li>
        <a href="<?php echo $bildinfo['dirname']."/".utf8_encode($bildinfo['basename']);?>"  class="lytebox"  data-lyte-options="group:vacation" 
        title="<?php echo ($bildinfo['filename']); ?>">
        <img src="<?php echo $image->getResource(); ?>" width="<?php echo $image->getWidth(); ?>" height="<?php echo $image->getHeight(); ?>" /></a>
        <span><?php echo ($bildinfo['filename']); ?></span>
    </li>
in dem du anstatt class="lytebox" --> rel="lightbox" einträgst.

Damit das Script funktioniert muss du die Seite in der du es einbindest auf .php enden.
Damit du auch mehrere Galerien erstellen kannst musst du nur die Datei ausgabe.php kopieren und umbennen zum Beispiel in galerie_a.php, galerie_b.php, galerie_c.php und diese dann einbinden.

Code: Alles auswählen

<title>Galerie 1</title>
<script type="text/javascript" language="javascript" src="lytebox/lytebox.js"></script>
<link rel="stylesheet" href="lytebox/lytebox.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/light.css" type="text/css">
</head>
<body>
<div id="light">
<?php include('galerie_a.php');?>    
</div>
</body>
</html>

Damit das in der Slimbox angezeigt wird musst du dann das hier oben eintragen:

Code: Alles auswählen

<title>Galerie 1</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/slimbox2.js"></script>
<link rel="stylesheet" href="css/slimbox2.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/light.css" type="text/css">
</head>
<body>
<div id="light">
<?php include('galerie_a.php');?>    
</div>
</body>
</html>
So kannst zig Galerien einbinden. ;)
Wenn noch Fragen sind nur Fragen....

Gruß
camouflage1984
Lachen ist gesund :-)
camouflage1984.de Webseite / wzp-galipix Das Galerie Script / wzp-cms Das einfache CMS / wzp-webdesign

do-se
Beiträge: 7
Registriert: Mo 8. Dez 2014, 23:53

Re: Slimbox - eine (bessere) Lightbox Alternative

Beitrag von do-se » Di 16. Dez 2014, 21:14

So, nach langem grübeln und probieren hänge ich doch wieder fest, schreib aber mal meine bisherigen Ergebnisse.

Die Slimbox funktioniert einwandfrei.
Man muss nur die Bilder entsprechend vorbereiten und hat dann eben die Arbeit jedes einzubinden.
Bei Änderungen/Ergänzungen ist es etwas mühsamer alles zu finden.
Die Show läuft sehr schnell.

Die wzp-light funktioniert ebenfalls einwandfrei und man hat praktischerweise keine/kaum Arbeit.
Änderungen laufen über Dateiinhalte der angelegten Verzeichnisse.
Die Show ist bei langsamen System und zu großen Bildern etwas zäh und macht dann nicht wirklich Spaß.

Wo ich mir zuvor etwas die Haare gerauft habe, als ich partout beide Shows als Vergleich auf eine Seite packen wollte.
Da geht nämlich weder die eine noch die andere.
Vermutlich kommen sich die scripte ins Gehege.

Ich poste mal den nicht funktionierenden Header-Bereich:

Code: Alles auswählen

<html><head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type"><title>Galerie</title>
  
<link rel="stylesheet" href="style04.css" type="text/css">
	
<script type="text/javascript" language="javascript" src="lytebox/lytebox.js"></script>
<link rel="stylesheet" href="lytebox/lytebox.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/light.css" type="text/css">
	
<script type="text/javascript" src="slimbox/js/jquery.min.js"></script>
<script type="text/javascript" src="slimbox/js/slimbox2.js"></script>
<link rel="stylesheet" href="css/slimbox2.css" type="text/css">

</head><body>
Deine Alternative, in der wzp-light die slimbox anstatt der lytebox zu integrieren funktioniert gar nicht.
Wenn ich deinen Code von oben in meine Header-Bereich einfüge dann wird die Seite gar nicht aufgerufen und bringt diese Fehlermeldung:
"Parse error: syntax error, unexpected '>' in /users/do-se/www/Meine_HP/test_lyte_slim.php on line 8"

line 8 beginnt bei mir mit diesem Teil:

Code: Alles auswählen

<? -->
Fehlt da vielleicht in deiner Anleitung noch etwas?

camouflage1984
Beiträge: 244
Registriert: Di 19. Aug 2014, 14:34

Re: Slimbox - eine (bessere) Lightbox Alternative

Beitrag von camouflage1984 » Mi 17. Dez 2014, 03:17

Hallo do-se

Code: Alles auswählen

<? -->
das darf da nicht hinein ;) , es war von mir nur als Pfeil gedacht damit man genau sieht was geändert werden muss.

Code: Alles auswählen

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/slimbox2.js"></script>
<link rel="stylesheet" href="css/slimbox2.css" type="text/css" media="screen">
So sollte die einbindung aussehen ;) Ich werde das mal im Post ändern :!:

Beide scripte können nicht miteinander ;)

Der gravierende unterschied zwischen Slimbox und lytebox ist, das bei der Slimbox das Original Bild in original größe angezeigt wird... in der lytebox wird das Original an den Bildschirm angepasst!
Lachen ist gesund :-)
camouflage1984.de Webseite / wzp-galipix Das Galerie Script / wzp-cms Das einfache CMS / wzp-webdesign

do-se
Beiträge: 7
Registriert: Mo 8. Dez 2014, 23:53

Re: Slimbox - eine (bessere) Lightbox Alternative

Beitrag von do-se » So 21. Dez 2014, 15:07

Kicher, das kommt davon, wenn man Codes übernimmt, die man nicht versteht. :lol:
Danke, dass du es oben entsprechend umgeschrieben hast.

Kaum ist der Fehler behoben, kann ich meine Testseite auch wieder aufrufen. ;)

Den Headerbereich habe ich entsprechend angepasst
und dann in der "ausgabe.php" "lytebox" gegen "lightbox" getauscht

Code: Alles auswählen

?>
<li>
 <a href="<?php echo $bildinfo['dirname']."/".utf8_encode($bildinfo['basename']);?>" class="lightbox" data-lyte-options="group:vacation" 
 title="<?php echo ($bildinfo['filename']); ?>">
 <img src="<?php echo $image->getResource(); ?>" width="<?php echo $image->getWidth(); ?>" height="<?php echo $image->getHeight(); ?>" /></a>
 <span><?php echo ($bildinfo['filename']); ?></span>
</li>  
<?php
Die Vorschaubildchen werden korrekt angezeigt, die Show funktioniert aber nicht. :?:
Was mache ich noch falsch?

lg
do-se

camouflage1984
Beiträge: 244
Registriert: Di 19. Aug 2014, 14:34

Re: Slimbox - eine (bessere) Lightbox Alternative

Beitrag von camouflage1984 » So 21. Dez 2014, 15:40

Hallo do-se

Du musst

Code: Alles auswählen

 rel="lightbox"
und nicht

Code: Alles auswählen

 class="lightbox"
einfügen.
Sorry ich glaube das habe ich nicht geändert bei der Anleitung....... :roll:

Gruß
camouflage1984
Lachen ist gesund :-)
camouflage1984.de Webseite / wzp-galipix Das Galerie Script / wzp-cms Das einfache CMS / wzp-webdesign

Antworten

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast