Thumbnail image swap on mousemove

Question

I would love to have a gallery website with multiple thumbnails including 3 images that rotate as soon as I mousemove over each one.

I've found this amazing responsive fiddle in another thread from @matthias_h going through multiple thumbnail images while mousemove over the thumbnail box.

His fiddle: http://jsfiddle.net/matthias_h/2f2tth47/

The HTML

<article>
<figure data-image-list="http://dummyimage.com/200x200/000000/cccccc.png&text=img1,http://dummyimage.com/200x200/dedede/cccccc.png&text=img2,http://dummyimage.com/200x200/b31031/cccccc.png&text=img3">
    <img class="imageHolder" data-src="http://dummyimage.com/200x200/cdcdcd/dddddd.png&text=+" src="http://dummyimage.com/200x200/cdcdcd/dddddd.png&text=+" />
</figure>

The Javascript

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

var array = $images.split(',');
if (xPos > change1) {
    $("img").attr("src", array[0]);
}
if (xPos > change2) {
    $("img").attr("src", array[1]);
}
if (xPos > change3) {
    $("img").attr("src", array[2]);

}});$("img").mouseout(function (){$("img").attr("src", $("img").data("src"));});

Unfortunately there are two issues with this.

1. When duplicating it, moving over any of them also switches the images on the other ones.
2. It takes single images instead of bg positions via css which is less efficient since I'm personally using image sprites for all my work.

I have good experience with html/css but no experience with javascript. Would love to get some insight how I can fix these two issues. Mainly the first one to make a gallery with multiple images work in the first place.

Thanks in advance!

Answer 1

Now that you duplicated the elements, it is targeting a collection instead of just one element.

In general, jQuery method's setter applies to all matching elements, and getter return a value for the first matching element.

Question #1:
Use
$(this) instead of $("img")
$(this) instead of $(".imageHolder")
$(this).parent("figure") instead of $("figure")

Question #2:
You will have to use .css() to change the background position instead of changing the href.
That would be something like $(this).css({background-position: newPosition}) where newPosition has to be defined...

CodePen