Ich hab eine Frage bezüglich der Vorschaubilder.
Auf meiner Seite habe ich eine Box in dem ich Bilder immer wechselnd angezeigt haben möchte.
Das funktioniert soweit auch ganz gut.
Nur ist das Vorschaubild etwas zu klein und ich möchte es größer.
unter http://www.cricket-munich.de könnt ihr sehen, was ich meine.
Ich benutze Album 0.9.3
Leider w. ich nicht genau wo ich nun die Größe einstelle.
Nachfolgend der Template eintrag und das CSS.
Als Album Template habe ich lightbox eingestellt.
Änderungen die ich mache, scheinen nichts zu bewirken.
Bin ich total an falscher stelle?
Template:
Schnappschüsse aus der Gallerie
{cms_module module='album' action='random_image'}
CSS:
}
#box1
.box1{background-color:#c7cc8a;
padding-left:5px;
padding-right:5px;
padding-top:5px;
padding-bottom:15px;
font: normal 60px/18px verdana, sans-serif; color: #384E2C;border-TOP:solid 0px #FFF;
width:220px;}
LightBox CSS:
#lightbox{
position: absolute;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
line-height: 0;
}
#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: transparent url(/modules/LightBox/images/blank.gif) no-repeat; /* Trick IE into showing hover */
display: block;
}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(modules/LightBox/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(modules/LightBox/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; }
#overlay{
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 500px;
background-color: #000;
}
Jemand einen Tip für mich?
Gruß Axl
