Professor Cloud. Dynamic Drive DHTML Scripts- Simple Image Panner and Zoomer. March 25th, 10': Updated with ability to zoom in/out of image Description: Simple Image Panner lets you partially clip and confine large images on your site to a smaller container to save space, with the hidden portion accessible by dragging -or panning- inside the image.
The optional zoom feature lets the user zoom in and out of the image at the same time. This script is great for embedding large images on your page that users may also want to zoom in on to get a closer look. Demos (Drag inside image to see more. First and 2nd image zoomable as well): Directions Step 1: Add the below code inside the <HEAD> section of the page: The above code references an .js external file plus two images which you should download below (right click, and select "Save As"): Step 2: Insert the below sample code into the BODY section of your page, which adds 1 pannable image: To make an image pannable, wrap the image inside a DIV with CSS class="pancontainer": You should:
Benlumley/jQuery-PanZoom - GitHub. jQuery PanZoom Example - by Ben Lumley. Interactive Map - jQuery over Flash. At the end of last year, we launched a website for Coastal & Marine Sciences in North Carolina with one of our Agency Partners, Liaison Design Group.
As a part of the project, the website was supposed to have an interactive map that showed some information and the location of the various Marine Science outposts across the state. The locations would be represented by dots and upon clicking one an info box would pop up and display information about the location. To make the map as engaging as possible, there needed to be smooth animations and crisp graphics. Traditionally such a project would require the use of Flash.
We try to avoid Flash whenever possible, so I began to consider how the project could be accomplished in jQuery.