Lightbox - wie richtet man das ein?

[myriade]

Hallo zusammen,

mit Müh und Not habe ich mein CMS eingerichtet und brauche nun ein Tool, mit dem ich Bilder so einrichten kann, dass man sie "groß klicken" kann: Lighthouse 

Ich stoße hier aber irgendwie an die Grenzen... ich kapiere nicht, wie man das einrichtet. Und wo man die Scripte einfügen soll

Kann mir das vielleicht jemand auf deutsch erklären - das wäre wirklich sehr nett!

Viele Grüße
Angela

[cyberman]

Hallo Angela,

mit Müh und Not habe ich mein CMS eingerichtet

Hättest ja auch eher fragen können  ...

und brauche nun ein Tool, mit dem ich Bilder so einrichten kann, dass man sie "groß klicken" kann: Lighthouse 

Meinst du so etwas wie das Lightbox-Modul?

http://dev.cmsmadesimple.org/projects/lightbox/

Die deutsche Sprachdatei gibt es hier

http://dev.cmsmadesimple.org/frs/downlo ... x1-0-1.zip

Kann mir das vielleicht jemand auf deutsch erklären - das wäre wirklich sehr nett!

... und das nächste Mal eher fragen .

[myriade]

Hallo cyberman,

Vielen Dank für Deine Hilfe 
... die aber wohl noch mal in Anspruch nehmen muss 

Hättest ja auch eher fragen können  ...

na - bis dahin klappte es ja mit ein wenig eigener Anstrengung und Lernwillen

Meinst du so etwas wie das Lightbox-Modul?

ja klar: Lightbox! Wie kam ich nur auf Lighthouse... ich finde ja nicht mal die Musik dieser Family gut 

http://dev.cmsmadesimple.org/projects/lightbox/

Danke für den Link. Das Teil hatte ich schon installiert.... weiß halt nur nicht, wie ich es ans laufen bringen soll..

Die deutsche Sprachdatei gibt es hier
http://dev.cmsmadesimple.org/frs/downlo ... x1-0-1.zip

ah! Ich hoffe, dass mich das nun weiterbringt... aber irgendwie stehe ich komplett auf dem Schlauch! Was mache ich mit dieser Datei? Was soll ich in das Template kopieren?

... und das nächste Mal eher fragen .

nenene - erst wenn's brennt 

Dank + viele Grüße
Angela

[cyberman]

Die deutsche Sprachdatei gibt es hier
http://dev.cmsmadesimple.org/frs/downlo ... x1-0-1.zip

ah! Ich hoffe, dass mich das nun weiterbringt... aber irgendwie stehe ich komplett auf dem Schlauch! Was mache ich mit dieser Datei?

Das ist die deutsche Sprachdatei - die muss in das /lang/ext-Verzeichnis des Moduls. Damit ist unter anderem die Hilfe des Moduls in deutsch.

Um dieses Modul zum Laufen zu bekommen, benötigst du noch ein weiteres Modul - CGExtensions

http://dev.cmsmadesimple.org/frs/downlo ... 1.8.tar.gz

Erst dieses Modul und dann Lightbox installieren (Administration, Erweiterungen > Module)

Im head-Bereich deines Templates gibst du

Code: Select all

{LightBox action='css'}
{LightBox action='js'} 

ein. Und im Content (bei Erstellung der Seite) kannst du dann

Code: Select all

{LightBox image='imagefile.gif'}

eingeben.

[myriade]

hmm, wie doof - es ist nicht möglich die deutsche Hilfedatei in den Ordner zu kopieren 
Ich kann die Rechte auch nicht ändern und wüsste nicht, wie - außer per ftp - ich dies tun könnte (falls es an den Rechten liegt - aber wieso sonst sollte man mir verbieten, was in den Ordner zu kopieren).
Aber ich werde dann einfach diese Scripte versuchen dort einzufügen, wo sie hinsollen und dann mal weitersehen...

Danke erstmal 

[myriade]

also ist das egal, wo ich die Tags einfüge?

Hier habe ich es reinkopiert:



{sitename} - {title}

{metadata}

{stylesheet}

{LightBox action='css'}
{LightBox action='js'}

{cms_selflink dir="start" rellink=1}
{cms_selflink dir="prev" rellink=1}
{cms_selflink dir="next" rellink=1}

{literal}


und wo ich das letzte Tag einfügen soll, weiß ich auch nicht genau. Irgendwie bin ich zu blöd. Ich weiß auch gar nicht, was ich am Ende mit diesen Parametern soll. Ich glaub' ich geb's auf 

[NaN]

also ist das egal, wo ich die Tags einfüge?
...

Im Prinzip ja.
Aber im Headbereich Deines Templates ist es auf jeden Fall am besten aufgehoben.
Dann ist das JavaScript und das entsprechende CSS immer verfügbar.

...
und wo ich das letzte Tag einfügen soll, weiß ich auch nicht genau. Irgendwie bin ich zu blöd. Ich weiß auch gar nicht, was ich am Ende mit diesen Parametern soll. Ich glaub' ich geb's auf 

Nicht doch.
Hast es doch fast geschafft.
Das letzte Tag gibst Du z.B. im Content ein.
Jedes Bild, dass du dort anzeigen lassen möchtest wird mit {LightBox image='/Pfad_zum_Bild/BildDatei'} im Editor eingefügt. Wichtig: den Schrägstrich am Anfang des Pfades nicht vergessen.

