Spezielles Fotoalbum für die eigene Website gesucht...

Jonas800 · 14.07.2009

Hallo zusammen

Im Rahmen meiner neuen Homepagegestaltung suche ich nach einer ganz bestimmten Art, wie man seine Fotos auf der Homepage präsentieren kann. Es handelt sich dabei um eine sehr bekannte Art und Weise, wie man Bilder auf der Website praktisch darstellen kann. Ein Beispiel habe ich hier als Bild hineingestellt:
- der Button "zurück" bzw. "vorwärts" erscheint dann, wenn man mit der Maus in die Nähe kommt.
- unten kann man jeweils eine kleine Beschreibung platzieren
- das Fenster lässt sich jederzeit mit einem Klick auf "Schliessen" schliessen

- das Fenster ist in den Originalfarben dargestellt, der Rest der Homepage wird unterdessen leicht verdunkelt

>> Wie heisst diese Methode?
>> Ist sie kostenlos bzw. was kostet sie?
>> Gibt es eventuell (kostenlose) Alternativen?

Danke für eure Hilfe

Gruss Jonas

stiller47 · 14.07.2009

AW: Spezielles Fotoalbum für die eigene Website gesucht...

Das Teil nennt sich Lightbox

Jonas800 · 14.07.2009

AW: Spezielles Fotoalbum für die eigene Website gesucht...

Das Teil nennt sich Lightbox

Genial, ich liebe das Internet

- herzlichen Dank

Gruss Jonas

Monja · 15.07.2009

AW: Spezielles Fotoalbum für die eigene Website gesucht...

Ist kostenlos hier zu bekommen. Habs grad in einem anderen Thread hier geschrieben. Ich benutze den selber.

quasibodo · 15.07.2009

AW: Spezielles Fotoalbum für die eigene Website gesucht...

Genial.
Danke Monja, für den Link..

Jonas800 · 16.07.2009

AW: Spezielles Fotoalbum für die eigene Website gesucht...

Hallo zusammen

Ich habe einmal eine einfache HTML-Seite erstellt, welche nur 3 Bilder hat. Im Quelltext habe ich dann die nötigen Änderungen für die Lightbox2 vorgenommen. Doch irgendwie will das alles nicht klappen. Ich habe einmal diesen Quelltext als Bild hier hinzugefügt. Ebenfalls ist ein Bild vom entsprechenden Homepage-Testordner vorhanden, um zu sehen, ob alle relevanten Daten vorhanden sind oder ob doch etwas fehlt... - ausserdem noch das Bild, wie es in einem Browser (Firefox,..) aussieht, und ob das so sein sollte!?

BILD 1: Bearbeiteter und veränderter Quellcode

BILD 2: Ordner der Testhomepage

BILD 3: So sieht die Seite aus - soll sie auch so aussehen oder stimmt schon da etwas nicht (mehr)?

Das Ganze funktioniert so leider nicht...
>> Wo liegt der Fehler im Quellcode (Zeile, Befehl - und wo soll welcher Befehl hin, d.h. Zeile,...)
>> Fehlt etwas im Homepageordner?
>> Verschwinden dieses Linkbeschriftungen unter den Bildern dann auch, falls man alles korrekt gemacht hat?

Danke für eure Hilfe

Gruss Jonas

maba · 16.07.2009

AW: Spezielles Fotoalbum für die eigene Website gesucht...

Die Texte unter den Bildern sind so in Deinem Code angegeben.

Code:

<img src ....>

Da ist das Bild aus (nach dem Größer-Zeichen). Was danach kommt wird als Klartext hinter bzw. unter das Bild geschrieben.

Ich schau mir jetzt gleich noch die anderen Elemente an.

Gruß
MB

maba · 16.07.2009

AW: Spezielles Fotoalbum für die eigene Website gesucht...

Innerhalb Deiner
A HREF Tags und innerhalb Deiner Image-Tags sehe ich keinen Trigger, der das Bild in voller Größe aufklappen würde.
A HREF="IMG1234.JPG" macht zwar das Bild auf, aber als einzelnes Element auf einer neuen Seite.

Insofern würde das, was Du zeigst der Erwartung entsprechen. Es ist genau das, was Dein HTML-Quellcode vorgibt. Die Skripte werden zwar geladen aber anschließend nicht verwendet.

Viele Grüße
MB

cebito · 16.07.2009

AW: Spezielles Fotoalbum für die eigene Website gesucht...

