Results 1 to 2 of 2

Thread: jQuery Image Magnify: change position of enlarged image

  1. #1
    Join Date
    Aug 2011
    Location
    Saba, Dutch Caribbean
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default jQuery Image Magnify: change position of enlarged image

    1) Script Title: :: jQuery Image Magnify v1.11

    2) Script URL (on DD): http://dynamicdrive.com/dynamicindex4/imagemagnify.htm

    3) Describe problem:
    In one instance of jQuery Image Magnify, it works perfectly for me. In another instance, it doesn't, but I think it would if I could change the final position of the enlarged image. I'd like to have the enlarged image position have the same top and left coordinates as the original (smaller) image, and animate down and to the right, rather than in the center of the page (Or possibly the opposite, have the enlarged image keep same top and right coordinates and animate down and left). Any suggestions on how this might be accomplished? Thanks in advance.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Use this updated version of the script:

    Attachment 3998

    To use it add a data-orig attribute to the image, example:

    Code:
    <img class="magnify" data-orig="left" src="http://i26.tinypic.com/11l7ls0.jpg" width=125 height=90 alt="">
    will expand from and be anchored to the top-left of the original image, while:

    Code:
    <img class="magnify" data-orig="right" src="http://i26.tinypic.com/11l7ls0.jpg" width=125 height=90 alt="">
    will expand from and be anchored to the top-right of the original image. If you skip the attribute or set it to anything else the script will magnify in the usual manner (from the top left of the image to the center of the window).

    Demo:

    http://home.comcast.net/~jscheuer1/s...y/orig_pos.htm

    Note: The data hyphen (data-orig in this case) attribute will work in any valid DOCTYPE. But it's only w3c valid in HTML 5.
    Last edited by jscheuer1; 08-02-2011 at 05:56 AM. Reason: add demo
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •