1

I've a basic mouseover swap script to change image previews on ecommerce site with mouse position from left to right.

I would like to this script work on mobile browsers too but i couldn't get it work. I guess i need some external library which support touch events. I don't want to use jquery-mobile though.

Anyone could help me to solve this problem?

Thank you

Here is my current script

$(".productImage").mousemove(function (event) {
    var xPos = event.pageX,
        imgPos = $(this).offset().left,
        imgWidth = $(this).width();
    //console.log("xPos: ", xPos, ", imgPos: ", imgPos, ", imgWidth: ", imgWidth);
    var change1 = imgPos,
        change2 = imgPos + 1 * imgWidth / 3;
    change3 = imgPos + 2 * imgWidth / 3;
    //console.log("change1: ", change1, "change2: ", change2, "change3: ", change3, "change4: ", change4);
    $images = $(this).closest("figure").data("photolist");

    var array = $images.split(',');
    if (xPos > change1) {
        $(this).attr("src", array[0]);
        $(".photoNav > div").removeClass("active");
        $(".ps1").addClass("active");
    }
    if (xPos > change2) {
        $(this).attr("src", array[1]);
        $(".photoNav > div").removeClass("active");
        $(".ps2").addClass("active");
    }
    if (xPos > change3) {
        $(this).attr("src", array[2]);
        $(".photoNav > div").removeClass("active");
        $(".ps3").addClass("active");
    }
});
$(".productImage").mouseout(function () {
    $(this).attr("src", $(this).data("main-image"));
    $(".photoNav > div").removeClass("active");
    $(".ps1").addClass("active");
});
Meg Ann
  • 183
  • 9
  • I would suggest `touchstart` event for touch devices, *Touch has touchstart, touchmove, touchend and touchcancel. Webkit on the iPhone/iPad/etc has additional gesture start/move/end events that are Apple-specific.* ref: http://stackoverflow.com/questions/4550427/prefered-alternative-to-onmouseover-for-touch – dreamweiver Sep 13 '15 at 16:05

0 Answers0