...

View Full Version : Gallery thumbnail distortion



Inxie
09-28-2012, 03:00 AM
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?main_page=product_info&cPath=6_1&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
09-28-2012, 08:14 AM
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
09-28-2012, 08:39 AM
But where is this fixed width being defined?

devnull69
09-28-2012, 08:42 AM
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
09-28-2012, 09:14 AM
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
09-28-2012, 09:32 AM
Sorry I can't tell you that. What is your HTML for the images then?

Inxie
09-28-2012, 10:07 AM
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
09-28-2012, 10:12 AM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum