lightbox

Annchen20 · 19.03.2009

hallo zusammen,
bin verzweifelt am versuchen die lightbox in meine inet seite zu integrieren.
leider stell ich mich dafür wohl zu dumm an...

habe nun schon mehrere beiträge gelesen, in denen der einbau erklärt wurde, leider jedoch noch nicht simpel genug für mich

hoffe mir kann jemand helfen ??

cebito · 19.03.2009

AW: lightbox

Dann erzähl mal, was du bisher verstanden hast (und was nicht) und zeig uns doch mal deinen Versuch (Quelltext) dann ist es einfacher dir zu sagen wo es noch hakt.

maxderboss · 19.03.2009

AW: lightbox

Wenn du das gepost hast, würde ich auch wohl meinen Senf dazugeben.
Bin da nämlich im moment auch dran

lonelyhawk · 19.03.2009

AW: lightbox

steht eigentlich alles bis ins kleinste detail drin. da haben sich zwei, drei leute richtig mühe gegeben mit der erklärung. hast du den schon gelesen? und immernoch probleme? dann zeig mal deinen quelltext...

Annchen20 · 19.03.2009

AW: lightbox

@lonelyhawk diese anleitung hab ich schon gelesen und versucht es danach hinzubekommen, leider klappts net

so also hier mein quelltext.
das problem ergibt sich schon dabei das sich wenn ich auf mein bild klicke ein neues fenster öffnet jedoch kein bild zu sehen ist und das ganze auch nicht nach der lightbox aussieht. :-(

<!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>

<title>Galerie</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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="Style/main.css" type="text/css" />
<script language="JavaScript" type="text/javascript">
//--------------- LOCALIZEABLE GLOBALS---------------
var d=new Date();
monthname= new Array("January","February","March","April","May","June","July","August","September","October","November","December");
//Ensure correct for language. English is "January 1, 2004"
var TODAY = monthname[d.getMonth()] + " " + d.getDate() + ", " + d.getFullYear();
//--------------- END LOCALIZEABLE ---------------
</script>
<style type="text/css">

</style>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body bgcolor="#C0DFFD">
<table width="119%" height="816" border="0" cellpadding="0" cellspacing="0">
<tr bgcolor="#3366CC">
<td colspan="8" rowspan="2" bgcolor="#FFCC33"><img src="Images/logo.png" width="382" height="197" /></td>
<td width="424" height="63" align="center" valign="bottom" nowrap="nowrap" bgcolor="#FFCC33" id="logo"><span class="Stil1">myQueen-Nails</span></td>
<td width="577" bgcolor="#FFCC33"> </td>
</tr>

<tr bgcolor="#3366CC">
<td height="64" align="center" valign="top" bgcolor="#FFCC33" id="tagline"><p class="Stil2">Homepage</p>
<p class="Stil2"><img src="Images/mm_spacer.gif" width="380" height="1" /></p></td>
<td width="577" bgcolor="#FFCC33"><img src="Images/mm_spacer.gif" width="472" height="1" /></td>
</tr>

<tr>
<td colspan="10" bgcolor="#003366"><img src="Images/mm_spacer.gif" width="1" height="1" border="0" /></td>
</tr>

<tr bgcolor="#CCFF99">
<td height="25" colspan="10" bgcolor="#CCFF00" id="dateformat">  
<script language="JavaScript" type="text/javascript">
document.write(TODAY); </script></td>
</tr>
<tr>
<td colspan="10" bgcolor="#003366"><img src="Images/mm_spacer.gif" width="1" height="1" border="0" /></td>
</tr>

<tr>
<td width="136" rowspan="2" valign="top" bgcolor="#CCFF66"><table border="0" cellspacing="0" cellpadding="0" width="136" id="navigation">
<tr>
<td width="136" bgcolor="#CCFF66"> <br />
 <br /></td>
</tr>
<tr>
<td><a href="index.html" class="navText">Home</a></td>
</tr>
<tr>
<td width="136"><a href="Angebote.html" class="navText">Angebote</a></td>
</tr>
<tr>
<td width="136"><a href="Galerie1.html" class="navText">Galerie</a></td>
</tr>
<tr>
<td width="136"><a href="Kontakt.html" class="navText">Kontakt</a></td>
</tr>
</table>
<br />
 <br />
 <br />
 <br /></td>
<td width="231" bgcolor="#FF9900" class="pageName"> </td>
<td height="35" colspan="7" valign="top" bgcolor="#FF9900"><span class="pageName"><span class="Stil2"><img src="../Homepage myQueen-Nails/Images/mm_spacer.gif" width="10" height="1" /></span></span></td>
<td width="577" rowspan="2" bgcolor="#FF9900"> </td>
</tr>

<tr>
<td colspan="8" rowspan="2" bgcolor="#FF9900"><table width="659" height="524" border="0" cellpadding="2" cellspacing="0">
<tr>
<td width="2%"> </td>
<td width="20%" height="70"><span class="detailText"><a href="Galerie1.html">
<a href=Images/foto1.jpg" rel="lightbox[Nägel]" title="Nägel"><img src="Images/foto1.JPG" alt="1" width="88" height="66" border="0" />
</a>
</span>
</td>
<td width="21%"> </td>
<td width="19%"> </td>
<td width="19%"> </td>
<td width="19%" height="70"> </td>
</tr>
<tr>
<td valign="top" nowrap="nowrap" class="detailText"> </td>
<td height="70" valign="top" nowrap="nowrap" class="detailText"> </td>
<td> </td>
<td class="detailText" valign="top" nowrap="nowrap"> </td>
<td class="detailText" valign="top" nowrap="nowrap"> </td>
<td class="detailText" valign="top" nowrap="nowrap"><br /></td>
</tr>
<tr>
<td> </td>
<td height="70"> </td>
<td class="detailText"> </td>
<td> </td>
<td> </td>
<td height="70"><a href="bigimage5.html"></a></td>
</tr>
<tr>
<td valign="top" nowrap="nowrap" class="detailText"> </td>
<td height="70" valign="top" nowrap="nowrap" class="detailText"><br /></td>
<td> </td>
<td valign="top" nowrap="nowrap" class="detailText Stil3"> </td>
<td valign="top" nowrap="nowrap" class="detailText Stil3"> </td>
<td valign="top" nowrap="nowrap" class="detailText Stil3"> </td>
</tr>
<tr>
<td valign="top" nowrap="nowrap" class="detailText"> </td>
<td height="70" valign="top" nowrap="nowrap" class="detailText"> </td>
<td> </td>
<td valign="top" nowrap="nowrap" class="detailText Stil3"> </td>
<td valign="top" nowrap="nowrap" class="detailText Stil3"> </td>
<td valign="top" nowrap="nowrap" class="detailText Stil3"> </td>
</tr>
<tr>
<td valign="top" nowrap="nowrap" class="detailText"> </td>
<td height="70" valign="top" nowrap="nowrap" class="detailText"> </td>
<td> </td>
<td valign="top" nowrap="nowrap" class="detailText Stil3"> </td>
<td valign="top" nowrap="nowrap" class="detailText Stil3"> </td>
<td valign="top" nowrap="nowrap" class="detailText Stil3"> </td>
</tr>
<tr>
<td valign="top" nowrap="nowrap" class="detailText"> </td>
<td height="70" valign="top" nowrap="nowrap" class="detailText"><span class="detailText Stil3"><a href="bigimage26.html"></a></span></td>
<td> </td>
<td valign="top" nowrap="nowrap" class="detailText Stil3"> </td>
<td valign="top" nowrap="nowrap" class="detailText Stil3"> </td>
<td valign="top" nowrap="nowrap" class="detailText Stil3"> </td>
</tr>
</table></td>
</tr>
<tr>
<td width="136" height="20" bgcolor="#CCFF66"><div align="center"><a href="impressum/Impressum.html" class="bodyText">Impressum</a></div></td>
<td width="577" bgcolor="#FF9900"> </td>
</tr>
<tr>
<td height="29" bgcolor="#CCFF66"> </td>
<td colspan="7" bgcolor="#FF9900"> </td>
<td bgcolor="#FF9900"> </td>
<td bgcolor="#FF9900"> </td>
</tr>
</table>
<img src="Images/mm_spacer.gif" width="40" height="1" />
</body>
</html>

hab den rest der seite mit dreamweaver erstellt und das zum grössten teil im entwurfsmodus, also keinen schreck bekommen wenn der quelltext drunter und drüber geht --- sorry ---

lonelyhawk · 19.03.2009

AW: lightbox

ist die seite online? so das man es sich mal anschauen kann? mir geht es dabei hauptsächlich darum prüfen zu können ob die pfade zu den datein stimmen. das ist der häufigste fehler bei der anwendung mit der lightbox.

falls ich sie in dem chaos

nicht übersehen habe fehlt schon mal die einbindung der lightbox.css oder hast du diese in deiner main.css integriert?

cebito · 19.03.2009

AW: lightbox

Also für mich sieht das ganze wieder nach dem Problem von Leo aus. Die Pfade stimmen nicht. Ich würde jetzt einfach mal deine Seite incl. dem Bilderordner IN den Lightboxordner stecken, danach sollte alles funktionieren. Wenn du noch mehr Seiten machst, steck die auch da rein. Musst du nur beim Verlinken zu und von deinen anderen Seiten drauf achten.

Annchen20 · 19.03.2009

AW: lightbox

also die seite ist online jedoch nicht mit der "neuen" galerie.
wie kann ich denn am einfachsten die pfade prüfen? wie schon gesagt hab grösstenteils im entwurf gearbeitet und da konnte ich alles sehen wenn ich es verlinkt hab, und das war soweit richtig.

wie kann ich denn die lightbox.css in die main.css integrieren?

cebito · 19.03.2009

AW: lightbox

Annchen20 schrieb:
also die seite ist online jedoch nicht mit der "neuen" galerie.
wie kann ich denn am einfachsten die pfade prüfen? wie schon gesagt hab grösstenteils im entwurf gearbeitet und da konnte ich alles sehen wenn ich es verlinkt hab, und das war soweit richtig.

wie kann ich denn die lightbox.css in die main.css integrieren?

Binde einfach die lightbox.css in den head ein, wie die anderen Dateien auch. Trotzdem, in welchem Ordner liegt denn deine Seite? Wie soll unsereiner prüfen ob die Pfade stimmen - denn danach siehts aus, dass da das Problem liegt - wenn wir nicht wissen, wo deine einzelnen Dateien und Ordner rumschwirren.

BlackHawk1000 · 26.03.2009

AW: lightbox

Hallo.

Aber Englisch kannst du lesen? Dann schau doch mal bei dem rein, der die Lightbox erfunden hat: Lightbox 2

Vielleicht hilft dir das weiter. Zumindest siehst du dort wie einfach es eigentlich ist. Meiner Meinung nach solltest du dir Mühe geben - wie die anderen auch schon geschrieben hatten - die Verlinkungen zu den Bildern und Dateien korrekt anzugeben.

Gruß

Tease · 26.03.2009

AW: lightbox

Hallo,

hast du das Problem schon gelöst?

Wenn nicht, kann ich dir folgenden Link empfehlen:

Dort befindet sich ein Video-Tutorial das genau zeigt, wie man sich die Lightbox "zusammenklickt", ohne groß was am HTML-Code manuell zu ändern.
Finde ich tausendmal verständlicher als die ganzen, oft kompliziert klingenden Beschreibungen.
Da siehst du, dass man nur 4, 5 Klicks benötigt und dass das wirklich nicht allzu schwierig ist.

Annchen20 · 26.03.2009

AW: lightbox

hallo

also english kann ich lesen und das was dort in englisch steht, steht auch in der deutschen übersetzung, denke da ist es wohl egal was ich lese.

das mit dem video werd ich mir mal ansehen, hatte bis heute leider noch nicht so wirklich zeit daran weiterzuarbeiten. aber vielleicht werde ich es jetzt wieder tun!

vielen dank

Annchen20 · 26.03.2009

AW: lightbox

@ Tease

hab mit hilfe dieses videos es jetzt hinbekommen, dass die lightbox bei mir funktioniert.

vielen dank!

Tease · 26.03.2009

AW: lightbox

Super, freut mich!

Habe eben selber nach 'ner guten Beschreibung gesucht und fand diese Beschreibung selber auch am hilfreichsten.

leobaby · 28.03.2009

AW: lightbox

Hallo

Ich habe immernoch das Porblem das bei mir das weiter zeichen und das schließen zeichen nicht angezeigt wird?
Ich werde mir aber asuch mal das video anschauen vielelicht finde ich dabei ja auch die erleuchtung?
Mal eine andere frage noch dazu? Kann man auch einen eigenene Hintergrund in die Lightbox einbauen?

Lg leo

lonelyhawk · 28.03.2009

AW: lightbox

leobaby schrieb:
[...] Kann man auch einen eigenene Hintergrund in die Lightbox einbauen?

Lg leo

ja kann man.

öffne die lightbox.css
geh in die zeile die mit "#outerImageContainer{" beginnt
und ersetze "background-color: #fff;"
z.b. mit "backgound:transparent url(../images/test.jpg)";
der pfad muss natürlich zu dem gewünschten hintergrundbild führen...
das war's schon.