• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 780
  • Last Modified:

pan and scan image using Jquery

Let’s say we have a 1000x1000px  image and we want to display 400x400px of that image in a web browser. I want the user to be able to use their mouse cursor to “scan around” the image and view different pieces of it.   Write a script using jQuery that will allow the user to do that.
1 Solution
Use the jQuery UI plugin called Draggable:


Create a container that is the veiwport size that you want. Put the full-sized image inside that container and set the container to have overflow: hidden. Then, using jQuery, select the image and add $.draggable().
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now