Simple Image Panner and Zoomer v1.2 not stretching image horizontally

[grosniko]

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

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

3) Describe problem: I am trying to use the script in Wordpress. Everything almost works, the only problem is that when the image gets "zoomed", the image stretches only vertically and not horizontally.

Here is the link to the problem. http://www.knockoutmag.org/en/yasuni-infographic/

I haven't changed the js file at all (except the URLs to the magnifying glass icons).

Since in wordpress you can't change the CSS directly within a post (all style elements get ignored and deleted), you have to go through the css files on the server. I put the first part of the code in the single.php file, which is responsible for the stuff that goes on in single posts.

This is what I have in this file right now (related to this script):


<style>
.pancontainer{
position:relative; /*keep this intact*/
overflow:hidden;
height: 501px;
width: 700px;
}

.pancontainer .zoomcontrols{ /* default CSS class for magnify controls within container */
position:absolute;
width: 30px;
height: 30px;
background: #eee;
border: 1px solid gray;
}

#infographic{
width: 4961px;
height: 3508px;
}

</style>


This is the HTML I have in the post


<div class="pancontainer" data-orient="center" data-canzoom="yes">
<img id="infographic" src="http://www.knockoutmag.org/infographics/Yasuni_Infographic_Eng.jpg" alt="" />
</div>



Right now the image looks totally screwed up (for some reason it is trying to fit the 4961px of the image into the 700px). If I delete the #infographic{} tag in the single.php file I can get it to display normally when the page loads. However, after I press zoom in, it only stretches the image vertically.

I've spent about 5 hours trying to get this to work! I have only very basic JS skills. What is going wrong?

Thanks in advance,
GN

[BorderTerroir]

I've never used WordPress, why can't you put the size attributes in the markup?

Apologies if this is a dim question.

[grosniko]

I've never used WordPress, why can't you put the size attributes in the markup?

Apologies if this is a dim question.

Well I may be wrong but wordpress uses PHP to create its HTML. So you could change the PHP but its just a bunch of rules, and I wouldn't be able to do that. Plus I don't think that is relevant.

[ddadmin]

There seems to be other IMG styles inside your other stylesheets interfering with the zoomer image. You can try adding the line in red below to your CSS to correct the initial distortion in the image's dimensions:

<style>
.pancontainer{
position:relative; /*keep this intact*/
overflow:hidden;
height: 501px;
width: 700px;
}

.pancontainer .zoomcontrols{ /* default CSS class for magnify controls within container */
position:absolute;
width: 30px;
height: 30px;
background: #eee;
border: 1px solid gray;
}

#infographic{
width: 4961px;
height: 3508px;
max-width: 4961px;
}

</style>

This doesn't fix the distortion when the image is zoomed in still, for some reason, though the large native size of your image probably means you don't really need the zoom capability anyway, so simply remove the default magnify buttons to disable that function.

[grosniko]

Hey DD Admin thanks for your tip. I tried it but I decided that the image is too big to pan anyways in such a small div. So I just linked a smaller version of the image to its own page where it is more comfortable to look at. In any case, it is true that there are probably other styles interfering with your code, and I have installed quite a lot of plugins which makes figuring out exactly what's in the way more complicated. So this simple solution is better in my case.

Anyways, many thanks for the support!