Is it possible to jump to a specific image?

I've got two views of the same images on the same page - one is the rotator, the other is just a bunch of thumbnails.
I need to display a large version of the thumbnail in the rotator when you hover over the thumbnail.

Can I call something like $('#the_rotator').goTo(4) or something?

Comments

millenniumtree’s picture

millenniumtree
he/him
Location Holualoa, HI
commented
Assigned: Unassigned » millenniumtree
Status: Active » Fixed

I found a solution.
This little blurb, added to a .js file, does exactly what I need.

$(document).ready(function() {

  var imgnum = 0;
  $('.node-type-product-line .field-field-images img').each(function (i) {
    $(this).attr('id', 'pager-'+imgnum);
    $(this).bind("mouseover", function(e){
      id = $(this).attr('id').replace('pager-','');
      $('#views-rotator-product_line_images-block_1').cycle(parseInt(id));
    });
    imgnum++;
  });

});

'.node-type-product-line .field-field-images img' refers to the list of images I have set up next to the views_rotator (it's just another view of the images in the rotator)
'#views-rotator-product_line_images-block_1' is my views rotator block.

The key to the whole solution is the fact that you can call .cycle() again with an integer offset after the cycle setup. I had to parseInt() the offset number - it didn't like it when I passed the string.

I hope this helps someone else. We do a lot of mouse-over thumbnail expansion/zooming, and being able to do this with rotators is pretty nifty.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.