drweb.de - Magazin für Seitenbetreiber

Fertiges Beispiel: jQuery-Plugin – Image Next Prev

nextPrevShow: "mousecursor"

Der Pfeil wird beim Mauszeiger angezeigt.

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"
});

Eublepharis macularius

nextPrevShow: "fixed"

Die Pfeile werden vertikal zentriert, 10 Punkte vom Rand entfernt angezeigt.

jQuery("#demo2").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 : "fixed"
});

Eublepharis macularius

nextPrevShow: "none"

Keine Anzeige der Pfeile. Vor- und zurückblättern geht weiterhin.

jQuery("#demo3").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 : "none"
});

Eublepharis macularius

Bildnachweis

Die Fotos Eublepharis macularius, Poledancer, Daipeem und Grumpy stammen von Matt Reinbold. Lizenz: CC-BY-SA 2.0.