Galerie Einstellungen

[FeierFee]

Könnte mir vielleicht sagen wie ich am besten eine Galerie erstelle mit Phase5?
Ich hätte es gerne wenn alle bilder ordentlich aufgestellt sind wie in eine Tabelle

[stwie]

Könnte mir vielleicht sagen wie ich am besten eine Galerie erstelle mit Phase5?
Ich hätte es gerne wenn alle bilder ordentlich aufgestellt sind wie in eine Tabelle

Na ich will es einmal versuchen.

Ich habe gerade eine Arbeitsversion, die in IE6, FF und Opera für Windows funktioniert.
Man kann die Sache verkürzen, indem man den Teil zwischen den "span" Teilen weglässt. Dann kann man auch den ganzen Codeteil mit :hover, :link und z-index weglassen, mir ging es aber darum, beim Überfahren der Thumbs mit der Maus das Bild in Groß angezeigt zu bekommen.

Verbesserungsvorschläge sind jederzeit möglich und willkommen.

Wichtig ist es zu wissen, dass ich das Ganze auf die Schnelle aus einem größeren Projekt herauskopiert habe. ich hoffe es funktioniert.

Zuerst der html-Code (Ausschnitt), das Einbinden des nachfolgenden css-codes über style oder als Datei nicht vergessen

QUELLTEXT

<div id="main">
<div id="galerie">
     <div class="bildcontainer z9">
          <div class="bild l">
                <a href="#"><img src="blume-1.jpg" alt="Blume1">
                      <span><img src="blume-1.jpg" alt="Blume1"></span>
                </a>
          </div>
     <div class="text">Text zu blume1</div>
     </div>
     <div class="bildcontainer z8">
     <div class="text">Text zu blume2</div>
          <div class="bild r">
                <a href="#"><img src="blume-2.jpg" alt="Blume2">
                      <span><img src="blume-2.jpg" alt="Blume2"></span>
                </a>
          </div>
     </div>
     <div class="bildcontainer z7">
          <div class="bild l">
                <a href="#"><img src="blume-3.jpg" alt="Blume3">
                      <span><img src="blume-3.jpg" alt="Blume3"></span>
                </a>
          </div>
          <div class="text">text zu Blume3</div>
     </div>
     <div class="bildcontainer z6">
          <div class="text">Text zu Blume4</div>
          <div class="bild r">
                <a href="#"><img src="blume-4.jpg" alt="Blume4">
                      <span>
                               <img src="blume-4.jpg" alt="Blume4">
                               <div><p>Das ist nur ein weiterer Text, der ganz lang sein kann</div>
                      </span>
                </a>
          </div>
     </div>
</div>
</div>

Dann der css-code

QUELLTEXT

div#main
{
       position:relative;
       float:left;
       padding:0px 10px 10px 10px;
       width:610px;
       border-left:solid 2px #ccccff;
       border-right:solid 2px #000000;
       border-bottom:solid 2px #000000;
       border-top:solid 2px #ccccff;
       color:#000000;
       background-color:#ffffff;
       text-align:left;
       vertical-align:top;
       font-family:verdana,arial,sans-serif;
       font-size:10pt;
       z-index:0;
       overflow:visible;
}

div#galerie
{
       position:relative;
       clear:both;
       margin:0;
       border:0;
}

div#galerie div.bildcontainer
{
       position:relative;
       display:block;
       float:left;
       height:140px;
       margin:5px 0 0 6px;
       border:0px solid #66ccff;
       width:290px;
}


div#galerie div.text
{
       display:block;
       position:relative;
       float:left;
       font-size:9px;
       width:95px;
       margin:10px 0px 10px 0px;
       border:0;
       z-index:0;
}


div#galerie div.bild
{
       float:left;
       width:156px;
       height:108px;
       margin:10px 15px 10px 10px;
       display:block;
       border:0;
       z-index:1;
}

div#galerie div.bild a img, div#galerie div.bild a:link img, div#galerie div.bild a:visited img, div#galerie div.bild a:hover img
{
       display:block;
       height:108px;
       position:relative;
       background:#ffffff;
       border:0px solid #999999;
       position:absolute;
       padding:3px;
       margin:0;
       z-index:3;
}

div#galerie div.bild a span, div#galerie div.bild a span div
{
       display:none;
       text-decoration:none;
}

div#galerie div.bild a:hover span
{
       display:block;
       position:absolute;
       width:589px;
       height:440px;
       background:#ffffff;
       z-index:1000;
       border:1px solid #999999;
}

div#galerie div.l a:hover span
{
       top:125px;
       left:-1px;
}

div#galerie div.r a:hover span
{
       top:125px;
       left:-299px;
}

div#galerie div.r a:hover span img, div#galerie div.l a:hover span img
{
       display:block;
       position:relative;
       float:left;
       height:280px;
       margin:15px;
       background:#ffffff;
       border:1px solid #999999;
       padding:3px;
}

div#galerie div.r a:hover span div, div#galerie div.l a:hover span div
{
       display:block;
       position:relative;
       top:0;
       right:0;
       margin:0;
       background:#ffffff;
       padding:5px;
       overflow:visible;
}


/* Nachfolgend: Hack für den IE 5 und IE 6, da sie sonst die Bildveränderung bei :hover
    nicht mitbekommen
    Eigentlich unsinniger Befehl, aber absolut notwendig: :hover ohne folgenden Part
    (img, div etc.) und dann die gleiche Farb-Deklaration anders dargestellt wie oben */

div#galerie div.l a:hover, div#galerie div.r a:hover
{
       border:0px;
       background:white;
}

/* Definition des z-index, um Überlappungen im Fotoalbum korrekt zu bekommen*/

.z1

{
       z-index:1;
}
.z2

{
       z-index:2;
}
.z3

{
       z-index:3;
}
.z4

{
       z-index:4;
}
.z5

{
       z-index:5;
}
.z6

{
       z-index:6;
}
.z7

{
       z-index:7;
}
.z8

{
       z-index:8;
}
.z9

{
       z-index:9;
}
.z10

{
       z-index:10;
}