Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Jul 2011
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Gallery thumbnail distortion

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

    Code:
    <script language="javascript">
    $(document).ready(
    function (){
    $("#pikame").PikaChoose({carousel:true,carouselOptions:{wrap:'circular'}});
    });
    </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?

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,391
    Thanks
    11
    Thanked 568 Times in 561 Posts
    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.

  • #3
    New Coder
    Join Date
    Jul 2011
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    But where is this fixed width being defined?

  • #4
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,391
    Thanks
    11
    Thanked 568 Times in 561 Posts
    Here
    Code:
    <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>

  • #5
    New Coder
    Join Date
    Jul 2011
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #6
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,391
    Thanks
    11
    Thanked 568 Times in 561 Posts
    Sorry I can't tell you that. What is your HTML for the images then?

  • #7
    New Coder
    Join Date
    Jul 2011
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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...
    Code:
      for($img=0; $img<sizeof($images_array); $img++) { 
        echo '<li>' . zen_image('images/' . $images_array[$img]) . '</li>';

  • #8
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,391
    Thanks
    11
    Thanked 568 Times in 561 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •