Add description to product images in Osc 2.3.4

[vmn]

Hi,

 

I could not find anything describing how to add a descriptive text in case a product has multiple images.

 

This is what I did. I (mis)used the htmlcontent value. Are there better solutions? The description is limited to about 2 short lines and there is no language support. I changed the #cboxLoadedContent{margin-bottom:28px;} to #cboxLoadedContent{margin-bottom:48px;} in colorbox.css

 

The product_info.php including default title and language dependent scroll text is as follows:

 

The popup title contains the product name and description from htmlcontent:

...

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

...

 

 

<script type="text/javascript">
$(function() {
  $('#piGal').css({
    'visibility': 'hidden'
  });

  $('#piGal').photosetGrid({
    gutter: '5px',
    layout: '<?php echo $photoset_layout; ?>',
    width: '200px',
    highresLinks: true,
    rel: 'pigallery',
    onComplete: function() {
      $('#piGal').css({ 'visibility': 'visible'});

      $('#piGal a').colorbox({
        maxHeight: '90%',
        maxWidth: '90%',
        //Added product name as default title
        title: '<?php echo $product_info['products_name']; ?>',
        //language dependent text
        current:'<?php echo TEXT_CURRENT_OF_TOTAL; ?>',
        rel: 'pigallery'
      });

      $('#piGal img').each(function() {
        var imgid = $(this).attr('id').substring(9);
        if ( $('#piGalDiv_' + imgid).length ) {
          var title = $('#piGalDiv_' + imgid).html();
          //This was the original line: $(this).parent().colorbox({ inline: true, href: "#piGalDiv_" + imgid });
          $(this).parent().colorbox({ title: function(){return title; }});
        }
      });
    }
  });
});

 

In English:

define('TEXT_CURRENT_OF_TOTAL','Image {current} of {total} ');

 

In Finnish:

define('TEXT_CURRENT_OF_TOTAL','Kuva {current}/{total}');

 

 

 

[greasemonkey]

@@vmn if you don't require a different description for each image than you could just use the product_name as a "title:" in the javascript (like below)... if I remember it required a little playing with the css to make it look nice.

      $('#piGal a').colorbox({
        maxHeight: '90%',
        maxWidth: '90%',
		title: '<?php echo $product_info['products_name']; ?>',
        rel: 'pigallery'
      });

[vmn]

Hi,

 

that's already in my code:

//Added product name as default title

title: '<?php echo $product_info['products_name']; ?>',

 

And yes, I would like to have the opportunity to add description to any picture. If not, the default is used.

[BrockleyJohn]

This is one of the (many) things on my list to look at in moving a heavily-modded store from 2.2 to 2.3.4. 

 

At 2.2 it uses the additional images contribution, which had an image description with no multi-lingual support... so this might be a good fit from the data point of view. 

 

Do you know what the html content is supposed to be for?

[♥kymation]

The HTML content is intended to be used for adding scripts to embed a video. See the Galaxy Tab page in the demo for an example.

 

Regards

Jim

[BrockleyJohn]

It would be a shame to dump that for the sake of a lot of captions which point out to idiots what's not included in what they buy.

 

Solutions in this thread http://www.oscommerce.com/forums/topic/398828-oscommerce234-colorbox-issue/ just add product data as caption.

 

I think I feel a mod to the core coming on...