Me encantaría tener un sitio web de galería con múltiples miniaturas, incluidas 3 imágenes que rotan tan pronto como paso el mouse sobre cada una.

Encontré este increíble violín receptivo en otro hilo de @matthias_h revisando múltiples imágenes en miniatura mientras movía el mouse sobre el cuadro de miniaturas.

Su violín: http://jsfiddle.net/matthias_h/2f2tth47/

el 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>

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

Desafortunadamente, hay dos problemas con esto.

1. Al duplicarlo, pasar sobre cualquiera de ellos también cambia las imágenes sobre las otras.
2. Toma imágenes individuales en lugar de posiciones bg a través de css, lo que es menos eficiente ya que personalmente uso sprites de imagen para todo mi trabajo.

Tengo buena experiencia con html/css pero no tengo experiencia con javascript. Me encantaría tener una idea de cómo puedo solucionar estos dos problemas. Principalmente el primero en hacer que una galería con múltiples imágenes funcione en primer lugar.

¡Gracias por adelantado!