xyzebra: Lightbox

Hallo,
ich möchte eine Lightbox nutzen, um Bilder erst verkleinert darzustellen, damit sie sich über Klick langsam öffnen.

Teil des Headers:

<link href="style.css" rel="stylesheet" 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>  

Content:
<a href="images/image-1.jpg" rel="lightbox[vae]">image #1</a>

Teil des CSS:

/* LIGHTBOX */  
  
#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}  
#lightbox img{ width: auto; height: auto;}  
#lightbox a img{ border: none; }  
  
#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }  
#imageContainer{ padding: 10px; }  
  
#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }  
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }  
#imageContainer>#hoverNav{ left: 0;}  
#hoverNav a{ outline: none;}  
  
#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }  
#prevLink { left: 0; float: left;}  
#nextLink { right: 0; float: right;}  
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }  
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }  
  
#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }  
  
#imageData{	padding:0 10px; color: #666; }  
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	  
#imageData #caption{ font-weight: bold;	}  
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			  
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	  
  
#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }  

Wo ist der Fehler?

  1. Hi,

    Wo ist der Fehler?

    Du hast dummerweise vergessen, ihn uns überhaupt zu beschreiben.
    </hilfe/charta.htm#tipps-fuer-fragende>

    MfG ChrisB

    --
    RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
    1. Du hast dummerweise vergessen, ihn uns überhaupt zu beschreiben.

      Mist, tut mir Leid!
      Das Problem ist, dass das Bild zwar größer geöffnet wird, allerdings nicht mit dem gewünschten Effekt, wie auf Lightbox dargestellt.

  2. Fehlermeldung im Browser:

    "Resource interpreted as Document but transferred with MIME type image/jpeg."