treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Anything Zoomer: targeting coordinates?

  • Hello, I'm trying to set up Anything Zoomer for my website and , while the zoom itself works 'out of the box', I cannot target coordinates as in the demo. I must be missing something but my knowledge of jQuery is really basic and I can't figure out what. Anybody? Thanks.

  • The target coordinates are added when the edit option is set to true.

    Look at the documentation under All Parameters.

  • Hello, I got that; the problem is that when I create a target rel attr in the 'president' div it doesn't do anything. Thanks anyway.

  • Hi gin66!

    You'll need to include the code that reads the rel attribute. See it here

    $('.president')
    .bind('click', function(){
      return false;
    })
    .bind('mouseover click', function(){
      var loc = $(this).attr('rel');
      if (loc && loc.indexOf(',') > 0) {
        loc = loc.split(',');
        $('.zoom').anythingZoomer( loc[0], loc[1] );
      }
      return false;
    });
    
  • Hi Mottie, Thanks for your time. I tried your latest suggestion, to no avail. Clicking or hovering do not position the zoom window on the coordinates. Should you want to take a look at the code, since I couldn't post it in this forum(for unknown reasons), I uploaded it here : http://www.cerdagne.net/anythingZoomer.txt

  • Hi gin66!

    It looks like you need to set the width and height of the small and large images using #zoom, and because the above code is targetting $('.zoom') and the code you have sets up a window with an ID of "zoom" you'll need to change that code to $('#zoom'). Try this code:

      $(function(){
        $("#zoom").anythingZoomer();
        $('.president')
        .bind('click', function(){
          return false;
        })
        .bind('mouseover click', function(){
          var loc = $(this).attr('rel');
          if (loc && loc.indexOf(',') > 0) {
            loc = loc.split(',');
            $('#zoom').anythingZoomer( loc[0], loc[1] );
          }
          return false;
        });
      });
    
  • Hi Mottie, Now it is working. Thank you ... I guess I'll have to post again in this forum !! :)