bei klick bild vergrößern (wie geht das?)
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
ausprobieren
beispiel
beschreibung
besserer ansatz
beste mittel
bild
bildergalerie
code
gestaltung
http
jemand
kit
nachteil
paar
qual
stimme
url
verwendung
vorteil
wahl
-
der titel sagt es schon.
ich habe ein bild in meine website eingebunden. ganz normal mit "<img src....../>"
wie mach ich das, wenn ich darauf klicke, dass das bild größer wird. so ähnlich wie bei facebook wäre ideal. (nur halt ohne kommentare. die brauch ich nicht :D)
also kann mir jemand helfen? (denke da sind javascriptkenntnisse von vorteil und da bin ich noch nicht so fit ;D)
würde mich freuen -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
macgs mit iframe und einem link auf deinem bild, ca. so:
<iframe src="bild.html" height="100%" width="100%"></iframe>
bild.html:
<a href="bildgross.html"><img src="deinbild.jpg" width="640" height="480"></a>
bildgross.html:
<img src="deinbild.jpg" width="1280" height="960">
Beitrag zuletzt geändert: 26.2.2013 20:37:09 von pako-webdesign -
So etwas per iframe zu lösen ist sicher nicht der eleganteste Weg.
Javascript ist da schon ein besserer Ansatz. Es gibt etliche fertige Lösungen, die sich schnell in die eigene Website intergieren lassen. Zum Beispiel PrettyPhoto, damit kannst Du nicht nur Bilder vergrößern, sondern auch andere Inhalte, wie Texte und Videos in einer Lihgtbox darstellen. Sogar Slideshows sind damit schnell realisiert. -
stimme da zu. Iframe ist hier sicherlich nicht das beste Mittel der Wahl. Zumal ich mir gerade nicht vorstellen kann, wie das so umsetzbar wäre wie das nach der Beschreibung gefordert wird.
Da Javascript ja schon erwähnt wurde mag ich hier nun mal eine Alternative anbringen
CSS3:
Vorteil: animation ohne plugins, auch bei ausgeschaltetem JavaScript
Nachteil: bei ältere Browser wird das nicht funktionieren...
Hier eine Auflistung mit gleich mehreren Beispielen und Tutorials
http://www.net-kit.com/10-css3-lightbox-alternatives/
hier auch noch mit HTML5 und CSS3:
http://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/
JavaScript:
gibt auch hier ein paar nette, da wäre meine Frage aber ob du für dein Projekt bereits eine JavaScript Library benutzt. Wenn z.B. jQuery schon in Verwendung ist, ist es natürlich sinnvoll darauf auf zu bauen.
Die von fatfreddy genannte prettyphoto sieht auf den ersten Blick in jedem Fall nett aus. Gibt da ja unzählige.
http://sixrevisions.com/javascript/free_javascript_image_galleries/
hier sind auch noch ein paar Beispiele.
Einfach mal raussuchen, was einem von der Gestaltung am besten gefällt und dann mal ausprobieren ;) -
Hab da mal was schnell zusammengebastelt:
<!DOCTYPE Html> <Html ><Head> <style type="text/css"> .Area { position: absolute; } </style> <script type="text/javascript"> function zeige(einBild){ if(document.getElementById(einBild).style.display=="none") { document.getElementById(einBild).style.display="inline"; } else { document.getElementById(einBild).style.display="none"; } } </script> </head> <body> <span class="Area" style="display: none;" id="meinBild"> <div align="center"> <img src="URL zu deinem Bild" alt="" width="900" height="1000" onMouseOut="zeige('meinBild');"> </div> </span> <div align="center"> <img src="URL zu deinem Bild" width="450" height="500" onClick="zeige('meinBild');"alt="" style="margin-right: 14px;"> </div> </body> </Html>
Vorausgesetzt, dass Javascript aktiviert ist.
-
Falls hier noch jemand reinschaut, ich empfehle eine der Lösungen von http://www.simpleviewer.net/
Alle sehr schön gemacht und kostenlos. -
lukasrabe schrieb:
Falls hier noch jemand reinschaut, ich empfehle eine der Lösungen von http://www.simpleviewer.net/
Alle sehr schön gemacht und kostenlos.
Naja, Simpleviewer ist schon mehr eine Bildergalerie und zudem leider komplett abhängig von Flashunterstützung. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
