Probleme mit Click Bildergalerie =(

[taschi]

Hallo alle zusammen,

ich möchte gerne solch eine Bildergalerie:

Diese Art brauch ich genauso, mit dem Textfeld etc.

nun hatte ich mir die von dieser Seite runtergeladen und in meine Website eingebunden. Auch richtig. Doch meine Seite ist etwas kleiner und ich wollte es anpassen.

Nun mein Problem:
Sobald ich bestimmte Änderungen vornehme in der CSS (z. Bsp. die komplette Breite) kann ich die Bilder nicht mehr anklicken und die kleine Scrollbar hängt.
AUßerdem funktioniert diese Bildergalerie anscheinend nur bei Firefox, nicht aber bei Internetexplorer.

Hat jemand mal einen Tipp für mich oder besser eine Alternative?
Liebste Grüße=)

 

[Myhar]

AW: Probleme mit Click Bildergalerie =(

Das ist ja nur ein sehr simples Script. CSS Änderungen beeinflussen das Script nicht.
Was bei dir genau das Problem ist kann man nicht sagen, hier ist ein Beispiel interessant.
Ändere ich jedoch in der photo_click.css in Zeile 11 zB den Wert bei width auf 1000px, dann funktioniert es ohne Probleme.

 

[taschi]

AW: Probleme mit Click Bildergalerie =(

Das ist ja nur ein sehr simples Script. CSS Änderungen beeinflussen das Script nicht.
Was bei dir genau das Problem ist kann man nicht sagen, hier ist ein Beispiel interessant.
Ändere ich jedoch in der photo_click.css in Zeile 11 zB den Wert bei width auf 1000px, dann funktioniert es ohne Probleme.

hmmm... das ist komisch.. ich habe den Wert auf 550px runter gemacht und auf einmal gings nicht mehr...
ich hatte es auch nur in dessen simplem Script ausprobiert, ohne Erfolg...

 

[Myhar]

AW: Probleme mit Click Bildergalerie =(

Und warum gibst du nicht gleich an, auf welchen Wert du die Breite geändert hast? Dann wären wir jetzt schon einen Schritt weiter. Es zahlt sich aus, sein Problem genau zu schildern und Beispiele zu posten.
Macht man die Gallerie zu klein dann funktioniert sie tatsächlich nicht mehr. Das ist auch logisch, da sich dann der Bereich für das große Bild und der scrollbereich überlagern. Auf die Idee, den Bereich so klein zu machen, wäre ich gar nicht gekommen.
Sieht man sich das Beispiel mit zB Firebug an, erkennt man das Problem sofort.
Die geklickten Bilder werden absolut und groß an die richtige Stelle positioniert. Ändere das im CSS, dann klappt es wieder.

 

[taschi]

AW: Probleme mit Click Bildergalerie =(

Und warum gibst du nicht gleich an, auf welchen Wert du die Breite geändert hast? Dann wären wir jetzt schon einen Schritt weiter. Es zahlt sich aus, sein Problem genau zu schildern und Beispiele zu posten.
Macht man die Gallerie zu klein dann funktioniert sie tatsächlich nicht mehr. Das ist auch logisch, da sich dann der Bereich für das große Bild und der scrollbereich überlagern. Auf die Idee, den Bereich so klein zu machen, wäre ich gar nicht gekommen.
Sieht man sich das Beispiel mit zB Firebug an, erkennt man das Problem sofort.
Die geklickten Bilder werden absolut und groß an die richtige Stelle positioniert. Ändere das im CSS, dann klappt es wieder.

tut mir leid... ..
ich hatte aber die Überlagerung weggenommen und hatte alles zurecktgerück mit margin-left..
also positioniert ist alles richtig. es geht nur nicht mehr.
aber ich versuche das mal, danke und tut mir leid..=(

 

[Myhar]

AW: Probleme mit Click Bildergalerie =(

Ist ja schon in Ordnung, es geht ja nur darum, dass man dir leichter und schneller helfen kann bei zukünftigen Beiträgen
margin-left ist wohl nicht ausreichend, du musst dein großes Bild wohl insgesamt kleiner machen. Oder top/left anpassen, dass es klappt... Oder position:absolute entfernen...
Erweiter dein CSS testweise folgendermaßen:

#gallery ul li.click {outline:1px solid black;}

Dann siehst du genau wo das große Bild liegt und du kannst das Bild entsprechend deinen Wünschen positionieren.

 

[taschi]

AW: Probleme mit Click Bildergalerie =(

ohman.. ich komm mir vor als wäre ich doof...@@

also so sieht es momentan bei mir aus:

#gallery {width:750px; height:360px; position:relative; border:0px solid #ddd; background:#C6E7CE;}
#gallery ul {list-style:none; padding:5px; margin-top:12px; width:130px; float:right; height:219px; overflow:auto;}
#gallery ul li {display:inline;  width:50px; height:50px; float:left; margin:0 4px 4px 0; border:1px solid #444; cursor:pointer;}
#gallery ul li img {display:block;  width:50px; height:50px;}
#gallery ul li span {display:none; position:absolute;  left:380px; top:245px; width:155px;font-family:verdana, arial, sans-serif; color:#06a; font-size:11px; line-height:15px; text-align:justify;}
#gallery ul li span b {color:#444;}

/* required for IE5.x and IE6 to display the start image size correctly */
#gallery ul li.click i img.default {margin-top:15px; margin-left:30px; width:300px; height:260px; border:0px solid #000;}

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

#gallery ul li.click {border-color:#fc0; background:#f8f8f8; cursor:default;}

#gallery ul li.click i {position:absolute; left:0; top:0; width:545px; height:355px;}

#gallery ul li.click i img {margin:5px auto 0 auto; width:auto; height:auto; border:0px solid #fff;}

#gallery ul li.click span {display:block;}

und als Screenshot:




das sind 2 Bilder, einmal wie man es sieht und dann wenn man mit der unteren Scrollabr rüberscrollt...

vlt. is das ne bessere Hilfe=(
Danke!

Edit: Ach und die großen Bilder habe ich direkt so klein gemacht, also die werden nicht klein gezwungen, die habe ich so klein abgespeichert.