Gallery thumbnail distortion

[Inxie]

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

		<link type="text/css" href="../css/bottom.css" rel="stylesheet" />
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.js"></script>
                <script type="text/javascript" src="includes/templates/barebones/jscript/jscript_jcarousel.min.js"></script>
		<script type="text/javascript" src="includes/templates/barebones/jscript/jscript_pikachoose.js"></script>

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

Code:

<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?

NOTE: The gallery originally used HTML img src tags to locate and display images, this method correctly resized the thumbnails accordingly. The gallery now sources images from zen carts additional images array for efficiency. Although this works well it seems as though the thumbnails arent being scaled down.

[Inxie]

Page source shows this:

<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>

The javascript is properly using the additional images array but also creating a width and height for it, I don't know where these figures have come from but I believe the width="545" may be causing the thumbnails to distort.

Problem is, I don't know where to remove the width as the code is compiled on page load (I think).

[kobra]

Best asked in an area for the gallery as this is not a ZenCart General issue

[Inxie]

Which section should it be in?

[gjh42]

Where did you get the gallery from? If it is a Zen Cart plugin, there should be a support thread for it. If not, google for information on the particular script.

[Inxie]

Where did you get the gallery from? If it is a Zen Cart plugin, there should be a support thread for it. If not, google for information on the particular script.

I got the gallery from http://www.pikachoose.com/

As you know, it originally comes with HTML image source tags and worked fine out of the box. Since changing the gallery code to use Zen Carts additional image array, the width value of the thumbnails are too high.

Seeing as I have changed the script it is not something I can 'google'.

I really just need to know what is defining the width of the thumbnails as I simply cannot see where this is being handled.

[gjh42]

From the Pikachoose website:

Using your own thumbnails
PikaChoose will create thumbnails for you, but if you want to use your own it’s easy. You set the src for your images to your thumbnail image. Then you’ll add a ref attribute (not rel!) with the full size image like the example below. PikaChoose will pull in the full size image automatically.

<img src="thumbnail.jpg" ref="fullsize.jpg" >

Not sure how that would be used, but it might give a clue to someone.

[Inxie]

From the Pikachoose website:Not sure how that would be used, but it might give a clue to someone.

The thing is, the larger image isn't the issue. Maybe doing it that way would resolve the thumbnail distortion.

The src code says the width of the image is 545, now if I can find where that is being defined im certain I can fix it