Bilder durch Anklicken vergrößern

Mit einem JavaScript kannst du auf deiner Website die Bilder durch Anklicken vergrößern bzw. verkleinern. Die veränderte Größe bleibt dabei so lange bestehen, bis du erneut auf das Bild klickst. Der Einsatz kann bspw. in einer Fotogalerie sinnvoll sein. So bist du dazu in der Lage, mehr Fotos auf einer Seite anzuzeigen.

Wie das ganze dabei funktioniert, zeige ich dir in diesem Artikel.

 

Mit JavaScript Bilder durch Anklicken vergrößern

Das nachstehende JavaScript musst du dabei in den <head> Bereich deiner Website einfügen.

 

 

Beispiel:

<script language="javascript">
 <!-- var AngezeigteBreite = 500; var GespeicherteBreite = 0;
 function BildAnpassen(Bild)
 {
     if (Bild.width > AngezeigteBreite || GespeicherteBreite > AngezeigteBreite)
     {
         if (Bild.width == AngezeigteBreite)
         {
             Bild.width = GespeicherteBreite;
         }
         else
         {
             GespeicherteBreite = Bild.width;
             Bild.style.cursor = "pointer";
             Bild.width = AngezeigteBreite;
         }
     }
 }
 //-->
</script>

 

Damit alleine funktioniert das Script leider noch nicht. Du musst zunächst noch ein zusätzliches Attribut dem img-Tag hinzufügen.

 

Beispiel:

<img onClick="BildAnpassen(this)" onLoad="BildAnpassen(this)" src="bild.png" title="Klicken zum Vergrößern/Verkleinern">

 

Hinweis:

So lange das Attribut onClick mit eingefügt wird, lässt sich diese Funktion natürlich bei beliebig vielen Bildern realisieren. Die Bilder vergrößern sich dabei auf die in den Variablen eingestellte Breite.

Mit diesem Script kann man jedoch keinen Traffic einsparen, bspw. indem man Thumbnails der Bilder als Vorschau verwendet. Das Script ist darüber hinaus leider auch nicht sehr flexibel. Eine bessere (und hübschere) Lösung erhältst du mit „Image Lightbox“. Dieses JavaScript setzt dabei auch auf jQuery und CSS. Weitere Informationen dazu erhältst du im englischsprachigen Blog von Osvaldas Valutis.

Eine andere Alternative könnte dabei vielleicht auch eine auf PHP basierende Fotogalerie mit Vorschauanzeige sein.

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.