Gallery thumbnail distortion

[Inxie]

I have a Jquery gallery on my product page, it uses the following code to work:

<script language="javascript">
$(document).ready(
function (){
$("#pikame").PikaChoose({carousel:true,carouselOptions:{wrap:'circular'}});
});
</script>

<div id="pikawrapper"><div class="pikachoose"> 
<?php 
if (sizeof($images_array) > 0) { 
?> 
<ul id="pikame" class="jcarousel-skin-pika"> 
<?php  
  for($img=0; $img<sizeof($images_array); $img++) { 
    echo '<li>' . zen_image('images/' . $images_array[$img]) . '</li>'; 
  } ?> 

</ul> 
<?php } ?> 
</div></div>

Here's a link to a product page with this implemented.
http://www.pazzle.co.uk/index.php?ma...&products_id=3

If you notice, the thumbnails of the images are distorted and I have no idea why. Any ideas on how to fix this?

[devnull69]

Your <img> elements seem to have fixed width and height attributes ... you should remove at least the width so that it can fit into the thumbnail area.

[Inxie]

But where is this fixed width being defined?

[devnull69]

Here

<div id="pikawrapper"><div class="pikachoose"> 
 
<ul id="pikame" class="jcarousel-skin-pika">

<li><img src="images/technojunkie_01.gif" alt="" width="545" height="539" /></li>
<li><img src="images/technojunkie_02.gif" alt="" width="545" height="539" /></li>
<li><img src="images/technojunkie_03.gif" alt="" width="545" height="539" /></li> 

</ul> 
 
</div>

[Inxie]

Im sorry for being a newbie but what file is that code in?

I have never seen that code, it must be compiled on page load because I have never set a width.

[devnull69]

Sorry I can't tell you that. What is your HTML for the images then?

[Inxie]

There is no HTML, it's all done through Javascript.

I am using Zen cart, it creates it's own image array and I have the gallery source images through that array.

see...

  for($img=0; $img<sizeof($images_array); $img++) { 
    echo '<li>' . zen_image('images/' . $images_array[$img]) . '</li>';

[devnull69]

Then you'll have to check if Zen creates the images with fixed width ...

You can easily find out if you disable every dynamic Javascript changes to the page and then check the page HTML in your browser.