thumbnail alignment

[freckles]

Greetings,

I am new to PHP, please have patience. I am using OsCommerce, and have a bunch of addon's installed.Overall, everything is working good. The addon I'm having trouble with is J Query Lightbox with Ultra Pics. Its installed and working fine. Adding one image, no problem. Adding two? Fine. Adding a third or more? All hell breaks loose. The first two images stack vertically just how they should, and how I would like, but when I add a third image or more, it comes up next to the second, not below it.

 

Any idea's how to get the images to list vertically?

 

here is the link to the problem...http://www.nicholasbivins.com/store/product_info.php?cPath=21&products_id=32

 

and here is the code for additional_images.php that I think needs to be edited. somehow

 

<!-- // BOF MaxiDVD: Modified For Ultimate Images Pack! //-->
    <tr>
      <td>
       <table width="100%">

       <tr>
<?php
    if (($product_info['products_image_sm_1'] != '') && ($product_info['products_image_xl_1'] == '')) {
?>
     <td align="center" class="smallText">
           <?php echo tep_image(DIR_WS_IMAGES . $product_info['products_image_sm_1'], $product_info['products_name'], ULT_THUMB_IMAGE_WIDTH, ULT_THUMB_IMAGE_HEIGHT, 'hspace="1" vspace="1"'); ?>
      </td>
<?php
    } elseif
       (($product_info['products_image_sm_1'] != '') && ($product_info['products_image_xl_1'] != '')) {
?>
                
     <td align="center" class="smallText">
           <?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image_xl_1']) . '" rel="prettyOverlay[gallery]">' . tep_image(DIR_WS_IMAGES . $product_info['products_image_sm_1'], $product_info['products_name'], ULT_THUMB_IMAGE_WIDTH, ULT_THUMB_IMAGE_HEIGHT, 'hspace="1" vspace="1"') . '<br>' . tep_image_button('image_enlarge.gif', TEXT_CLICK_TO_ENLARGE) . '</a>'; ?>
      </td>
<?php
    } elseif
      (($products_info['products_image_sm_1'] == '') && ($product_info['products_image_xl_1'] != '')) {
?>
     <td align="center" class="smallText">
           <?php echo tep_image(DIR_WS_IMAGES . $product_info['products_image_xl_1'], $product_info['products_name'], LARGE_IMAGE_WIDTH, LARGE_IMAGE_HEIGHT, 'hspace="1" vspace="1"'); ?>
      </td>
<?php
    } else {echo '<td></td>';}
?>

<?php
    if (($product_info['products_image_sm_2'] != '') && ($product_info['products_image_xl_2'] == '')) {
?>
     <td align="center" class="smallText">
            <?php echo tep_image(DIR_WS_IMAGES . $product_info['products_image_sm_2'], $product_info['products_name'], ULT_THUMB_IMAGE_WIDTH, ULT_THUMB_IMAGE_HEIGHT, 'hspace="1" vspace="1"'); ?>
      </td>
<?php
    } elseif
       (($product_info['products_image_sm_2'] != '') && ($product_info['products_image_xl_2'] != '')) {
?>
        <td align="center" class="smallText">

           <?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image_xl_2']) . '" rel="prettyOverlay[gallery]">' . tep_image(DIR_WS_IMAGES . $product_info['products_image_sm_2'], $product_info['products_name'], ULT_THUMB_IMAGE_WIDTH, ULT_THUMB_IMAGE_HEIGHT, 'hspace="1" vspace="1"') . '<br>' . tep_image_button('image_enlarge.gif', TEXT_CLICK_TO_ENLARGE) . '</a>'; ?>
      </td>
<?php
    } elseif
      (($products_info['products_image_sm_2'] == '') && ($product_info['products_image_xl_2'] != '')) {
?>
     <td align="center" class="smallText">
           <?php echo tep_image(DIR_WS_IMAGES . $product_info['products_image_xl_2'], $product_info['products_name'], LARGE_IMAGE_WIDTH, LARGE_IMAGE_HEIGHT, 'hspace="1" vspace="1"'); ?>
      </td>
<?php
    } else {echo '<td></td>';}
?>