prototype-, scriptalculous- und lightbox.js liegen im selben Verzeichnis wie deine html-datei, aber verlinkt hast du sie als würden sie im Ordner "js" liegen.

Edit: im übrigen wäre es besser, deinen code hier als code und nicht als Bild reinzuposten. Das mit der Ordnerstruktur war sehr gut

maba · 16.07.2009

AW: Spezielles Fotoalbum für die eigene Website gesucht...

Ich hab mir das ganze nochmal angeschaut.

rel="lightbox"

ist der Trigger. Ist die CSS-Datei im Unterordner CSS vorhanden?
Sind die Javascript-Dateien im Unterordner js vorhanden? Das könnte das Problem sein. Du hast sie im Hauptordner.

Viele Grüße
MB

Lyserk · 16.07.2009

AW: Spezielles Fotoalbum für die eigene Website gesucht...

Da stimmen die Pfadangaben zu den .js-Datein im Header der Seite nicht.

Diese Zeilen müssen alle in den <head>-Bereich

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="lightbox.js"></script>
<link rel="stylesheet" href="lightbox.css" type="text/css" media="screen">
<link rel="stylesheet" href="library/svigm.css" type="text/css">

Wichig!
Alle Dateien die Lightbox verwendet müssen im Stammverzeichnis liegen!
Die Datei svigm.css und die Datei lightbox.css befinden sich bei dir nicht im Stammverzeichnis lt. deinem Screenshot.

cebito · 16.07.2009

AW: Spezielles Fotoalbum für die eigene Website gesucht...

Lyserk schrieb:
Wichig!
Alle Dateien die Lightbox verwendet müssen im Stammverzeichnis liegen!
Die Datei svigm.css und die Datei lightbox.css befinden sich bei dir nicht im Stammverzeichnis lt. deinem Screenshot.

Zum Stammverzeichnis gehören auch die Unterordner, wenn die anderen von mir schon genannten Dateien dort "js" liegen würden, würde es auch funktionieren. So verwirrende Antworten - ist doch klar dass da ein Anfänger irgendwann die Krise kriegt. :nee:

@ jonas, obigen Beitrag einfach ignorieren...

Jonas800 · 16.07.2009

AW: Spezielles Fotoalbum für die eigene Website gesucht...

prototype-, scriptalculous- und lightbox.js liegen im selben Verzeichnis wie deine html-datei, aber verlinkt hast du sie als würden sie im Ordner "js" liegen.

Ist die CSS-Datei im Unterordner CSS vorhanden?
Sind die Javascript-Dateien im Unterordner js vorhanden? Das könnte das Problem sein. Du hast sie im Hauptordner.

>> ja, sie sind sowohl im Hauptordner wie auch in den einzelnen Unterordnern vorhanden.

Da stimmen die Pfadangaben zu den .js-Datein im Header der Seite nicht.

Diese Zeilen müssen alle in den <head>-Bereich

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="lightbox.js"></script>
<link rel="stylesheet" href="lightbox." type="text/css" media="screen">
<link rel="stylesheet" href="library/svigm.css" type="text/css">

Wichig!
Alle Dateien die Lightbox verwendet müssen im Stammverzeichnis liegen!
Die Datei svigm.css und die Datei lightbox.css befinden sich bei dir nicht im Stammverzeichnis lt. deinem Screenshot.

Ist es nicht so, dass der Pfad angibt, dass eine Datei in einem Unterordner ist (z.B. src="js/lightbox.js", was bedeutet, dass die Datei "Lightbox.js" im Ordner JS ist)? Und das ist ja bei mir der Fall..? Oder gehört alles in den Hauptordner, dann müsste es aber heissen: src="lightbox.js" statt src="lightbox.js"?

Gruss und Danke für eure schnelle Antworten

Gruss Jonas

EDIT: ach ja, der Quellcode

:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
<html><head><meta
content="text/html; charset=ISO-8859-1"
http-equiv="content-type"><title>index</title><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><link
rel="stylesheet" href="lightbox.css" type="text/css"
media="screen"></head><body><table
style="text-align: left; width: 680px;" border="0"
cellpadding="2" cellspacing="2"><tbody><tr><td
style="width: 81px;">
<a href="IMGP1328.JPG"><img
style="border: 0px solid ; width: 217px; height: 163px;" alt="a"
src="IMGP1328.JPG" rel="lightbox" title="my caption">image
#1</a></td><td style="width: 15px;"><a
href="IMGP1346.JPG"><img
style="border: 0px solid ; width: 217px; height: 163px;" alt="b"
src="IMGP1346.JPG" rel="lightbox" title="my caption">image
#2</a></td><td style="width: 420px;"><a
href="IMGP1373.JPG"><img
style="border: 0px solid ; width: 217px; height: 163px;" alt="c"
src="IMGP1373.JPG" rel="lightbox" title="my caption">image
#1</a></td></tr></tbody></table></body></html>

cebito · 16.07.2009

AW: Spezielles Fotoalbum für die eigene Website gesucht...

Jonas800 schrieb:
>> ja, sie sind sowohl im Hauptordner wie auch in den einzelnen Unterordnern vorhanden.

Erste Frage - WARUM? - Es reicht, wenn sie einmal irgendwo drin sind!
Zweite Frage - Gehört zu den "einzelnen Unterordnern" auch der Ordner "js"? Alles andere ist (im Moment) uninteressant.

Edit - Quellcode hatte ich schon gesehen, ging mir nur darum, dass du im Editor auch "eckige Klammer html benutzt... Wollt ich jetzt nicht nochmal extra sehen.

Edit2 - Nicht, dass du denkst ich halt dich für bl*d, aber wir haben hier schon Seitenlange Diskussionen gehabt wo schon im zweiten Post angemahnt wurde die Pfade zu prüfen - am Ende stellte es sich doch raus, dass es nur daran lag. Nur der TE hatte eben mal gemeint...

cebito · 16.07.2009

AW: Spezielles Fotoalbum für die eigene Website gesucht...

Erstmal als Beispiel, wie du code hier posten kannst/sollst, auch, wie du deinen code leserlicher gestaltest, denn das da oben ist eigentlich nur ein Brei... Noch ein wenig mehr und keiner hat mehr Lust da reinzuschauen...
Hab jetzt einfach mal deinen code genommen, sinnlose Zeilenumbrüche entfernt und sinnvolle eingefügt:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>index</title>
<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>
<link rel="stylesheet" href="lightbox.css" type="text/css" media="screen"></head>
<body>
<table style="text-align: left; width: 680px;" border="0" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="width: 81px;">
<!--Lightbox START-->
<a href="IMGP1328.JPG"><img style="border: 0px solid ; width: 217px; height: 163px;" alt="a" src="IMGP1328.JPG" rel="lightbox" title="my caption">image #1</a>
</td>
<td style="width: 15px;">
<a href="IMGP1346.JPG"><img style="border: 0px solid ; width: 217px; height: 163px;" alt="b" src="IMGP1346.JPG" rel="lightbox" title="my caption">image #2</a>
</td>
<td style="width: 420px;">
<a href="IMGP1373.JPG"><img style="border: 0px solid ; width: 217px; height: 163px;" alt="c" src="IMGP1373.JPG" rel="lightbox" title="my caption">image #1</a>
</td>
<!-- Lightbox END -->
</tr>
</tbody>
</table>
</body>
</html>

Gewöhn dir ab, Zeilen einfach so umzubrechen - ausser in Fließtext. Überlass das deinem (Web)Editor, der macht das der Übersichtlichkeit wegen automatisch...

Jonas800 · 16.07.2009

AW: Spezielles Fotoalbum für die eigene Website gesucht...

Erste Frage - WARUM? - Es reicht, wenn sie einmal irgendwo drin sind!
Zweite Frage - Gehört zu den "einzelnen Unterordnern" auch der Ordner "js"? Alles andere ist (im Moment) uninteressant.

Zur ersten Frage: der Grund liegt darin, dass ich nach dem Erstellen der Testseite versucht habe, das Problem zu lösen, indem ich die einzelnen Dateien in den Hauptordner nehme. Stimmt, ich müsste die Anpassung (z.B. src"lightbox.js" statt src"js/lightbox.js") vornehmen. Aber: wieso sollte es plötzlich funktionieren, wenn die Dateien jetzt im Hauptordner sind (mit entsprechender Verlinkung) und nicht mehr im Unterordner (mit entsprechender Verlinkung)?

Zur zweiten Frage:
Hauptordner heisst: Test
Unterordner heissen: JS, CSS und IMAGES

Gewöhn dir ab, Zeilen einfach so umzubrechen - ausser in Fließtext. Überlass das deinem (Web)Editor, der macht das der Übersichtlichkeit wegen automatisch...

