Question

I’ve tried to build this myself and just simply cannot get it to work.

What I would like to achieve is a row of images, if clicked they simply move the background position of a div.

I’m not sure why I can’t get something this simple working. Here’s the HTML

<div class="target"></div>
<a href="#"><img src="01_thumb.jpg" class="thumb"></a><a href="#"><img src="02_thumb.jpg" class="thumb"></a><a href="#"><img src="03_thumb.jpg" class="thumb"></a>

And the CSS:

#content .item .target {width:240px; height:385px; margin: 0 0 8px; background-image:url(targetimage.jpg);} #content .item .thumb {width:64px; height: 64px; margin: 0 8px; background-color: #FF609C;}

Answer 1

You get the .index() if the clicked anchor (adjust if they’re not the only elements in their parent)and multiply that value to change .target‘s background-position, like this:

$("a:has(img.thumb)").click(function(e) {
  $(".target").css("background-position", -$(this).index()*240 + "px 0px");
  e.preventDefault(); //prevent navigating to the # href
});

Here’s an example you can check out, if there are many .item elements, use $(this).closest(".item").find(".target") instead of $(".target").