Hintergund der Bilder in Lightbox 2 sichtbar.

Traumweber · 11.01.2011

Hallo zusammen!
Ich probiere gerade einmal mit der Ligtbox 2 herum.
Die Bilder in meiner Bildergalerie sind im PNG, bzw im GIF Format enthalten.
Ich habe aber das Problem, das bei diesen Bildern der Hintergrund nicht mehr transparent ist.
Gibt es dafür im Code eine Einstellung?

Vielen Dank für Eure Hilfe

fexx · 11.01.2011

AW: Hintergund der Bilder in Lightbox 2 sichtbar.

nein, liegt wenn dann an den bildern. hast du sie richtig gespeichert?

Traumweber · 11.01.2011

AW: Hintergund der Bilder in Lightbox 2 sichtbar.

Hallo Fexx!
Die Bilder sind schon im richtigen Format. Ich habe meide Formate ausprobiert, funktioniert aber nicht.
Füge ich sie aber in ein normales Div ein, ist der Hintergrund nicht mehr weiß, sondern transparent.
Wäre ja blöd, wenn das in der Lightbox nicht funktionieren würde.

Trotzdem danke für Deine Antwort.

cebito · 11.01.2011

AW: Hintergund der Bilder in Lightbox 2 sichtbar.

Kannst du mal nen Link posten? Ich nehme an, das es der Hintergrund des Divs in der Lightbox ist, solltest du in der Lightbox.css ändern können.

Traumweber · 11.01.2011

Hallo Cebito
Leider kann ich keinen Link posten, weil ich nur am Experimentieren bin.
Ich poste mal den HTML und CSS Code.

HTML:

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=utf-8" />
<title>Lightbox Startseite</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 href="css/lightbox.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
-->
</style>
</head>

<body>

<div id="content">

<p><a href="bilder/Zauberin.png" rel="lightbox"><img src="bilder/die_alte_zauberin_klein.png" alt="Die alte Zauberin" 
width="160" height="200" border="0" /></a></p>

</div>
<!--Ende Div Content-->
</body>


</html>

CSS:

Code:

#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: #000000;
}
body {
    background-color: #00FF66;
    margin:0px;
    padding: 0px;
}
#content {
    background-color: #CC0000;
    height: 500px;
    width: 600px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 100px;
    overflow: auto;
}

Vielleicht kann man daraus erkennen, wo der Fehler liegt.

Doitsu · 11.01.2011

AW: Hintergund der Bilder in Lightbox 2 sichtbar.

In #imgeDataContainer wird eine Hintergrondfarbe (weiss) definiert, ich denke mal dort wird dein Problem sein.

cebito · 11.01.2011

AW: Hintergund der Bilder in Lightbox 2 sichtbar.

Doitsu schrieb:
In #imgeDataContainer wird eine Hintergrondfarbe (weiss) definiert, ich denke mal dort wird dein Problem sein.

Wenn nicht, mal die Hintergrundfarbe vom #outerImageContainer rausnehmen, hab grad keine Lightbox laufen zum testen...

Traumweber · 11.01.2011

AW: Hintergund der Bilder in Lightbox 2 sichtbar.

Das war genau der Punkt.
Ich habe die Hintergrundfarbe von #outer image container gelöscht.
Jetzt ist der Hintergrund transparent.

Vielen Dank Euch allen.