Frage zum Lightbox-Tut von Sokie

Nine111 · 25.03.2009

Hallo zusammen,

ich muss erstmal ein dickes Lob ausprechen.
Versuche schon seit Monaten diese Lightboxgeschichte zu installieren.
Nun bin ich überglücklich, dass ich so kurz vor dem Erfolg stehe und kriege einfach die großen Bilder nicht angezeigt.
Ich habe alles anch Anleitung installiert, Ordner angelagt und 2 Probebilder gemacht.

So weit so gut, alles klappt, nur die Grossanzeige funzt nicht, die kleinen Vorschaubilder sind da und das Ladegif der Box kommt auch, nur das Resultat fehlt.

Im Anhang ein par Bildschirmbilder:

Ordnerstruktur

Bilder in Ornder

Ansicht in FF Vorschau

Ladegif der Lightbox

Code hier in schriftl. From:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style.css"/>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

<title>Royal Times Cavaliers</title>
</head>

<body>
<div id="gally">
<h1>paintings</h1>

<h2>painting seite 1</h2>
<p>mal sehen,ob das geht </p>
<a class="tn" href="gross/lennartmini.jpg.JPG" rel="lightbox"> <img src="mini/lennartmini.JPG" /> </a>
<a class="tn" href="gross/zaramini.jpg.JPG" rel="lightbox"> <img src="mini/zaramini.JPG" /> </a>
</body>
</html>

und hier in Bildform. Ich kann mir nicht vorstellen, dass es eine große Sache ist, aber ich bin echt zu blond

-Danke-

CIX88 · 25.03.2009

AW: Frage zum Lightbox-Tut von Zokie

> lennartmini.jpg.JPG

geile Dateiendung

Nine111 · 25.03.2009

AW: Frage zum Lightbox-Tut von Zokie

Warum?
Bin ich bekloppt?
_____

JAAA, bin ich

CIX88 · 25.03.2009

AW: Frage zum Lightbox-Tut von Zokie

> mini/lennartmini.JPG
> gross/lennartmini.jpg.JPG

Sicher das deine Dateinamen richtig sind?

Nine111 · 25.03.2009

AW: Frage zum Lightbox-Tut von Zokie

Nee, habs schon. Ich hab mir hier voll die Mühe gemacht, dass alles in Bildern hochzuladen und dann wars banal wie immer.
Wie meinst du, meine Dateinamen richtig?
Hab jetzt:
<a class="tn" href="gross/lennartmini.jpg" rel="lightbox"> <img src="mini/lennartmini.JPG" /> </a>
<a class="tn" href="gross/zaramini.jpg" rel="lightbox"> <img src="mini/zaramini.JPG" /> </a>

Und das klappt 1a

Eine andere Frage, wie bekomme ich bei den Vorschaubildern den blauen Rand weg, kann ich den auch transparent haben?

CIX88 · 25.03.2009

AW: Frage zum Lightbox-Tut von Zokie

> Wie meinst du, meine Dateinamen richtig?

Naja, erstmal im Bezug auf Klein- und Großschreibung.
Und zum anderen „jpg.JPG” - das ist zwar technisch möglich, macht blos keiner

netbandit · 25.03.2009

AW: Frage zum Lightbox-Tut von Zokie

Nine111 schrieb:
Eine andere Frage, wie bekomme ich bei den Vorschaubildern den blauen Rand weg, kann ich den auch transparent haben?

border="0" in den IMG-TAG

kaaaay · 25.03.2009

AW: Frage zum Lightbox-Tut von Zokie

<a class="tn" href="gross/lennartmini.jpg" rel="lightbox"> <img src="mini/lennartmini.JPG" border"0" /> </a>
<a class="tn" href="gross/zaramini.jpg" rel="lightbox"> <img src="mini/zaramini.JPG" border"0" /> </a>

somit müssten deine blauen Rahmen auch weg sein

lg

edit: wie immer is einer schneller :/

Nine111 · 25.03.2009

AW: Frage zum Lightbox-Tut von Zokie

DANK euch!!! Bin happy

sokie · 25.03.2009

AW: Frage zum Lightbox-Tut von Sokie

Für deine Vorschaubilder empfielt sich die Rahmen per CSS zu entfernen:

Code:

.th img { border: 0 none; }

dann hast du nicht soviel unnötigen code im html

Nine111 · 25.03.2009

AW: Frage zum Lightbox-Tut von Sokie

