Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Pictures side by side


YePix

Recommended Posts

 

Can anybody help me further ?

I need the little extra pictures next to each other. as in the code, all are subordinate

<head>
<link rel="stylesheet" type="text/css" href="ext/colorbox/colorbox.css" />
<script type="text/javascript" src="ext/colorbox/jquery.colorbox-min.js"></script>
</head>
<?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'] . "' and image != '" . $product_info['products_image'] . "' order by sort_order");

      if (tep_db_num_rows($pi_query) > 0) {
?>

<div id="piGal"><ul>

<?php
        $pi_counter = 1;
//        $pi_image = '<a href="'.tep_href_link(DIR_WS_IMAGES . $product_info['products_image'], '', 'NONSSL', false) . '" target="_blank" rel="colorbox">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], '', PRODUCTS_IMAGE_WIDTH, PRODUCTS_IMAGE_HEIGHT) . '</a>'; // a?ado la imagen principal antes del while.
        $pi_image = '<a href="'.tep_href_link(DIR_WS_IMAGES . $product_info['products_image'], '', 'NONSSL', false) . '" target="_blank" rel="colorbox">' . tep_image(DIR_WS_IMAGES . $product_info['products_image']) . '</a>'; // a?ado la imagen principal antes del while.
        while ($pi = tep_db_fetch_array($pi_query)) {
          $pi_counter++;

          $pi_entry = '        <a href="';

          if (tep_not_null($pi['htmlcontent'])) {
            $pi_entry .= '#piGalimg_' . $pi_counter;
          } else {
            $pi_entry .= tep_href_link(DIR_WS_IMAGES . $pi['image'], '', 'NONSSL', false);
          }

          $pi_entry .= '" target="_blank" rel="colorbox">' . tep_image(DIR_WS_IMAGES . $pi['image'], '', PRODUCTS_EXTRA_IMAGE_WIDTH, PRODUCTS_EXTRA_IMAGE_HEIGHT) . '</a>';

          if (tep_not_null($pi['htmlcontent'])) {
            $pi_entry .= '<div style="display: none;"><div id="piGalimg_' . $pi_counter . '">' . $pi['htmlcontent'] . '</div></div>';
          }

          $pi_entry .= '';

          echo $pi_image . $pi_entry;
          $pi_image = ''; // eilimino la imagen principla del resto del while.
        }
?>

</ul></div>

<?php } else { ?>
<div id="piGal">

            <?php if (!empty($difference)){
            echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image'], '', 'NONSSL', false) . '" target="_blank" rel="colorbox">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], addslashes($product_info['products_name']), null, null, 'hspace="5" vspace="5"') . '</a>';
      
      } else {
            echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image'], '', 'NONSSL', false) . '" target="_blank" rel="colorbox">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], addslashes($product_info['products_name']), null, null, 'hspace="5" vspace="5"') . '</a>'; 
       }     
            ?>
  
    </div>

<?php
      }
?>

<script type="text/javascript">
$("#piGal a[rel^='colorbox']").colorbox({
  cyclic: true
});
</script>

<?php
    }
?>

 

Link to comment
Share on other sites

Try under admin=>Headertags=>Colorbox Script and set Thumbnail layout to 222 

This will give 2 images side by side for max 6 images

Getting the Phoenix off the ground

Link to comment
Share on other sites

I think the 222 setting will just give you thumbnails side by side or at least that is what it does in stock frozen. It is explained in the forum about settings for Headertags=>Colorbox Script

image.png.78b46f8d215604d9393997df91e4eff2.png

If however you want to just add the second image as a full image next to the first then your best adding a second image module that is assuming your using Frozen or Edge using modular product-info page.

That way you can edit the code in second module to show just the second image like this,

image.thumb.png.71e17db6307749e0db907d2ebe739d1b.png

I’m sure there is a more elegant way of doing this but the simple code edit does work. Oh you also need to reset the width of product discription to 4 to make room for seond image.

 

 

Link to comment
Share on other sites

I'm happy to say i'm wrong! 222 will work if you re set the layout in the product info page. But it will affect all products so any with more that 2 images will also be listed in 2x2 format.

 

Link to comment
Share on other sites

did you already notice that as soon as several pictures are inserted the main picture is not displayed any more?
<?php
    if (tep_not_null($product_info['products_image'])) {

      echo tep_image('images/' . $product_info['products_image'], NULL, NULL, NULL, 'itemprop="image" style="display:none;"');

      $photoset_layout = (int)MODULE_HEADER_TAGS_PRODUCT_COLORBOX_LAYOUT;

      $pi_query = tep_db_query("select image, htmlcontent from " . TABLE_PRODUCTS_IMAGES . " where products_id = '" . (int)$product_info['products_id'] . "' order by sort_order");
      $pi_total = tep_db_num_rows($pi_query);

      if ($pi_total > 0) {
?>

    <div class="piGal pull-right" data-imgcount="<?php echo $photoset_layout; ?>">

<?php
        $pi_counter = 0;
        $pi_html = array();

        while ($pi = tep_db_fetch_array($pi_query)) {
          $pi_counter++;

          if (tep_not_null($pi['htmlcontent'])) {
            $pi_html[] = '<div id="piGalDiv_' . $pi_counter . '">' . $pi['htmlcontent'] . '</div>';
          }

          echo tep_image('images/' . $pi['image'], '', '', '', 'id="piGalImg_' . $pi_counter . '"');
        }
?>

    </div>

<?php
        if ( !empty($pi_html) ) {
          echo '    <div style="display: none;">' . implode('', $pi_html) . '</div>';
        }
      } else {
?>

    <div class="piGal pull-right">
      <?php echo tep_image('images/' . $product_info['products_image'], addslashes($product_info['products_name'])); ?>
    </div>

<?php
      }
    }
?>

 

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...