Grow your CSS skills. Land your dream job.

Anything Zoomer: targeting coordinates?

  • # November 13, 2012 at 3:28 am

    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.

    # November 13, 2012 at 8:50 pm

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

    Look at the [documentation](http://css-tricks.github.com/AnythingZoomer/use.html) under All Parameters.

    # November 14, 2012 at 5:35 pm

    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.

    # November 14, 2012 at 7:35 pm

    Hi gin66!

    You’ll need to include the code that reads the rel attribute. [See it here](https://github.com/CSS-Tricks/AnythingZoomer/blob/master/image.html#L26-37)

    $(‘.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;
    });

    # November 15, 2012 at 3:44 am

    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

    # November 15, 2012 at 5:54 pm

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

    # November 15, 2012 at 8:10 pm

    Hi Mottie,
    Now it is working. Thank you … I guess I’ll have to post again in this forum !! :)

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".