Bild vergrößern
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
alpha
anfangen
bild
brauche
code
dialog
fenster
galerie
hilfe
hintergrund
jemand
programmieren
sagen
stichwort
suche
tausend
umsetzung
-
Hallo,
ich habe nun schon einige Seiten gesehen, bei denen man wenn man auf ein Bild klickt
das Bild in Groß sieht und wenn man dann unten auf ein X klickt schließt es sich wieder.
(KEIN NEUES FENSTER)
Kann mir jemand sagen wie das geht und was ich dafür brauche?
(also vllt irgendwelche Bilder oder sowas?)
- Gruß Kovel -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
das stichwort dazu heißt "lightbox" oder "modal dialogs"...
da gibt es tausende von javascript-umsetzungen - frag google
kann man aber auch relativ einfach selber programmieren. -
Okay,
Ich wusste nicht wie das hieß, war dann doch recht schwer das passende zu finden.
Und wie kann ich sowas Programmieren ? -
Suche doch mal nach lightbox, damit ist es sehr gut umsetzbar.
-
Und wie kann ich sowas Programmieren ?
du könntest ganz einfach so anfangen:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>Galerie</title> <style type="text/css"> html, body { width:100%; height:100%; margin:0px; padding:0px; } #galerie { width:100%; height:100%; position:absolute; top:0px; left:0px; background-image:url(alpha.png); text-align:center; display:none; } #galerie > div { margin:20px; } </style> <script type="text/javascript"> function galerie(imgsrc) { var galerieElement = document.getElementById('galerie'); if(imgsrc) { galerieElement.firstElementChild.innerHTML = '<img src="'+imgsrc+'" alt="">'; galerieElement.style.display = 'block'; }else { galerieElement.style.display = 'none'; } } </script> </head> <body> <img src="bild.jpg" alt="" height="80" onClick="galerie(this.src)"> <div id="galerie"> <div></div> <a href="javascript:galerie();">Schließen</a> </div> </body> </html>
das bild alpha.png ist hier für den halbtransparenten hintergrund zuständig. -
wie wärs damit:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <style> img.maximized{ top:0; width:80%; margin: 20px 10%; position:absolute; z-index:100; } div.alpha{ position:absolute; top:0; left:0; width:100%; height:100%; background-color: rgba(102,102,102,.7); z-index:99; } </style> <script type="application/javascript" language="javascript"> function maximize(){ document.getElementById("bild").className = "maximized"; document.getElementById("bild").setAttribute("onClick","minimize();"); document.getElementById("alpha").className = "alpha"; } function minimize(){ document.getElementById("bild").className = "minimized"; document.getElementById("bild").setAttribute("onClick","maximize();"); document.getElementById("alpha").className = ""; } </script> </head> <body> <div id="alpha"><img onClick="maximize();" id="bild" src="img/Vogesenhajk.JPG" width="250"></div> </body> </html> -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
