Probleme mit der Lightbox

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Autor dieses Themas

1:45, 21.5.2011

Guten Abend,

ich habe folgendes Problem, mit meiner Homepage auf Lima-City.de, nämlich:

Ich will in die Homepage die sog. Lightbox (ein Javascript) einbauen, aber es scheint nicht zu funktionieren. Vorerst habe ich nur 2 Bilder auf den Server hochgeladen. Ich habe alles nach Anleitung gemacht, wie es die Seite der Lightbox besagt.

Den folgenden Code in den Headerbereich:

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

Den folgenden Code in die CSS bzw. damit die CSS erweitern:

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

Und zum aktivieren der Bilder folgenden Code im Body-Bereich benutzen:

<a href="../BILDNAME" rel="lightbox" title="TITEL !">NAME</a><br>

Nun habe ich 2 folgende Probleme:

1. Bei der Lightbox auf meiner Seite werden keine kleinen Miniaturbilder angezeigt, wie es eigentlich sein sollte, oder?!
2. Die Lightbox funktioniert nicht bzw. 2.1 Die Lightbox funktioniert nur teilweise, sprich: Es wird ein Link angezeigt, und wenn man auf diesen Link klickt erscheint das Bild, aber nicht in einem Fenster der Lightbox, sondern unten links in der Ecke.

Meine .html-Datei sieht so aus:

<html>
<head><center><img src="so perfekt nicht.jpg"></center>
<title>NOCH BAUSTELLE!</title>
<style type='text/css'>
body{
background-color: #6c71ba;
}
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen"/>
</style>
<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>

<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>




<div align="center"> 
<body onLoad="MM_preloadImages('../Desktop/Bilder/Nummer-ZWEI_01.png','../Desktop/Bilder/Nummer-ZWEI_02.png','Nummer-ZWEI_03.png','../Desktop/Bilder/Nummer-ZWEI_04.png','../Desktop/Bilder/Nummer-ZWEI_05.png')"><table width="200" border="0" cellpadding="0" cellspacing="0"> 
  <tr>
    <td><a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','Nummer-ZWEI_01.png',1)"><img src="Nummer-EINSpng_01.png" name="Image1" width="285" height="100" border="0"></a></td>
    <td><a href="Marcel.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','Nummer-ZWEI_02.png',1)"><img src="Nummer-EINSpng_02.png" name="Image2" width="195" height="100" border="0"></a></td>
    <td><a href="Dennis.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','Nummer-ZWEI_03.png',1)"><img src="Nummer-EINSpng_03.png" name="Image3" width="201" height="100" border="0"></a></td>
    <td><a href="Sonstiges.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','Nummer-ZWEI_04.png',1)"><img src="Nummer-EINSpng_04.png" name="Image4" width="206" height="100" border="0"></a></td>
    <td><a href="News.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','Nummer-ZWEI_05.png',1)"><img src="Nummer-EINSpng_05.png" name="Image5" width="113" height="100" border="0"></a></td>
  </tr>
</table>


</head>



</div>

<center>Seite von Marcel..

Bildergalerie:
<center>
<a href="5571260573_e4bcac3bce.jpg" rel="lightbox" title="Die Superhelden-Ära!">Das Superhelden-Bild</a><br>
<a href="Superheld.png" rel="lightbox" title="Ja zweites Bild halt" >Jops</a>
</center>
</body>
</html>
]

WO ist der Fehler? u.u
Kann mir jemand bitte weiterhelfen? Ich arbeite mit Adobe Dreamweaver aber der zeigt mir auch keinerlei Syntax oder sonstige Fehler an. :x

Falls wer sich die Homepage zum diagnostizieren ansehen will:
http://photopizza.lima-city.de/Marcel.html

Hoffe, mir kann hier einer Helfen.
Liebe Grüße,

#PizzA.

Ps: Homepage ist für ein privaten-Zweck gedacht. :)
Also nicht wundern. :)

Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage
fatfreddy

fatfreddy hat kostenlosen Webspace.

2:05, 21.5.2011
Das ist kein Problem von Lima, sondern liegt an deiner Webseite.

Irgendwo in der Doku zur Lightbox gibt es einen Hinweis, daß sie nur funktioniert, wenn für das HTML-Dokument ein valider Doctype definiert ist. (Gilt übrigens außer für Scriptaculous auch für die anderen Javascript-Frameworks wie Mootools und Jquery)

Das ist bei dir nicht der Fall und vermutlich das Problem.

Zur Zeit schalten die Browser zur Darstellung deiner Page in den Quirks-Modus, da klappt wenig.

Nachtrag: Bevor Du dir jetzt mit der Lightbox Arbeit machst, schau dich mal nach vergleichbaren Scripten (z.B. PrettyPhoto oder Thickbox) um, die zum Teil deutlich mehr Möglichkeiten bieten und mit Frameworks arbeiten, die weiter verbreitet sind.
Das Problem mit dem Doctype mußt Du aber auch zum Einsatz eines anderen Scriptes lösen! .

FF

Beitrag zuletzt geändert: 21.5.2011 2:20:38 von fatfreddy
Autor dieses Themas
photopizza

photopizza hat kostenlosen Webspace.

12:41, 21.5.2011
Beitrag 1

Hmh, wie?
Wo liegt den nun genau der Fehler? Was ist falsch? Kann mir das bitte jemand sagen? /:

Beitrag 2

Ja, ich versteh das ganze geschriebene mit den valide unso nicht. Deswegen ja nachgefragt.

#PizzA.

Edit by karpfen: Beiträge zusammengefasst!

Bzw. WAS muss ich bei mir ändern, damit das funktioniert?

Beitrag zuletzt geändert: 21.5.2011 13:05:47 von photopizza
fatfreddy

fatfreddy hat kostenlosen Webspace.
15:25, 21.5.2011

photopizza schrieb:
Bzw. WAS muss ich bei mir ändern, damit das funktioniert?

Öffne dein HTML-Dokument und füge als erste Zeile folgendes ein:
```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
```
Wenn es dann noch nicht funktionieren sollte, schauen wir weiter.

FF
kostenlose-javascripts

kostenlose-javascripts hat kostenlosen Webspace.

16:06, 21.5.2011
Eine Lightbox, bei der du eigentlich keinen Fehler machen kannst ist http://highslide.com/.
Es wird nämlich ein Editor mitgeliefert!
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city