Am Quellcode (siehe Bild oben) habe ich nichts verändert! Das ist das Resultat von meinem Webeditor!

Gruss Jonas

EDIT: Ich weiss ja nicht, aber in meinem Quellcode sehe ich ehrlich gesagt keine falsche Verlinkung.. - kann sein, dass ich einen Befehl vergessen habe. Prüfe dies jetzt gleich noch...

cebito · 16.07.2009

AW: Spezielles Fotoalbum für die eigene Website gesucht...

Jonas800 schrieb:
Zur ersten Frage: der Grund liegt darin, dass ich nach dem Erstellen der Testseite versucht habe, das Problem zu lösen, indem ich die einzelnen Dateien in den Hauptordner nehme. Stimmt, ich müsste die Anpassung (z.B. src"lightbox.js" statt src"js/lightbox.js") vornehmen. Aber: wieso sollte es plötzlich funktionieren, wenn die Dateien jetzt im Hauptordner sind (mit entsprechender Verlinkung) und nicht mehr im Unterordner (mit entsprechender Verlinkung)?

Zur zweiten Frage:
Hauptordner heisst: Test
Unterordner heissen: JS, CSS und IMAGES

Am Quellcode (siehe Bild oben) habe ich nichts verändert! Das ist das Resultat von meinem Webeditor!

Gruss Jonas

Ja, schön, und WAS befindet sich jetzt noch im Ordner "js"? Sage mir, dass die genannten Dateien dort drin stecken und wir müssen woanders ansetzen, kannst du es nicht sagen, dann schieb sie da rein!!!

Jonas800 · 16.07.2009

AW: Spezielles Fotoalbum für die eigene Website gesucht...

Ja, schön, und WAS befindet sich jetzt noch im Ordner "js"? Sage mir, dass die genannten Dateien dort drin stecken und wir müssen woanders ansetzen, kannst du es nicht sagen, dann schieb sie da rein!!!

Jonas800 · 16.07.2009

AW: Spezielles Fotoalbum für die eigene Website gesucht...

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
<html><head>
<meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type"><title>index</title>
<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><link
 rel="stylesheet" href="lightbox.css" type="text/css"
 media="screen"><link rel="stylesheet"
 href="library/svigm.css" type="text/css"></head><body><table
 style="text-align: left; width: 680px;" border="0"
 cellpadding="2" cellspacing="2"><tbody><tr>
<td style="width: 81px;"><!--Lightbox START--><a
 href="IMGP1328.JPG"><img
 style="border: 0px solid ; width: 217px; height: 163px;" alt="a"
 src="IMGP1328.JPG" rel="lightbox" title="my caption">image
#1</a>
</td><td style="width: 15px;"><a
 href="IMGP1346.JPG"><img
 style="border: 0px solid ; width: 217px; height: 163px;" alt="b"
 src="IMGP1346.JPG" rel="lightbox" title="my caption">image
#2</a>
</td><td style="width: 420px;"><a
 href="IMGP1373.JPG"><img
 style="border: 0px solid ; width: 217px; height: 163px;" alt="c"
 src="IMGP1373.JPG" rel="lightbox" title="my caption">image
#3</a>
</td><!-- Lightbox END --></tr></tbody></table></body></html>

So hat es mir mein Webeditor herausgespukt... Ich weiss, es ist unübersichtlich, habe jedoch absichtlich nichts daran geändert..

cebito · 16.07.2009

AW: Spezielles Fotoalbum für die eigene Website gesucht...

Na, das war doch mal ne klare Antwort...

1. ändere mal

Code:

[COLOR=#000080]<link rel=[COLOR=#0000FF]"stylesheet"[/COLOR] href=[COLOR=#0000FF]"lightbox.css"[/COLOR] type=[COLOR=#0000FF]"text/css"[/COLOR] media=[COLOR=#0000FF]"screen"[/COLOR]>[/COLOR][COLOR=#000080]</head>[/COLOR]

in

Code:

[COLOR=#000080]<link rel=[COLOR=#0000FF]"stylesheet"[/COLOR] href=[COLOR=#0000FF]"css/lightbox.css"[/COLOR] type=[COLOR=#0000FF]"text/css"[/COLOR] media=[COLOR=#0000FF]"screen"[/COLOR]>[/COLOR][COLOR=#000080]</head>[/COLOR]

2. was auch ne mögliche Fehlerquelle ist, schreib mal die Dateiendung ".jpg" klein...