Erledigt HTML5 bzw. CSS3 - Bilder per Klick zoomen

blackdeath

GROSS!ARTIG?
Habe lange nichts mehr mit html bzw css gemacht und muss mal kurz 3 Bilder in eine Homepage einfügen, diese verfügt über ein responsive Webdesign.

Die Bilder sollen in kleiner Größe normal angezeigt werden und per Mausklick auf normale Größe zoomen, wobei die Homepage im Hintergrund bleiben soll, habe im Hinterkopf das der Browser die Homepage dabei abdunkelt. Also das zoom-Bild soll auf einer Art Layer erscheinen und das HP Layout nicht verändern bei der Größenänderung, ich hoffe ich habe das verständlich ausgedrückt was ich suche.

Hatte mal gegooglet, aber vorwiegend sehr alte Hinweise gefunden und teilweise auch nicht so passend.

Wäre toll wenn mir da jemand was zu sagen könnte.
 

vinyl

♫ ♪ ♫ ♪ ♪
ich würde den gleichen code verwenden, der auch bei den anderen bildern verwendet wird.
 

blackdeath

GROSS!ARTIG?
"andere Bilder"
Die Homepage besteht zur Zeit nur aus ca. 7 Seiten und hat dabei nur eine Headergrafik als Bild, die Grafik wird aber nur einfach angezeigt, also normal eingebunden in die Seite.

Das wichtige auf der Seite ist der Text zur Information, es gab nun noch ein Treffen und das soll kurz anschaulich mit 3 Fotos dokumentiert werden. Es sind ein paar mehr Menschen drauf, also wäre es schön wenn die Bilder größer angezeigt werden können, aber nur die 3 und keine Galerie oder so.

###
Modal Window
Das ist ja eher für einen Hinweistext gedacht, oder?

jquery und mootools
Das sind ja beide Javascript Frameworks mit sehr vielen Zusatzfunktionen.

#####

Sonst geht man so vor, man bindet 3 Thumbnail Grafiken ein, wenn man drauf klickt öffnet sich ein neues Tab und das Bild wird in einer normalen Größe angezeigt.
Danach muss der Betrachter aber das Tab wieder schließen und zur Homepage zurück.

Aber wenn man das nur über Frameworks lösen kann, dann wohl eher die Thumbnail-Tab-Lösung.
 

SkAvEnGeR

Master of Tools
Also die Thumbnail -> Tab-Lösung ist ja recht einfach

HTML:
<a href="images\bigpicture.jpg" title="klick zum vergr&ouml;&szlig;ern" target="_blank" ><img src="kleinesBild" alt="Bildbeschreibung"></a>

Sonst eine einfache und schicke Möglichkeit hier
 

Dorwyn

Bekanntes Mitglied
Ich kenn mich mit HTML genau gar nicht aus, aber du suchst do sowas wie hier im Forum, oder? Im Bilderwitze Thread gibts doch ein paar Bilder die man dann vergrößern kann wenn man drauf klickt. Wie wird es denn da gemacht?
 

blackdeath

GROSS!ARTIG?
Dank SkAvEnGeR und floatbox habe ich die Bilderzoom Geschichte gelöst.

Paket downloaden, auf den Webspace packen, zwei Zeilen Code zusätzlich in den Header und die Bilder normal einbinden.

Durch den floatbox Code werden Bilder in der Homepage automatisch erkannt und die Funktion kommt zum Einsatz. :yo
 
Oben Unten