Jump to content
alix32

2nd Product Image replaces main image

Recommended Posts

Hi - I' just upgraded from 2.2 to 2.3.4.1 (yes I will get to the BS version eventually, I'm years behind but want to release this version into production asap before I tackle bootstrap).

Anyway...I have an interesting issue with my product images on the product_info page. I'm not using the original code as I want my sub-images to display smaller beneath the main image so I found this one (slightly tweaked):

<?php
    if (tep_not_null($product_info['products_image'])) {
      $pi_query = tep_db_query("select image, htmlcontent from " . TABLE_PRODUCTS_IMAGES . " where products_id = '" . (int)$product_info['products_id'] . "' order by sort_order");

      if (tep_db_num_rows($pi_query) > 0) {
?>
    <div id="piGal" style="float: left;">
      <nav>
	  <ul>
<?php
        $pi_counter = 0;
        while ($pi = tep_db_fetch_array($pi_query)) {
          $pi_counter++;

       $pi_entry = '<li ' . ($pi_counter != 1 ? 'style="float:left;" class="imgthumbHover"' : '') . '><a href="';   
        
        $pi_entry .= tep_href_link(DIR_WS_IMAGES . $pi['image'], '', 'NONSSL', false);

  if ($pi_counter == 1) {$piwidth = '450'; $piheight = ''; } else { $piwidth = '102'; $piheight = '200'; }
 $pi_entry .= '"rel="zoombox">' . tep_image(DIR_WS_IMAGES . $pi['image'], $products_name, $piwidth, null) . '</a>';      
        
          $pi_entry .= '</li>';

          echo $pi_entry;
        }
?>

      </ul>
	  </nav>
    </div>
<?php
      } else {
?>

    <div id="piGal" style="float: left;">
      <?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image'], '', 'NONSSL', false) . '"rel="zoombox">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], addslashes($product_info['products_name']), 450, 450, 'hspace="5" vspace="5"') . '</a>'; ?>
    </div>

<?php
      }
	  }
?>

I upload my first image it displays OK (it's loaded in the products table - products_image field).

But when I upload a 2nd image, it replaces the 1st image. That 2nd image is correctly loaded in the products_images table with sort #1.

And then when I upload a 3rd image (sort #2 in the products_images table as expected), that 3rd image appears as the 1st thumbnail...and my 1st image is still not displaying.

Understand that my expectation with 3 images is to have the main image from the products table display with 2 thumbnail images beneath (sort 1 then sort 2). The problem looks to be around the pi_counter but really can't get my head round it.

Any help would be really appreciated!

Thanks

Share this post


Link to post
Share on other sites

You should go directly to bootstrap. Otherwise you'll double the work to do.

If you have more than one product image, you have to repeat the main product image as the first large image.

 

Share this post


Link to post
Share on other sites

Thanks Raiwa for the tip on the workaround! And yes I should go to Bootstrap

Share this post


Link to post
Share on other sites
6 hours ago, alix32 said:

 I'm not using the original code as I want my sub-images to display smaller beneath the main image so I found this one (slightly tweaked):

Here is the demo of last official osC:

https://demo.oscommerce.com/product_info.php?products_id=28

You already have a small image gallery. The bootstrap code is the same as the last official osC in this respect.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×