sokie schrieb:
Für deine Vorschaubilder empfielt sich die Rahmen per CSS zu entfernen:

Code:

.th img { border: 0 none; }

dann hast du nicht soviel unnötigen code im html

Hallo Sokie,
noch mal persönlich, tolles Tutorial!

Wird der code dann am Anfang über der Lightboxgeschichte eingefügt und nur einmalig richtig?

Jetzt ist mir noch eingefallen, dass ich gern diesen weißen Rahmen der Lighbox abändern möchte, gibt es da eine Möglichkeit eigene Hintergründe einzufügen? Falls ja, kann ich dies ebenfalls in der js-Datei ändern? Ich habe dort so einiges gelesen, wie Rahmenbreite usw. allerdings nirgens, dass die Fabe weiß bestimmt ist. Weiß da noch jemand einen guten Tipp?

Bigmemo · 26.03.2009

AW: Frage zum Lightbox-Tut von Sokie

...
über die lightbox.css...damit kannst du das aussehen von lightbox ändern...

Nine111 · 26.03.2009

AW: Frage zum Lightbox-Tut von Sokie

Bigmemo schrieb:
...
über die lightbox.css...damit kannst du das aussehen von lightbox ändern...

Danke, klappt mit der border-sache.

Aber wie füge ich noch in den weißen lightbox-frame ein BG-Bild ein, da stehe ich noch etwas auf der Leitung... wo kann ich denn da was ändern in dem sheet?

sokie · 27.03.2009

AW: Frage zum Lightbox-Tut von Sokie

hallo Nine,

in der lightbox.css heisst der selektor "#outerImageContainer" da muss das Hintergrundbild hinein.
zb:

Code:

#outerImageContainer{ position: relative; background-color: #fff; [COLOR=Red]background-image:url(../images/hintergrund.png)[/COLOR]; width: 250px; height: 250px; margin: 0 auto; }

wobei sich das entsprechende Bild hierbei im Ordner images befinden muss.

ykblue · 27.03.2009

AW: Frage zum Lightbox-Tut von Sokie

::: ganz blöde frage - wo finde ich das Tut??? Danke.

sokie · 27.03.2009

AW: Frage zum Lightbox-Tut von Sokie

das Tutorial findest du hier:

sagert90 · 29.03.2009

AW: Frage zum Lightbox-Tut von Sokie

Hallo Sokie =)

dank deines Tut hab ich endlich gefunden was ich schon immer haben wollte.
Ich habe jedoch das Probelm, dass bei mir die Bilder auf der Seite nicht angezeigt werden, in Lightbox jedoch wohl :-O ... das selbe Problem besteht auch, wenn ich slimbox benutze :-$
Im IE7 wird wenigstens noch angezeigt, dass ein Bild angezeigt werden sollte, in Firefox ist die Seite komplett leer.

Hier der Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Fotos 1</title>

<link rel="stylesheet" href="http://www.crj-records.de/test/css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://www.crj-records.de/test//js/prototype.js"></script>
<script type="text/javascript" src="http://www.crj-records.de/test//js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="http://www.crj-records.de/test//js/lightbox.js"></script>

</head>

<body>

<div id="gally">

<a href="http://www.crj-records.de/test/Fotos/full/A1.jpg" rel="lightbox[fotos 1]"><img scr="http://www.crj-records.de/test/Fotos/thumbs/A1.jpg" border="0" /></a><br /><br />

<a href="http://www.crj-records.de/test/Fotos/full/A2.jpg" rel="lightbox[fotos 1]"><img scr="http://www.crj-records.de/test/Fotos/thumbs/A2.jpg" border="0" /></a><br /><br />

<a href="http://www.crj-records.de/test/Fotos/full/A3.jpg" rel="lightbox[fotos 1]"><img scr="http://www.crj-records.de/test/Fotos/thumbs/A3.jpg" border="0" /></a><br /><br />

<a href="http://www.crj-records.de/test/Fotos/full/A4.jpg" rel="lightbox[ftos 1]" ><img scr="http://www.crj-records.de/test/Fotos/thumbs/A4.jpg" border="0" /></a>

</div>

</body>
</html>

mfG

cebito · 29.03.2009

AW: Frage zum Lightbox-Tut von Sokie

falsch: <img scr=
richtig: <img src=

sagert90 · 29.03.2009

AW: Frage zum Lightbox-Tut von Sokie

uuups.. das ist ja mal ein Deppen-Fehler vom feinsten.

Danke!