[Erledigt] Bildvorschau mittig im Browser

Enigma228 · 29.03.2010, 18:11

Ich habe mir eine HTML Seite erstellt, in der lauter Vorschaubilder sind
Bei einem Klick auf die Vorschaubilder soll mittig im Screen/Fenster (nicht mittig in der Seite) das Bild in originalgrösse erscheinen und wenn möglich der "Hintergrund" inaktiv gesetzt wird, solange das Bild nicht geschlossen wird..

Bis jetzt habe ich es über CSS und Javascript versucht in dem ich ein <div>-Layer freigehalten habe und dort einen weiteren <div>-Layer bei Klick auf Vorschaubild mit "innerhtml" eingefügt habe.

Ich habe von einem screen-Objekt gelesen, aber ich weiss nicht wie ich das Bild wie gewünscht positionieren kann..
CSS Code für den einzufügenden layer:

Code:

#popup {
  background-color: rgb(255,221,246);
  position:	absolute;
  top: 50%;
  left: 50%;
  margin-top:	-150px;  /* == halbe Höhe. */
  margin-left:	-250px; /* == halbe Breite.     */
  border: 1px solid gray;
}

mit javascript erstelle ich lediglich die <img>

GIBT ES EIN GUTES TUTORIAL DAFÜR???
Und wie lege ich den Rest der Seite inaktiv??

ChrisB · 29.03.2010, 18:17

Das macht jedes handelsübliche Lightbox-Script, das du im www findest.
Also schau dir eins davon an, wie es arbeitet. Oder setze gleich ein fertiges solches ein, wenn deine Kenntnisse über JS und CSS noch nicht ausreichen, um es selber zu implementieren.

Enigma228 · 29.03.2010, 18:30

Lightbox JS

das habe ich gesucht!!

DANKE

nikosch · 29.03.2010, 18:55

Imho nutzt Lightbox aber auch die Browsermitte, nicht die Screengröße.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Per Browser ein Script auf den Server Starten	smilla	PHP-Fortgeschrittene	30	03.04.2010 11:56
Eine Art Browser im Browser	numix	JavaScript, Ajax und mehr	8	21.08.2009 13:28
HTML Header / JavaAplets: Test ob Browser JAs akzeptiert	SvenLittkowski	HTML, Usability und Barrierefreiheit	6	21.03.2008 04:20
PHP Script als Browser ausgeben	drieling	PHP-Fortgeschrittene	12	22.10.2007 15:52
[Erledigt] T-Online Browser schaltet sich ständig in den Vordergrund		Off-Topic Diskussionen	6	08.05.2006 17:03
PHP-Ausgabe gepuffert an Browser senden	sponer	PHP Tipps 2006	2	24.04.2006 00:08
Style: Cursor für Browser definieren	SvenLittkowski	HTML, Usability und Barrierefreiheit	2	15.04.2006 14:02
nichts im Browser zu sehen		PHP Tipps 2006	12	22.02.2006 20:11
varible im header gültig für alle browser		PHP Tipps 2007	5	29.11.2005 12:03
Wie kann ich verhindern das der Browser encodete	axelnes	HTML, Usability und Barrierefreiheit	15	18.11.2005 18:37
Welche Browser habt ihr?	themonk	Off-Topic Diskussionen	71	22.04.2005 08:47
Browser erkennen		PHP Tipps 2005	24	25.01.2005 02:06
Random von Bildern ohne Browser neu laden		PHP Tipps 2005	6	20.01.2005 19:56
[Erledigt] Browser und MSG Box		HTML, Usability und Barrierefreiheit	4	17.08.2004 18:40

29.03.2010, 18:11
Enigma228 Benutzer Registriert seit: 03.03.2010 Beiträge: 38 PHP-Kenntnisse: Anfänger	[Erledigt] Bildvorschau mittig im Browser Ich habe mir eine HTML Seite erstellt, in der lauter Vorschaubilder sind Bei einem Klick auf die Vorschaubilder soll mittig im Screen/Fenster (nicht mittig in der Seite) das Bild in originalgrösse erscheinen und wenn möglich der "Hintergrund" inaktiv gesetzt wird, solange das Bild nicht geschlossen wird.. Bis jetzt habe ich es über CSS und Javascript versucht in dem ich ein <div>-Layer freigehalten habe und dort einen weiteren <div>-Layer bei Klick auf Vorschaubild mit "innerhtml" eingefügt habe. Ich habe von einem screen-Objekt gelesen, aber ich weiss nicht wie ich das Bild wie gewünscht positionieren kann.. CSS Code für den einzufügenden layer: Code: #popup { background-color: rgb(255,221,246); position: absolute; top: 50%; left: 50%; margin-top: -150px; /* == halbe Höhe. / margin-left: -250px; / == halbe Breite. */ border: 1px solid gray; } mit javascript erstelle ich lediglich die <img> GIBT ES EIN GUTES TUTORIAL DAFÜR??? Und wie lege ich den Rest der Seite inaktiv??


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

29.03.2010, 18:17
ChrisB Moderator¹ Registriert seit: 28.03.2010 Beiträge: 7.470 PHP-Kenntnisse: Fortgeschritten	Das macht jedes handelsübliche Lightbox-Script, das du im www findest. Also schau dir eins davon an, wie es arbeitet. Oder setze gleich ein fertiges solches ein, wenn deine Kenntnisse über JS und CSS noch nicht ausreichen, um es selber zu implementieren.

29.03.2010, 18:30
Enigma228 Benutzer Registriert seit: 03.03.2010 Beiträge: 38 PHP-Kenntnisse: Anfänger	Danke Lightbox JS das habe ich gesucht!! DANKE

29.03.2010, 18:55
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Imho nutzt Lightbox aber auch die Browsermitte, nicht die Screengröße. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --