Webdesign - Mit dem Lupeneffekt Bilder einer Website vergrößern

  1. Zum Inhalt springen

webdesign
klamonfra
Klaus Franz


Webdesign - Mit dem Lupeneffekt ist es möglich Bilder einer Website zu vergrößern

10Mai2014

Die Lupe bleibt solange verborgen, bis Sie den Mauszeiger über ein Bild bewegen.


Mit Hilfe von jQuery habe ich einen Lupeneffekt umgesetzt und betrachte die Bilder durch ein Vergrößerungsglas. In Wirklichkeit wird eine große Version des Vorschaubildes geladen und nur dort angezeigt, wo sich gerade die Lupe befindet. Somit entsteht der Effekt, dass die Lupe das dargestellte Bild vergrößert.
Aber auch andere Spielereien sind damit möglich, die ich auf dieser Webseite einmal vorstellen möchte.

Um das folgende Bild durch eine Lupe zu betrachten, bewegen Sie bitte den Mauszeiger über das Bild.

Lupe
Hauptportal des Doms

Photo © Monika & Klaus Franz


Ein weiterer Effekt wäre ein schwarz/weiß Bild, dass erst beim Durchschauen durch eine Linse die Farbe zum Vorschein bringt.

Linse
Herbstfarben

Photo © Monika & Klaus Franz


Oder wie wäre es mit einem unscharfen Bild, dass erst beim Durchschauen einer Linse scharf wird.

Linse
Blume

Photo © Monika & Klaus Franz


Wie habe ich nun diese Effekte realisiert?

Das HTML (HyperText Markup Language) ist für jeden der gezeigten Beispiele nach dem gleichen Muster aufgebaut.
Es gibt einen "div-Container" mit der Bezeichnung "id = effekt", und darin enthalten ist ein weiterer "div-Container" mit der Bezeichnung "id = lupen", der das Bild der Lupe (lupe.png) oder der Linse (linse.png) beinhaltet. Im "div-Container" "id = effekt" wird außerdem noch das Bild in einer kleinen Version, oder wie im anderen Beispiel in schwarz/weiß, dargestellt.

<div id="effekt">
    <div id="lupen">
        <img id="lupe" src="/bilder/lupe.png"
             width="300" height="250" alt="Lupe">
    </div>
    <img id="mini" src="/bilder660/Domportal22.jpg"
         width="660" height="440" alt="Hauptportal des Doms">
</div>

Durch die unterschiedlichen Bezeichnungen der "div-Container" kann ich im CSS (Cascading Style Sheet) das gewünschte Design erzielen. Zuerst wird der äußere Container "#effekt" mittig gesetzt und der Cursor ausgeschaltet. Dadurch ist das Bild in der Lupe oder in der Linse besser zu erkennen.
Dann wird die Größe für das Bild der Lupe angegeben ("#lupe") und das Bild der Lupe genau platziert.
Und zum Schluss wird die Größe des Lupenglases, durch die das Bild vergrößert dargestellt wird, im div-Container "#lupen" angegeben, und der ganze Container unsichtbar geschaltet. Damit ist weder die Lupe noch das vergrößerte Bild zu sehen.

#effekt {
    width: 41.25em;
    margin: 1em auto;
    position: relative;
    border: 5px solid #eee;
    box-shadow: 1px 1px 5px 2px #777;
    cursor: none;
}

#lupe {
    width: 15.94em;
    height: 13.31em;
    left: -6px;
    top: -5px;
    position: absolute;
}

#lupen {
    width: 11em;
    height: 11em;
    border-radius: 50%;
    box-shadow: 3px 3px 5px #111;
    background: url("/bilder/Domportal22.JPG") no-repeat;
    position: absolute;
    display: none;
}

Erst nachdem der Betrachter mit dem Mauszeiger über das Bild fährt wird die Lupe sichtbar.
Aber dafür benötigt man dann noch jQuery und ein zugehöriges JavaScript (objektorientierte Programmiersprache). Das Script ist aus verschiedenen Beispielen zusammengesetzt und sieht auf dieser Seite wie folgt aus:

$(document).ready(function() {
  $("#effekt").mousemove(function(Pos){
    var bild = new Image();
    bild.src = $("#mini").attr("src");
    var width = bild.width;
    var height = bild.height;
    var li = Pos.pageX - $(this).offset().left;
    var ob = Pos.pageY - $(this).offset().top;
    if ( (li > 0 && li < $(this).width()) &&
         (ob > 0 && ob < $(this).height()) ) {
      $("#lupen").fadeIn("fast");
    } else {
      $("#lupen").fadeOut("slow");
    }
    if ($("#lupen") .is (":visible")) {
      var pw = $("#lupen").width()/2;
      var ph = $("#lupen").height()/2;
      var px = li - pw;
      var py = ob - ph;
      var grw = Math.round(pw - li/$("#mini").width() * width * 3.03);
      var grh = Math.round(ph - ob/$("#mini").height() * height * 3.03);
      var pos = grw + "px " + grh + "px";
      $("#lupen").css({left: px, top: py, backgroundPosition: pos});
    }
  })
})

Der Faktor 3.03 ist nur bei der Vergrößerung relevant da die anderen Bilder in ihrer Größe bestehen bleiben und errechnet sich aus Originalgröße dividiert durch die Größe des kleinen Bildes.
Und damit sind der Fantasie keine Grenzen mehr gesetzt, um weitere Effekte umzusetzen. Wie wäre es zum Beispiel mit einem abgedunkelten Bild, dass erst durch eine Linse seine volle Helligkeit preisgibt?

Linse
Inishbofin

Photo © Monika & Klaus Franz



Viel Spaß beim Nachbauen!

Blume

Zum Seitenanfang springen Λ