Bsp: {LightBox image='/uploads/images/logo1.gif'}

Bei diesem Beispiel wird ein kleiner Grafikbutton angezeigt. Wenn man da drauf klickt, erscheint das Bild in Groß mit hübscher Lightbox und allem Drum und Dran.

Zu den Parametern:

Jetzt wirds etwas konfus. Da musste ich selber etwas rumprobieren.
Das Modul scheint noch nicht ganz ausgereift zu sein.

Bsp: {LightBox image='/uploads/images/logo1.gif' title="LOGO" thumb="uploads/images/thumb_logo1.gif"}

title dürfte klar sein. Entspricht dem Title-Attribut bei Bildern ()

thumb : Hier gibst Du den Pfad zum Vorschaubild an. Allerdings ohne Schrägstrich am Anfang.

Der BildManager erstellt automatisch beim Hochladen von Bildern oder beim Browsen durch einen Ordner, der Bilder enthält, kleine Vorschaubilder (thumbnails).
Standardmäßig werden die Thumbnails im selben Ordner mit dem Präfix "tumb_" erstellt. (Diese Einstellungen und die Größe der Thumbnails können in einer separaten config-Datei - lib/filemanager/imagemanager/config.inc.php - geändert werden)
Daher habe ich jetzt für den Parameter "thumb" die Datei "thumb_logo1.gif" gewählt (die war einfach schon da).
Du kannst natürlich auch eigene Vorschaubilder hochladen und deren Dateinamen für den Parameter "thumb" angeben.

Wenn Du eine komplette Bildergallerie für Deine Seite brauchst, kannst Du auch das Modul Album verwenden.
Das Modul benutzt ebenfalls Lightbox.

[myriade]

oooohhh - Herzlichen Dank NaN, damit hast Du mir so geholfen!!!! Es ist ja so einfach.... nie hätte ich das im Editor eingegeben, jedes xml oder php oder sonstwas hätte ich mir vorstellen können - aber auf den normalen Editor wäre ich niemals gekommen 

Super - ich habe es nun hinbekommen!

Nun muss ich nur noch friemeln, um kleine und grooooße Bilder zu erstellen und entsprechend einzufügen....
ich glaube, dass mit den Parametern habe ich sogar auch endlich begriffen - das hilft ja sogar für andere Module etc 

Danke, Danke, Danke    ich freu mich so, dass es klappt     

[myriade]

sodele - auf dieser Seite habe ich es schon umgesetzt: http://www.angel-soaps.de/index.php?page=link

allerdings sind die container teilweise so lang, dass man runterscrollen muss. Ich habe im .css schon hier rumgefuhrwerkt:

#outerImageContainer{
position: relative;
background-color: #fff;
width: 250px;
height: 250px;
margin: 0 auto;
}

hat aber nix gebracht 
Falls noch jemand eine Idee hat, wie man die Container anpassen kann... wäre das extrem klasse 

Kann man die neuere Lightbox, Version 2.04, eigentlich auch schon benutzen? da kann man mehrere Bilder hintereinander in die Box schubsen. Das wäre auch hübsch. Ist aber bestimmt wieder schwieriger 

[cyberman]

da kann man mehrere Bilder hintereinander in die Box schubsen.

Das sollte eigentlich mit dem rel Parameter funktionieren ...

[myriade]

Das sollte eigentlich mit dem rel Parameter funktionieren ...

sorry, aber ich weiß nicht wie und finde es auch nicht in der Hilfe-Funktion.

Auch finde ich nicht, wie man das weiße Fenster verkleinern, bzw. dem Foto anpassen kann. Habe schon alles mögliche probiert, nur leider erfolglos. Wenn man hier: http://www.angel-soaps.de/index.php?page=cocopacabana auf ein Foto klickt, dann sieht man, dass der weiße Rahmen viel zu groß ist. Das würde ich so gern ändern.... 

Liebe Grüße
Angela

[cyberman]

Das sollte eigentlich mit dem rel Parameter funktionieren ...

sorry, aber ich weiß nicht wie und finde es auch nicht in der Hilfe-Funktion.

(optional) name="" - Geben Sie einen Namen für den rel Link an. Dies kann verwendet werden, um Bilder bestimmten Gruppen zuzuordnen. Außerdem kann dann zwischen den Bildern hin und her geblättert werden.

auf ein Foto klickt, dann sieht man, dass der weiße Rahmen viel zu groß ist.

Hast du die Lightbox-CSS schon überprüft?

Vermutlich ist div#hoverNav dafür verantwortlich ...

[myriade]

das einzige entsprechende habe ich hier versucht zu ändern:

}
#hoverNav{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

hat leider auch nix gebracht.

was ist ein "rel Link" * ? Ich danke Dir für Deine Hilfe, die mich wirklich auch weiterbringt, aber Du traust mir da zuviel Hintergrundwissen zu - bin leider nur seifensiedende Sozialwissenschaftlerin 

*ich schließe ja auf "relativer" Link - aber ich tappe trotzdem durchs Tal der Ahnungslosen. Wie stellt sich ein relativer Link dar? Oder nee... related - auf jeden Fall eine sehr undankbare Google-Abfrage ... da komme ich auch nicht weiter 

[NaN]

Das Prinzip von "rel-Links" wird ganz gut bei SelfHTML erklärt.
Hat tatsächlich etwas mit Relationen zu tun.

http://de.selfhtml.org/html/kopfdaten/b ... tm#quellen