Imagepanner, image distorted after zooming in

[rzrz]

1) Script Title: imagepanner.js

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...imagepanner.js

3) Describe problem:

after zooming in the image stretched vertically instead of zooming? Here is the code used:

<div class="pancontainer" data-orient="center" data-canzoom="yes" style="width: 900px; height: 530px;"><img src="images/stories/mp/TM4000.jpg" style="width: 900px; height: 530px;" /></div>

[Beverleyh]

1) Script Title: Simple Image Panner and Zoomer v1.2

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...magepanner.htm

I think this is a key factor - from the demo page;

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.

And from the instructions;

Wrap the image inside a DIV element with CSS class "pancontainer". Give this DIV an explicit CSS width and height that dictates the dimensions of the viewable area of the image (ie: 400px by 300px).

Give the image itself an explicit CSS width and height that reflects the true dimensions of the image (ie: 700px by 525px).

So, outer container SMALLER, inner image BIGGER. Yours are both the same size.

Try correcting your markup and if you need more help, please provide a link to your page.

[rzrz]

tried that but its still the same, here is the link

[Beverleyh]

The image size you have specified in your markup is 2000 x 1000, but the actual image dimensions are 4033 × 2353. Try using the actual image dimensions to see if works properly that way.

Please also optimise your image. ~3MB is way too big.

[rzrz]

amended using the code below but still can't make it work.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="templates/purity_iii/js/imagepanner.js">
</script>

<div class="pancontainer" style="width: 720px; height: 420px;" data-orient="center" data-canzoom="yes"><img src="images/stories/mp/pre.jpg" alt="" width="4033px" height="2353px" /></div

[Beverleyh]

Does it work OK in a standalone page? - it's often easier to troubleshoot when you get the demo working alone first, and then build up your page around it until you find a possible conflict.

Also check that you're following the advice of the demo page - putting the scripts in the head section and markup in the body section of your web page, to see if that makes a difference.

You could also try putting the demo 'as-is' in your page - does that work as expected without any of your own modifications or image?

[jscheuer1]

Right Beverley. Often with this and similar scripts there are one or more conflicting styles on the page, often as relates to images. Like if all images are display block (a popular global in some layouts to remove the inline space created below an image in many situations), or all images have some style that forces one or the other dimension to always be auto and/or, another to be a percentage or em length (as are often done for adaptive/responsive layouts), these often wreck the effect with image zoom type scripts. If that is the problem, the conflicting style can be removed, or simply overridden for the zoomable/pannable image(s). Also, as mentioned earlier - we really need to see the page to know for sure.

If you want more help - please post a link to the page on your site that demonstrates the problem.