Webgalerie von cssplay / Thumbsbreite variabel??

[jilli]

hallo,

nach dem guten Tipp von dkdenz nutze ich jetzt eine Webgalerie von CSSplay und möchte sie an meine Wünsche anpassen.

Es hat auch soweit alles geklappt, leider gibt es noch ein Problem mit der Thumbsübersicht.
Ich habe die Thumbs vom Originalbild proportional auf eine Höhe von 70px verkleinert. So möchte ich sie auch in der Thumbsübersicht darstellen.

Deshalb habe ich die Höhe mit "auto" definiert. Leider gibt es dann aber Probleme bei der Darstellung.

Aktuell habe ich die Thumbs mit width:70px; height:70px; definiert und es funktioniert wunderbar.

Hat jemand eine Idee wie ich den code schreiben muss, damit die Thumbs in der Höhe 70px und die Breite proportional dargestellt wird?

zur WebSite

Danke vorab - Jilli

+++++++++++++++++++++++++++
CSS_Code

#gallery {width:1100px; position:relative; height:300px; padding-top:356px; margin:0 113px 90px 113px; border:2px solid #ffaaf0;}

#gallery img.left {width:55px; height:62px; margin-top:100px; background:#444; float:left;cursor:pointer;}
#gallery img.right {width:55px; height:62px; margin-top:100px; background:#444; float:left;cursor:pointer;}

#gallery ul {list-style:none; padding:0; margin-top:100px; float:left; background:#ff00ff; border:1px solid #ff0022;}
#gallery ul li {display:inline; width:70px; height:70px; float:left; margin:0 4px; border:1px solid #000; cursor:pointer;}

#gallery ul li.hide {display:none;}

/* using background images */
#gallery ul li.th1 {background:url(../thumbs/t1.jpg);}
#gallery ul li.th2 {background:url(../thumbs/t2.jpg);}
#gallery ul li.th3 {background:url(../thumbs/t3.jpg);}
#gallery ul li.th4 {background:url(../thumbs/t4.jpg);}
#gallery ul li.th5 {background:url(../thumbs/t5.jpg);}
#gallery ul li.th6 {background:url(../thumbs/t6.jpg);}
#gallery ul li.th7 {background:url(../thumbs/t7.jpg);}
#gallery ul li.th8 {background:url(../thumbs/t8.jpg);}
#gallery ul li.th9 {background:url(../thumbs/t9.jpg);}
#gallery ul li.th10 {background:url(../thumbs/t10.jpg);}
#gallery ul li.th11 {background:url(../thumbs/t11.jpg);}
#gallery ul li.th12 {background:url(../thumbs/t12.jpg);}
#gallery ul li.th13 {background:url(../thumbs/t13.jpg);}
#gallery ul li.th14 {background:url(../thumbs/t14.jpg);}
#gallery ul li.th15 {background:url(../thumbs/t15.jpg);}
#gallery ul li.th16 {background:url(../thumbs/t16.jpg);}
#gallery ul li.th17 {background:url(../thumbs/t17.jpg);}
#gallery ul li.th18 {background:url(../thumbs/t18.jpg);}
#gallery ul li.th19 {background:url(../thumbs/t19.jpg);}

/* remove visibility:hidden; if you want to use the original images as thumbnails */
#gallery ul li img {visibility:hidden; display:block; width:70px; height:70px;}

#gallery ul li span {display:none; position:absolute; left:61px; top:430px; width:411px; font-family:verdana, arial, sans-serif; color:#666; font-size:11px; line-height:15px; text-align:justify;}
#gallery ul li b {color:#444;}

#gallery ul li.chosen {border-color:#fff; cursor:default;}
/* Originalfoto */
#gallery ul li.chosen div {position:absolute; left:0; top:0; width:1100px; height:460px; background:#aabbcc; border:1px solid #000; border-width:1px 1px 0 1px;}
#gallery ul li.chosen div i {width:600px; height:355px; display:table-cell; vertical-align:middle; text-align:center;} 
#gallery ul li.chosen div i img {visibility:visible; width:auto; height:auto; border:1px solid #aaa; margin:0 auto;}
#gallery ul li.chosen span {display:block;}

 

[anna55]

Hat jemand eine Idee wie ich den code schreiben muss, damit die Thumbs in der Höhe 70px und die Breite proportional dargestellt wird?

Eigentlich kenne ich solche Galerien so, dass die Thumbs jeweils die selbe Größe haben und - ich bin erstaunt, dass Du Dir ne JS-Galerie ausgesucht hast. Irgendwie hatte ich Deinen Thread vorher so verstanden, dass Du auf der Suche nach einer CSS-Lösung bist.

JS-Galerien gibt es - allerdings auch mit quadratischen Thumbs - einige:
Demo (E)2 interactive Photo Gallery
xmlGalleryExternal
XML Gallery by Josh Rhame

 

[jilli]

Hallo Anna,

ich habe keine reine css-Webgalerie gefunden. Im Prinzip bin ich mit der jetzigen zufrieden. Schön wäre nur wenn ich die thumbs in dem original Seitenverhätnis darstellen könnte. D.h. alle sind 70px hoch und die Breite variiert.

Hast Du eine Idee?

Gruß JILLI

 

[anna55]

Hast Du eine Idee?

Hab jetzt eben mal mit der FF-Erweiterung Web Developer probiert und ein paar Sachen geändert, dann taucht allerdings wieder das Problem auf, dass das Thumb, das groß angezeigt ist, aus der Leiste verschwindet und diese springt

#gallery {width:1100px; position:relative; height:300px; padding-top:356px; margin:0 113px 90px 113px; border:2px solid #ffaaf0;}

#gallery img.left {width:55px; height:62px; margin-top:100px; background:#444; float:left;cursor:pointer;}
#gallery img.right {width:55px; height:62px; margin-top:100px; background:#444; float:left;cursor:pointer;}

#gallery ul {list-style:none; padding:0; margin-top:100px; float:left; background:#ff00ff; border:1px solid #ff0022;}
#gallery ul li {display:inline;  height:70px; float:left; margin:0 1px; border:1px solid #000; cursor:pointer;}

#gallery ul li.hide {display:none;}

/* using background images */
....
....

/* remove visibility:hidden; if you want to use the original images as thumbnails */
#gallery ul li img { height:70px;}

#gallery ul li span {display:none; position:absolute; left:61px; top:430px; width:411px; font-family:verdana, arial, sans-serif; color:#666; font-size:11px; line-height:15px; text-align:justify;}
#gallery ul li b {color:#444;}

#gallery ul li.chosen {border-color:#fff; cursor:default;}
/* Originalfoto */
#gallery ul li.chosen div {position:absolute; left:0; top:0; width:1100px; height:460px; background:#aabbcc; border:1px solid #000; border-width:1px 1px 0 1px;}
#gallery ul li.chosen div i {width:600px; height:355px; display:table-cell; vertical-align:middle; text-align:center;} 
#gallery ul li.chosen div i img {visibility:visible; width:auto; height:auto; border:1px solid #aaa; margin:0 auto;}
#gallery ul li.chosen span {display:block;}

 

[jilli]

Danke trotzdem, dann müssen sie halt als quadrat bleiben.

Gute Nacht & Danke - Jilli