Triggering jQuery event when 3 specific elements are visible

Question

Here's to hoping this makes sense.

I'm testing a new version of my personal site at http://joshuacody.net/jc3/

I'm looking to display my works in a bit of an interactive style, using jQuery.

You can see that each image is mis-matched, but it has a rotator. And you can rotate each image to line all three up. When all three are lined up, I would like to fadeIn a div explaining what that project is.

I'm using the plugin to rotate through my images (http://www.malsup.com/jquery/cycle/), if that's any help.

I'm pretty new to jQuery, and I'm just a hair stuck on how to do this theoretically. Any ideas?

Answer 1

I went to your site before reading your question and as much as I enjoy playing with the spin feature to line up images, as an interface to actually go somewhere it's non-obvious without reading your explanation.

You'll need to use events or callbacks as described in the demo. The after: parameter is all you really need. I would first fill in your alt attributes with descriptions that are identical for all the slot images that match. Then the after function would look something like:

$('#slot_1').cycle({
 fx: 'scrollVert',
 next: '.scroll_up_1',
 prev: '.scroll_down_1',
 after: onAfter,
 timeout: 0
}); // Duplicate the after param on all 3 slots.
function onAfter(){
 var alt =  $('#slot_1 img:visible').attr('alt');
 if (alt == $('#slot_2 img:visible').attr('alt') &&
     alt == $('#slot_3 img:visible').attr('alt') ) {
  switch (alt) {
  case 'Critical Reason?':
   $('#linkToWork1').click(); //a hidden link?
  break;
  case 'CFCC Labs':
   document.location = 'http://url/to/work/2';
  break;
  case 'Tailgate':
   $('#formActionWork3').submit();
  break;
  default:
  //oops.
  }
 }
}

Note that I put in three ways to actually change the page, you'll probably want to pick your favorite.