Jump to content
Latest News: (loading..)
YePix

Pictures side by side

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
    }
?>

 

Share this post


Link to post
Share on other sites
Posted (edited)

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.

 

Edited by JcMagpie

 

Share this post


Link to post
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.


 

Share this post


Link to post
Share on other sites

http://template.me.uk/frozen2bs4/product_info.php?products_id=28

12 width and set to "255"

However, it is obvious that Yepi has already made core edits, so all of this advice given may be null and void anyway.


This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest current code (community-supported responsive 2.3.4.1BS Edge) here

 

Share this post


Link to post
Share on other sites
Posted (edited)
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
      }
    }
?>

 

Edited by Yepi

Share this post


Link to post
Share on other sites

 

unfortunately no change. the main picture is not displayed. despite original code

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

×