Wie bekomm ich die Slimbox eingebunden?

Webdesign & Technik HTML & CSS
1

Hallo zusamm!

Was Galerien auf HPs angeht, bin ich kompletter Anfänger… ich habe etwas im Inet gesucht und dabei die Slimbox gefunden die mir ganz gut gefällt und die ich einbinden will…

Nun aber mein Problem… ich habe mir also diese Galerie runtergeladen und entpackt… da habe ich jetzt eine Index Datei in der steht was ich wie und wo einbinden soll… leider hilft mir das nicht wirklich weiter da ich nur Bahnhof davon verstehe…

Ich habe jetzt auf meiner HP eine Seite die sich Galerie nennt… wo da genau muss ich das ganze Scriptzeug der Slimbox einfügen?..

Wäre super wenn mir das mal wer schrittweise und verständlich erklären könnte, was ich wo einbinden muss… vielen Dank schonmal!

Alles Liebe
Lycia :astonished:

2

Huhu,

Erstmal solltest du den ganzen Kram hochladen.

Slimbox ist eine auf Mootools basierende Galerie-Erweiterung. Und um jetzt Mootools zu verwenden musst du in deiner HTML-Datei zwischen und diese zwei Zeillen einfügen, die sowohl die Mootools- als auch die Slimbox-Scripte laden.

[code]

[/code]

Damit das ganze jetzt auch ein Design bekommt musst du die CSS ebenfalls dort im Head-Bereich einfügen. Wenn du bereits für deine homepage eine CSS-Datei hast empfiehlt es sich die Inhalte der Slimbox-CSS in deine CSS zu übernehmen.

<link rel="stylesheet" href="css/slimbox.css" type="text/css" media="screen" />

Idealerweise solltest du jetzt 3 neue Zeilen im Head-Bereich haben.

Alles ab hier gehört in den Bereich zwischen und

Dann musst du die Bilder in ein Verzeichnis deiner Wahl legen und anschießend verlinken.
zum normalen Verlinken benutzt man

Um jetzt aber das ganze in dieser Lightbox aufzurufen fügt man einfach ein neues Fragment ein (rel=“lightbox”)

Bei a href ist es egal ob du den Link absolut /http://deinseite.tld/ordner/bild.jpg) oder relativ
(/ordner/bild.jpg) angibst, solange die bilder auf deinem eigenen Webspace sind.

Schließlich gibt es noch die Möglichkeit mehrere Bilder als “zusammengehörig” zu markieren und somit in Kategorien zusammenzufassen. Dies geschieht hier in eckigen Klammern. Meine Galerie nenne ich einfach mal Reisen. Nun kann man auf bild 1 klciken und mit Pfeilen rechts und links vom Bild dann zu bild 2 und Bild 3 navigieren.

<a href="pfad/bild1.jpg" rel="lightbox[Reisen]">Bild #1</a> <a href="pfad/bild2.jpg" rel="lightbox[Reisen]">Bild #2</a> <a href="pfad/bild3.jpg" rel="lightbox[Reisen]">Bild #3</a>

3

Hallo!

Danke erstmal für die ausführliche Erklärung… ABER…

iwas passt bei mir nicht :unamused: schau es dir selbst an… bei mir schaut das so aus… syro4.bplaced.net/TalinaHp/galerie.html … also iwie nicht so wie es sein sollte…

Alles Liebe
Lycia

4

Statt

5

Ok danke… nun kann ich Bild 1-3 anklicken und dann erscheint das Bild auf einer neuen Seite… erklärt mich für blöd, aber so habe ich mir das nicht vorgestellt o.0 … ich dachte wenn ich das mit der Slimbox einbinde dann bekomme ich kleine Bildchen (Thumbnails - so heißen die oder?) die dann auf der Seite wo ich bin groß werden und ich dann vor und zurück klicken kann… so wie das auf der Index Datei, also diese Testseite auch ist wenn ich auf die Beispiel Bilder klick…

Also was bitte mach ich da falsch :astonished: … ich hoffe es hilft mir wieder jemand weiter :slight_smile: bin ganz begeistert von euch :wink: weil ihr so nett und vorallem verständlich einem weiterhelft (auch wenn man in wie ich bei Galerien absoluter Laie ist…

Alles Liebe
Lycia

6

Huhu,
so läuft das hier bei :bp:

Schau dir mal das hier an:

Im rel-Tag von aschachinger findet sich:

Und in meinem:

Das sollte eigentlich schonmal dafür sorgen, dass das Bild nicht in einem neuen Fenster geöffnet wird.

7

Eine Anleitung in deutsch hast du doch offenbar gleich mit
raufgeladen: syro4.bplaced.net/slimbox_deutsch/

Jedenfalls soweit ich das verstanden habe, bastelt man sich die
Vorschaubildchen selber - ist in dem Beispiel wohl auch so
gemacht, da wird ein statisches Bild eingebunden.

Bei deaktiviertem Skript kann man beim Anklickern des Verweises
nicht mehr erwarten als die Anzeige des Bildes, auf welches
verwiesen wurde. Dafür braucht man sonst nichts weiter.
Sonst braucht man offenbar die angegebenen Skripte und die
CSS-Datei, die aber bei dir nicht existieren, zumindest nicht dort,
wo im script-Element bze link-Element angegeben wird, wo sie
sein sollten ;o)
Ohne dies ist es aber egal ob Skript aktiviert oder nicht - hat
den gleichen Effekt, weil die Skripte an sich nicht auffindbar sind.
Die mußt du entweder ins passende Verzeichnis stecken oder die
Angaben in den script-Elementen ändern…

(aktuell sind die Skripte übrigens hier:
syro4.bplaced.net/slimbox_deutsch/js/
syro4.bplaced.net/slimbox_deutsch/css/
)

8

ooh…tut mir leid auf das hab ich gar nicht geschaut…mir ist nur aufgefallen das dein pfad falsch war :red:

9

Kann ja passieren :wink: Ich hab ja den Fehler im Pfad verursacht :ps:

Ich hab ja im in meinem ersten Post schon geschrieben:

will sagen: Dass die Slimbox keine vollständige Galerie darstellt, sondern eben nur das Java-Overlay mit entsprechender Navigation.

10

Omg :ps: also muss ich die beiden Dateien die falsch liegen, in den Ordner stecken wo auch meine Hp ist, ja? Habe ich das soweit richtig verstanden?..

@kerbination Ich habe nur …/ übernommen… ansonsten habe ich lightbox stehen lassen…

11

Dann sollte es eigentlich funktionieren… Zumindest läuft es bei mir im FF3 einwandfrei.