jQuery: Pfeilsymbole für Blätternavigation dynamisch einblenden

Kein Beitragsbild

Sven Drieling

**** 38911 BASIC BYTES FREE **** READY. []

Das Blättern per Mausklick eignet sich nicht nur für Bildgalerien. Sie können diese Funktion auch sehr gut zur Navigation auf kleinen Websites mit so genanntem Ein-Seiten-Layout verwenden. Mithilfe von jQuery können Sie die Vor- und Zurück-Symbole sogar dynamisch einblenden – je nachdem, wo sich der Mauszeiger gerade befindet. Oder Sie können die Symbole ganz weglassen und bei einem Klick rechts ins Bild direkt vorwärts blättern beziehungsweise bei einem Klick in die linke Bildhäfte zurück. Wie Sie die verschiedenen Varianten einer solchen Blätternavigation einrichten erläutert dieses Tutorial Schritt für Schritt. Für Eilige gibt’s das komplette Script als PlugIn zum Herunterladen.

Fertiges Beispiel: jQuery-Plugin – Image Next Prev (neues Fenster)

Position des Mauszeigers

Im 1. Beispiel wird die Position des Mauszeigers emittelt und angezeigt, ob er sich links oder rechts von der Bildmitte befindet.

Beispiel: Bildmitte – Live Demo (neues Fenster)

In jQuery steht bei Events in e.pageX und e.pageY die Mausposition relativ zur linken, oberen Ecke des Dokuments.

