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