<?php
    if (($product_info['products_image_sm_3'] != '') && ($product_info['products_image_xl_3'] == '')) {
?>
     <td align="center" class="smallText">
           <?php echo tep_image(DIR_WS_IMAGES . $product_info['products_image_sm_3'], $product_info['products_name'], ULT_THUMB_IMAGE_WIDTH, ULT_THUMB_IMAGE_HEIGHT, 'hspace="1" vspace="1"'); ?>
      </td>
<?php
    } elseif
       (($product_info['products_image_sm_3'] != '') && ($product_info['products_image_xl_3'] != '')) {
?>
     <td align="center" class="smallText">
           <?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image_xl_3']) . '" rel="prettyOverlay[gallery]">' . tep_image(DIR_WS_IMAGES . $product_info['products_image_sm_3'], $product_info['products_name'], ULT_THUMB_IMAGE_WIDTH, ULT_THUMB_IMAGE_HEIGHT, 'hspace="1" vspace="1"') . '<br>' . tep_image_button('image_enlarge.gif', TEXT_CLICK_TO_ENLARGE) . '</a>'; ?>
      </td>
<?php
    } elseif
      (($products_info['products_image_sm_3'] == '') && ($product_info['products_image_xl_3'] != '')) {
?>
     <td align="center" class="smallText">
           <?php echo tep_image(DIR_WS_IMAGES . $product_info['products_image_xl_3'], $product_info['products_name'], LARGE_IMAGE_WIDTH, LARGE_IMAGE_HEIGHT, 'hspace="1" vspace="1"'); ?>
      </td>
<?php
    } else {echo '<td></td>';}
?>
       </tr>
       <tr>
<?php
    if (($product_info['products_image_sm_4'] != '') && ($product_info['products_image_xl_4'] == '')) {
?>
     <td align="center" class="smallText">
           <?php echo tep_image(DIR_WS_IMAGES . $product_info['products_image_sm_4'], $product_info['products_name'], ULT_THUMB_IMAGE_WIDTH, ULT_THUMB_IMAGE_HEIGHT, 'hspace="1" vspace="1"'); ?>
      </td>
<?php
    } elseif
       (($product_info['products_image_sm_4'] != '') && ($product_info['products_image_xl_4'] != '')) {
?>
     <td align="center" class="smallText">
           <?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image_xl_4']) . '" rel="prettyOverlay[gallery]">' . tep_image(DIR_WS_IMAGES . $product_info['products_image_sm_4'], $product_info['products_name'], ULT_THUMB_IMAGE_WIDTH, ULT_THUMB_IMAGE_HEIGHT, 'hspace="1" vspace="1"') . '<br>' . tep_image_button('image_enlarge.gif', TEXT_CLICK_TO_ENLARGE) . '</a>'; ?>
      </td>
<?php
    } elseif
      (($products_info['products_image_sm_4'] == '') && ($product_info['products_image_xl_4'] != '')) {
?>
     <td align="center" class="smallText">
           <?php echo tep_image(DIR_WS_IMAGES . $product_info['products_image_xl_4'], $product_info['products_name'], LARGE_IMAGE_WIDTH, LARGE_IMAGE_HEIGHT, 'hspace="1" vspace="1"'); ?>
      </td>
<?php
    } else {echo '<td></td>';}
?>

<?php
    if (($product_info['products_image_sm_5'] != '') && ($product_info['products_image_xl_5'] == '')) {
?>
     <td align="center" class="smallText">
           <?php echo tep_image(DIR_WS_IMAGES . $product_info['products_image_sm_5'], $product_info['products_name'], ULT_THUMB_IMAGE_WIDTH, ULT_THUMB_IMAGE_HEIGHT, 'hspace="1" vspace="1"'); ?>
      </td>
<?php
    } elseif
       (($product_info['products_image_sm_5'] != '') && ($product_info['products_image_xl_5'] != '')) {
?>
     <td align="center" class="smallText">
           <?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image_xl_5']) . '" target="_blank" rel="prettyOverlay[gallery]">' . tep_image(DIR_WS_IMAGES . $product_info['products_image_sm_5'], $product_info['products_name'], ULT_THUMB_IMAGE_WIDTH, ULT_THUMB_IMAGE_HEIGHT, 'hspace="1" vspace="1"') . '<br>' . tep_image_button('image_enlarge.gif', TEXT_CLICK_TO_ENLARGE) . '</a>'; ?>
      </td>
<?php
    } elseif
      (($products_info['products_image_sm_5'] == '') && ($product_info['products_image_xl_5'] != '')) {
?>
     <td align="center" class="smallText">
           <?php echo tep_image(DIR_WS_IMAGES . $product_info['products_image_xl_5'], $product_info['products_name'], LARGE_IMAGE_WIDTH, LARGE_IMAGE_HEIGHT, 'hspace="1" vspace="1"'); ?>
      </td>
<?php
    } else {echo '<td></td>';}