jQuery("#image").mousemove(function(e) {
    jQuery("#mousePosAbsX").text(e.pageX);
    jQuery("#mousePosAbsY").text(e.pageY);
}

Um diese in die Mausposition innerhalb des Bildes umzurechnen, wird zusätzlich die Position des Bildes benötigt. Diese liefert offset().

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €!

E-Book Bundle von Andreas Hecht
var imagePos = jQuery("#image").offset(); // Bildposition (top, left)

imagePos.left und imagePos.top enthält nun die Position der linken, oberen Ecke des Bildes.

Mit diesen Werten wird die Position des Mauszeigers innerhalb des Bildes berechnet.

// Mausposition relativ zur linken, oberen Ecke des Bildes
// berechnen
var mouseRelX = e.pageX - imagePos.left;
var mouseRelY = e.pageY - imagePos.top;

Und festgestellt, ob sich der Mauszeiger links oder rechts von der Bildmitte befindet.

var imageWidth  = jQuery("#image").width(); // Bildbreite
var imageCenter = imageWidth / 2;           // Bildmitte

// Links oder rechts von der Bildmitte?
if(mouseRelX < imageCenter) {
    jQuery("#leftRight").text("< links");
} else {
    jQuery("#leftRight").text("rechts >");
}

Der komplette Quelltext des Bildmitte-Beispiels:

jQuery.noConflict();

jQuery(document).ready(function() {
    jQuery("#image").mousemove(function(e) {
        var imagePos    = jQuery("#image").offset(); // Bildposition (top, left)
        var imageWidth  = jQuery("#image").width();  // Bildbreite
        var imageCenter = imageWidth / 2;            // Bildmitte

        // Mausposition relativ zur linken, oberen Ecke des Bildes
        // berechnen
        var mouseRelX = e.pageX - imagePos.left;
        var mouseRelY = e.pageY - imagePos.top;

        // Links oder rechts von der Bildmitte?
        if(mouseRelX < imageCenter) {
            jQuery("#leftRight").text("< links");
        } else {
            jQuery("#leftRight").text("rechts >");
        }

        // Position des leftRight-Divs setzen
        jQuery("#leftRight").css({top: e.pageY + 10 , left: e.pageX + 10});

        // Info
        jQuery("#imagePosLeft").text(imagePos.left);
        jQuery("#imagePosTop") .text(imagePos.top);

        jQuery("#mousePosAbsX").text(e.pageX);
        jQuery("#mousePosAbsY").text(e.pageY);

        jQuery("#mousePosRelX").text(mouseRelX);
        jQuery("#mousePosRelY").text(mouseRelY);

        jQuery("#imageWidth")  .text(imageWidth);
        jQuery("#imageCenter") .text(imageCenter);
    }); // mousemove
}); // jQuery(document).ready(function() {

Blättern

Im 2. Beispiel wird diese Mausposition benutzt, um mit einem Klick auf die rechte Bildhälfte zum nächsten und mit einem Klick auf die linke zum vorigen Bild zu blättern.

Beispiel: Blättern – Live Demo (neues Fenster)

Die Pfadnamen der Bilder stehen hierzu im Array images und der Index des angezeigten Bildes in imageIdx.

var imageIdx = 0;
var images   = ["mr_eublepharis_macularius_400_174.jpg",
                "mr_poledancer_400_239.jpg",
                "mr_daipeem_400_236.jpg", "mr_grumpy_400_291.jpg"];

Bei einem Mausklick wird, abhängig von der Position des Mauszeigers, der Indexzähler erhöht oder vermindert. Und beim Überschreiten der Grenzen (0, maximale Anzahl der Bilder) passend korrigiert.

jQuery("#image").click(function(e) {
    switch(whichSide(e)) {
        case "left" :  imageIdx--; break;
        case "right":  imageIdx++; break;
        default:
    }

    if(imageIdx < 0) {
        imageIdx = images.length - 1;
    }

    if(imageIdx >= images.length) {
        imageIdx = 0;
    }

Zum Wechseln des Bildes wird zum Schluß dessen src-Attribut auf den neuen Pfad gesetzt.

jQuery("#image").attr("src", "images/" + images[imageIdx]);

Der komplette Quelltext des Blättern-Beispiels:

jQuery.noConflict();

jQuery(document).ready(function() {
    var imageIdx = 0;
    var images   = ["mr_eublepharis_macularius_400_174.jpg",
                    "mr_poledancer_400_239.jpg",
                    "mr_daipeem_400_236.jpg", "mr_grumpy_400_291.jpg"];

    function whichSide(e) {
        var side = "";

        var imagePos    = jQuery("#image").offset();  // Bildposition (top, left)
        var imageWidth  = jQuery("#image").width();   // Bildbreite
        var imageCenter = imageWidth / 2;             // Bildmitte

        // Mausposition relativ zur linken, oberen Ecke des Bildes
        // berechnen
        var mouseRelX = e.pageX - imagePos.left;
        var mouseRelY = e.pageY - imagePos.top;

        // Links oder rechts von der Bildmitte?
        if(mouseRelX < imageCenter) {
            side = "left";
            jQuery("#leftRight").text("< links");
        } else {
            side = "right";
            jQuery("#leftRight").text("rechts >");
        }

        // Position des leftRight-Divs setzen
        jQuery("#leftRight").css({top: e.pageY + 10 , left: e.pageX + 10});

        // Info
        jQuery("#imageIdx")    .text((imageIdx + 1) + "/" + images.length);

        jQuery("#imagePosLeft").text(imagePos.left);
        jQuery("#imagePosTop") .text(imagePos.top);

        jQuery("#mousePosAbsX").text(e.pageX);
        jQuery("#mousePosAbsY").text(e.pageY);

        jQuery("#mousePosRelX").text(mouseRelX);
        jQuery("#mousePosRelY").text(mouseRelY);

        jQuery("#imageWidth")  .text(imageWidth);
        jQuery("#imageCenter") .text(imageCenter);

        return side;
    }// whichSide

    jQuery("#image").mousemove(function (e) {
        whichSide(e);
    }); // mousemove

    jQuery("#image").click(function(e) {
        switch(whichSide(e)) {
            case "left" :  imageIdx--; break;
            case "right":  imageIdx++; break;
            default:
        }

        if(imageIdx < 0) {
            imageIdx = images.length - 1;
        }

        if(imageIdx >= images.length) {
            imageIdx = 0;
        }

        jQuery("#image").attr("src", "images/" + images[imageIdx]);

        // Info
        jQuery("#imageIdx").text((imageIdx + 1) + "/" + images.length);
    }); // click
}); // jQuery(document).ready(function() {

jQuery-Plugin

Das fertige Beispiel ist als jQuery-Plugin verpackt. Mit diesem Plugin-Beispiel kann eine Bilderserie angesehen und dabei direkt per Mausklick im Bild vor- und zurückgeblättert werden.

Beim Bewegen des Mauszeigers im Bild wird angezeigt, ob ein Mausklick zum nächsten oder zum vorigen Bild springt. Ausgeblendet wird diese Anzeige bei einem Mausklick und beim Verlassen des Bildes.

Fertiges Beispiel: jQuery-Plugin – Image Next Prev (neues Fenster)

Den kompletten Quelltext des Plugins können Sie hier ansehen und in Ihre Zwischenablage kopieren.

Hinweise zum Quelltext des Plugins

Das Plugin zeigt beim Bewegen (mousemove-Event) des Mauszeigers innerhalb des Bildes an, ob ein Mausklick zum nächsten oder zum vorigen Bild springt und blendet diese Anzeige bei einem Mausklick (click-Event) oder dem Verlassen (mouseout-Event) des Bildes aus.

nextPrev-Anzeige (Pfeil)

Damit Mausklicks und Mausbewegungen auch registriert werden wenn sich der Mauszeiger über der nextPrev-Anzeige befindet, werden nicht nur dem Bild, sondern auch dieser Anzeige die Event-Handler zugewiesen.

// Enthält weiter/zurück-Anzeige (Pfeil)
var nextPrev = jQuery("<div></div>")
    .css({position  : "absolute",
          opacity   : 0.8,
          filter    : "alpha(opacity=80)", // IE
          lineHeight: 0, fontsize: 0})
    .hide();

    jQuery("body").append(nextPrev);

// …

jQuery(img).click(click)
           .mousemove(mousemove)
           .mouseout(mouseout);

jQuery(nextPrev).click(click)
                .mousemove(mousemove)
                .mouseout(mouseout);

Webbrowser mit mousemove nach click

In Chrome und Safari folgt auf ein click-Event (Anzeige verbergen) automatisch ein mousemove-Event (Anzeige hervorholen). Damit die nextPrev-Anzeige versteckt bleibt, wird beim click-Event die Mausposition in vars.lastX und vars.lastY gespeichert und beim mouesemove-Event die Anzeige nur aktiviert, wenn sich die Position verändert hat.

function click(e) {
    var vars = img.data("imagenextprev:vars");

    // …

    // Position merken für mousemove- nach click-Event-Webbbrowser (Chrome, Safari)
    vars.lastX = e.pageX;
    vars.lastY = e.pageY;

function mousemove(e) {
    var vars = img.data("imagenextprev:vars");

    if(vars.lastX != e.pageX || vars.lastY != e.pageY) {
        jQuery(nextPrev).show();
    }

Verlassen des Bildes

Das Ausschalten der nextPrev-Anzeige beim Verlassen des Bildes ist etwas umständlicher.

Wenn nur das Bild einen mouseout-Handler hat, wird kein mouseout-Event registriert, wenn sich der Mauszeiger gerade über der nextPrev-Anzeige befindet und von dort mit einer schnellen Bewegung aus dem Bild geschoben wird, so muss sowohl das Bild als auch die nextPrev-Anzeige mouseout-Events liefern.

Um nun sicherzustellen, dass nicht nur die Anzeige, sondern das Bild verlassen wurde ist eine eigene Abfrage nötig, die wieder die Position des Mauszeigers relativ zur linken, oberen Ecke des Bildes bestimmt und die Anzeige nur deaktiviert, wenn sich der Mauszeiger außerhalb des Bildes befindet.

function mouseout(e) {
    // …

    // Mauszeiger außerhalb des Bildes? -> nextPrev verstecken
    if(mouseRelX < 0 ||
       mouseRelX >= imageWidth ||
       mouseRelY < 0 ||
       mouseRelY >= imageHeight
    ) {
        jQuery(nextPrev).hide();

    }

Benutzung des Plugins

Einbinden

<script src="js/jquery-1.4.2.js"         type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.imagenextprev.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
// <![CDATA[
jQuery.noConflict();

jQuery(document).ready(function() {
    jQuery("#demo1").imagenextprev({
        imagesBaseUrl: "images/",
        images       : ["mr_eublepharis_macularius_400_174.jpg",
                        "mr_poledancer_400_239.jpg",
                        "mr_daipeem_400_236.jpg", "mr_grumpy_400_291.jpg"],
        nextPrevShow : "mousecursor"
    });
}); // jQuery(document).ready(function() {
// ]]>
</script>

Optionen

imagesBaseUrl (Voreinstellung: "")
Basis-URL der Bilder, z.B. "http://www.example.com/images/".

images (Voreinstellung: [])
Ein Array mit den Pfadnamen der Bilder, z.B. ["bild1.jpg", "bild2.jpg", "bild3.jpg"].

Der komplette Pfad wird aus imagesBaseUrl + Pfadname des Bildes zusammengesetzt: http://www.example.com/images/bild1.jpg

nextPrevShow (Voreinstellung: “mousecursor”)
Legt fest an welche Position die weiter-/zurück-Anzeige (Pfeil) dargestellt wird. Möglich Werte sind:

  • mousecursor: Beim Mauszeiger (Voreinstellung)
  • fixed: Vertikal zentriert, 10 Punkte vom Rand.
  • none: Keine Anzeige (blättern funktioniert weiterhin)
imageNext (Voreinstellung: "images/jsilr_arrowright.gif")
Bild für weiterblättern.

imagePrev (Voreinstellung: "images/jsilr_arrowleft.gif")
Bild für zurückblättern.

debug (Voreinstellung: false)
Debugausgaben mit console.log() (false oder true).

Getestet mit…

Chrome 5.0, Firefox 3.0, Firefox 3.6.8, IE 6, IE 7, IE 8, Opera 9.00, Opera 10.60, Safari 4.0.3.

Konzept: Nur mit HTML

Eine Lösung/Fallback nur mit HTML sollte sich per IFrame plus Usemap bzw. Image Map (ismap) umsetzen lassen.

Per IFrame wird das Bild in die Seite eingebunden. Mit der Usemap wird zwischen linker und rechter Bildhälfte unterschieden.

<div>
  <map name="leftRight">
    <area shape="rect" coords="0,0,199,235"   href="left.html"  alt="Links"  />
    <area shape="rect" coords="200,0,399,235" href="right.html" alt="Rechts" />
  </map>
</div>

<p><img usemap="#leftRight" src="mr_daipeem_400_236.jpg" width="400" height="236" alt="Daipeem" /></p>

Bei einem Mausklick liefert der Server das neue Bild inklusive passender Koordinaten für die Usemap aus.

In Fall einer ismap sendet der Webbrowser nur die Klickposition im Bild an den Server. Die Bestimmung der Bildhälfte erfolgt dann auf dem Server.

Weitere Möglichkeiten

Das Beispiel zeigt wie sich mit jQuery die Mausposition innerhalb eines HTML-Elements bestimmen lässt und diese dazu genutzt werden kann, um per Mausklick auf ein Bild nicht nur vor- sondern auch zurückblättern zu können. Darüberhinaus lässt sich eine solche Position auch für weitere Zwecke nutzen, z.B.:

Bei einer automatisch scrollenden Bildershow oder Landkarte ist das Scrollen umso schneller, je weiter der Mauszeiger von der Bildmitte entfernt ist.

Mit der relativen Bildposition kann in HTML-Canvas gezeichnet, in einem <div> Drag&Drop-Operationen durchgeführt oder ein Bildausschnitt bestimmt werden.

Mit einem Klick auf der rechten Hälfte eines Toolicons wird das Werkzeug zum Füllen und mit einem Klick auf der Linken das Werkzeug zum Zeichnen eines Umriß ausgewählt.

Per Hover oder wieder mit der Mausposition werden im Bild am oberen Rand Informationen und am unteren Rand zusätzliche Bedienelemente wie Vollbild, Direktlink, Download verschiedener Bildgrößen, … ein- und ausgeblendet.

Material zum Download

Zip-Archiv (266 KByte) mit allen ausführbaren Beispielen inklusive der 4 Fotos von Matt Reinbold.

Links

Sven Drieling

**** 38911 BASIC BYTES FREE ****

READY.
[]