Results 1 to 3 of 3

Thread: Image Magnification in div

  1. #1
    Sencha Premium Member
    Join Date
    Apr 2013
    Posts
    8

    Default Image Magnification in div

    Hi There,

    Wanted to do image magnification on mouse over and show enlarged image in a div next to it. Many commerical products available to do this. Was wondering if someone has written a plugin to do so. Or code they can share?

    Pusedo logic is having a fixed size image and tracking the mouse movement over that image.
    Depending on the co-ordinates of the mouse cursor inside that image, show a larger version
    of the image to the right-hand side inside a scrollable panel.

    maybe use div.scrollTo() and pass in the X and Y coordinates to scroll to,
    based on a calculation defined, giving the impression of a zoomed image.

    Regards
    Sachin

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379
    Answers
    3997

    Default

    I haven't seen it done personally but what I would do is to create a child <div> node that has the image as the background and have opacity set to 0.5 or whatever looks good. Then on mouseover I would move the <div> around based on a calculation.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  3. #3
    Sencha Premium Member
    Join Date
    Apr 2013
    Posts
    8

    Default

    I am mainly server side developer and not well versed with html. can you give an example to having an image and on mouseOver event show another div?

Posting Permissions

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