Archivlink: javarea.de Forum > JavaScript > Bildefekt ???
Vollständigen Link anzeigen: javarea.de Forum > JavaScript > Bildefekt ???

Pages: [1]
geschrieben von olli26 am 05.04.2009 - 20:08
Hallo

Wie oder woher bekomm ich solch ein Script, das man die Bilder so anzeigen lassen kann ?

http://trendsein.de/

Wenn man dort auf ein Bild klickt, wird es schön vergrößert angezeigt. Wie geht das ?


Gruss, Oliver

geschrieben von Micha am 06.04.2009 - 08:19
Hi,

das Original:
http://www.huddletogether.com/projects/lightbox2/

und zwei einfache Nachbauten:
http://www.digitalia.be/software/slimbox2
http://www.felix-riesterer.de/main/....popup.html

Gruß Micha

geschrieben von olli26 am 06.04.2009 - 16:13
Ich danke dir.
Wusste nicht, wie man sowas nennt.


Gruss, Oliver

geschrieben von olli26 am 12.04.2009 - 21:28
Hi Micha

Hab eine Frage, ich hab das jetzt bei mir eingebaut:

http://www.olli26.de/1-Reptilien-Ranch.de-neu/

Was mich jetzt noch stört ist, wenn man auf ein Bild klickt und es vergrößert aufgeht, wird der Hintergrund ja schwarz. Aber leider nicht bis ganz nach unten der Webseite. Wenn man also etwas die Seite vorher runter gescrollt hat, sieht man noch etwas die Webseite.
Ich hab versucht das im Script zu finden, find es aber nicht.
Kennst du dich damit aus ?

HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26: 
27: 

#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: 700px; background-color: #000; }


Ich weiß, das die letzte Zeile was mit dem Hintergrund zu tun hat, kann ihn da auch anders färben. aber die Höhe oder Länge des schwarzen Hintergrundes kann ich nicht ändern
Weißt du evtl. wo ich das dort machen kann ?


Gruss, Oliver

geschrieben von Micha am 13.04.2009 - 00:30
Hallo,

ich nutze das Script nicht. Aber in der FAQ habe ich etwas gefunden für Dein Problem:

Zitat
 The shadow overlay doesn't stretch to cover full browser window.
Remove the default margin and padding from the body tag. Add body{ margin: 0; padding: 0; } to your stylesheet.


Das hilft Dir ggf. weiter. Auf der Lightbox-Seite reicht das Abdunkeln ja bis zum unteren Rand - es muss also gehen.

Gruß und frohe Ostern
Micha

geschrieben von olli26 am 13.04.2009 - 09:30
Hab das Problem gelöst. Zwar nicht den Weg, den du mir da genannt hattest, weil ich das leider nicht hin bekam, aber ich hab mein Design so gemacht, das es nicht bis unten reicht sondern noch 3 Absätze rein gepackt. So ist die Seite dann komplett schwarz.
Trotzdem danke für deine Mühe.


Gruss, Oliver

geschrieben von Micha am 13.04.2009 - 12:57
Hi,

wenn Du eine CSS-Datei hast, dann sollst Du, so die Hilfe, einfach diesen Code hinzufügen:

HTML-Quelltext
1: 

body{ margin: 0; padding: 0; }


So verstehe ich das zumindest - obs hilft, weiß ich aber nicht

Schönen Ostermontag
Micha

geschrieben von olli26 am 13.04.2009 - 13:56
Das hatte ich auch so eingebaut, hat aber nicht geklappt. Aber habs auch mit dem Absatz lösen können *g


Powered by: JBB v.2.0.4 Copyright ©2000-2006, www.javarea.de.