?>

<?php
    if (($product_info['products_image_sm_6'] != '') && ($product_info['products_image_xl_6'] == '')) {
?>
     <td align="center" class="smallText">
           <?php echo tep_image(DIR_WS_IMAGES . $product_info['products_image_sm_6'], $product_info['products_name'], ULT_THUMB_IMAGE_WIDTH, ULT_THUMB_IMAGE_HEIGHT, 'hspace="1" vspace="1"'); ?>
      </td>
<?php
    } elseif
       (($product_info['products_image_sm_6'] != '') && ($product_info['products_image_xl_6'] != '')) {
?>
     <td align="center" class="smallText">
           <?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image_xl_6']) . '" target="_blank" rel="prettyOverlay[gallery]">' . tep_image(DIR_WS_IMAGES . $product_info['products_image_sm_6'], $product_info['products_name'], ULT_THUMB_IMAGE_WIDTH, ULT_THUMB_IMAGE_HEIGHT, 'hspace="1" vspace="1"') . '<br>' . tep_image_button('image_enlarge.gif', TEXT_CLICK_TO_ENLARGE) . '</a>'; ?>
      </td>
<?php
    } elseif
      (($products_info['products_image_sm_6'] == '') && ($product_info['products_image_xl_6'] != '')) {
?>
     <td align="center" class="smallText">
           <?php echo tep_image(DIR_WS_IMAGES . $product_info['products_image_xl_6'], $product_info['products_name'], LARGE_IMAGE_WIDTH, LARGE_IMAGE_HEIGHT, 'hspace="1" vspace="1"'); ?>
      </td>
<?php
    } else {echo '<td></td>';}
?>
       </tr>
       </table>
      </td>
    </tr>
<!-- // BOF MaxiDVD: Modified For Ultimate Images Pack! //-->

 

i've posted on the OsCommerce boards, and PM'ed the authors, but no help. I'm really stuck, and would very much appreciate any help.

 

I've tried inserting <br> tags, </p> tags, using the table width, etc, but nothing seems to work. 

 

I've attached both the product_info.php file and the additional_images.php file.

 

Thank you!

 

Nick

 

[attachment deleted by admin]

[jsschmitt]

Can you take that page down to 3 images?

[freckles]

Hi, thank you for helping me.

 

I took the example down to 3 images, and added another cup that only has two images. you'll need to navigate to 'cups' then select the second one. When there are only 2 images, everything looks great. 3 or more, all wrong.

[freckles]

well after much fussing with additional_images.php, i ended up inserting this...

 

     <td align="right" class="smallText">
           <td><?php echo tep_draw_separator('pixel_trans.gif', '100%', '20'); ?></td>
          <td><?php echo tep_draw_separator('pixel_trans.gif', '100%', '20'); ?></td>
           <br><br>

 

 

 

and that got things aligned vertically. its not perfect, but its gonna have to do for now.

 

i could still really use someone's opinion who knows PHP better than I do (which is pretty much everyone).

[jamiet757]

The problem is that the 7" x 4" x 3" is being displayed in a table cell right next to the first image, that is pushing the image sideways. Try putting the 7" x 4" x 3" in a different table row, it will display above the image, but you can align it to the left and it will look better I think.

[teamatomic]

Looking at the code it makes a 2x3 table. So three should stack. Anyways, look through and remove the /tr tr  after _3.

 

 

HTH

Teamatomic