Additional Images Contrib + Lightbox Contrib

[jpmad4it]

Hi there,

 

I am trying to combine the Additional Images contribution (here) and the Lightbox contribution (here)

 

You can see an example of part of my shop below which is relevant to this post:

 

Bellusci

 

What I want to do is use the lightbox contribution to display the large image when the user clicks on the top image on that page. I will worry about the other images at a later point. Lets just get the top one working for now!

 

Has anyone achieved this or know how to do it?

 

I have modified some code, and I manage to get the lightbox to activate, but the loading graphic just appears and no large image ever loads.....i.e. it looks like my code is not correct as the large image is not being referenced properly.

 

Here is my unmodified code for the additional images contribution on the product.info.php page:

 

// BOF: Additional Images
if (ADDIMAGES_MENU_LOCATION == 'product_info') { 

if (ADDIMAGES_POPUP_TABLE_LOCATION=='above' && ADDIMAGES_POPUP_SHOW_ON_POPUP=='true' && ($imagemenu->addimages_count > 1)) {
  echo '<table border="0" cellspacing="0" cellpadding="0" width="100%"><tr><td valign="middle" align="center" class="pageHeading">' . TEXT_MENU_TITLE . '</td></tr><tr><td valign="middle" align="center">' . $imagemenu->altgroupoutput() . '</td></tr></table>';
}

echo '<table border="0" cellspacing="0" cellpadding="0"><tr>';
if (ADDIMAGES_POPUP_TABLE_LOCATION=='sides' && (ADDIMAGES_POPUP_TABLE_ALIGNMENT=='left' || ADDIMAGES_POPUP_TABLE_ALIGNMENT=='center') && ADDIMAGES_POPUP_SHOW_ON_POPUP=='true' && ($imagemenu->addimages_count > 1)) {
  echo '<td valign="middle" align="center" class="pageHeading">' . TEXT_MENU_TITLE . '<br>' . $imagemenu->groupoutput() . '</td>';
}

echo '<td valign="middle" align="center" width="100%">';
if (!empty($_GET['imagesID'])) {
  echo tep_image(DIR_WS_IMAGES . (!empty($selected_image['popup_images'])?$selected_image['popup_images']:(!empty($selected_image['medium_images'])?$selected_image['medium_images']:(!empty($selected_image['thumb_images'])?$selected_image['thumb_images']:''))), $selected_image['images_description'], (ADDIMAGES_POPUP_RESTRICT_IMAGE_SIZE=='true'?POPUP_IMAGE_WIDTH:''), (ADDIMAGES_POPUP_RESTRICT_IMAGE_SIZE=='true'?POPUP_IMAGE_HEIGHT:''), 'id="mainimage"') . (!empty($selected_image['images_description'])?$selected_image['images_description']:'');
} elseif (!empty($_GET['pID'])) {
  echo tep_image(DIR_WS_IMAGES . (!empty($selected_image['products_image_pop'])?$selected_image['products_image_pop']:(!empty($selected_image['products_image_med'])?$selected_image['products_image_med']:(!empty($selected_image['products_image'])?$selected_image['products_image']:''))), $selected_image['products_image_description'], (ADDIMAGES_POPUP_RESTRICT_IMAGE_SIZE=='true'?POPUP_IMAGE_WIDTH:''), (ADDIMAGES_POPUP_RESTRICT_IMAGE_SIZE=='true'?POPUP_IMAGE_HEIGHT:''), 'id="mainimage"') . (!empty($selected_image['products_image_description'])?$selected_image['products_image_description']:'');
}
echo '</td>';

if (ADDIMAGES_POPUP_TABLE_LOCATION=='sides' && ADDIMAGES_POPUP_TABLE_ALIGNMENT=='right' && ADDIMAGES_POPUP_SHOW_ON_POPUP=='true' && ($imagemenu->addimages_count > 1)) {
  echo '<td valign="middle" align="center" class="pageHeading">' . TEXT_MENU_TITLE . '<br>' . $imagemenu->groupoutput() . '</td>';
}
if (!empty($imagemenu->maximagewidth) && !empty($imagemenu->maximageheight)) { echo '<td>' . tep_draw_separator('pixel_trans.gif', '4', $imagemenu->maximageheight) . '</td>'; }
echo '</tr></table>';

if (ADDIMAGES_POPUP_TABLE_LOCATION=='below' && ADDIMAGES_POPUP_SHOW_ON_POPUP=='true' && ($imagemenu->addimages_count > 1)) {
  echo '<table border="0" cellspacing="0" cellpadding="0" width="100%"><tr><td valign="middle" align="center" class="pageHeading">' . TEXT_MENU_TITLE . '</td></tr><tr><td valign="middle" align="center">' . $imagemenu->altgroupoutput() . '</td></tr></table>';
}
} else {
?>
						  <script language="javascript"><!--
document.write('<?php echo '<a href="java script:popupWindow(\\\'' . tep_href_link(FILENAME_POPUP_ADD_IMAGE, 'pID=' . $product_info['products_id']) . '\\\')">' . tep_image(DIR_WS_IMAGES . (!empty($product_info['products_image_med'])?$product_info['products_image_med']:(!empty($product_info['products_image_pop'])?$product_info['products_image_pop']:(!empty($product_info['products_image'])?$product_info['products_image']:''))), addslashes($product_info['products_name']), (ADDIMAGES_RESTRICT_PARENT=='true'?DISPLAY_IMAGE_WIDTH:''), (ADDIMAGES_RESTRICT_PARENT=='true'?DISPLAY_IMAGE_HEIGHT:''), 'hspace="5" vspace="5"') . '<br>' . (!empty($product_info['products_image_description'])?$product_info['products_image_description']:TEXT_CLICK_TO_ENLARGE) . '</a>'; ?>');
//--></script>
						  <noscript>
						  <?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . (!empty($product_info['products_image_pop'])?$product_info['products_image_pop']:$product_info['products_image'])) . '" target="_blank">' . tep_image(DIR_WS_IMAGES . (!empty($product_info['products_image_med'])?$product_info['products_image_med']:(!empty($product_info['products_image_pop'])?$product_info['products_image_pop']:(!empty($product_info['products_image'])?$product_info['products_image']:''))), $product_info['products_name'], (ADDIMAGES_RESTRICT_PARENT=='true'?DISPLAY_IMAGE_WIDTH:''), (ADDIMAGES_RESTRICT_PARENT=='true'?DISPLAY_IMAGE_HEIGHT:''), 'hspace="5" vspace="5"') . '<br>' . (!empty($product_info['products_image_description'])?$product_info['products_image_description']:TEXT_CLICK_TO_ENLARGE) . '</a>'; ?>
						  </noscript>
						  <?php
}
// EOF: Additional Images ?>

 

Here is the code for product.info that comes with the lightbox contribution:

 

<script language="javascript"><!--
document.write('<?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" target="_blank" rel="lightbox" title="'.$product_info['products_name'].'" >' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], $product_info['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>');
//--></script>
<noscript>
<?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" target="_blank" rel="lightbox" title="'.$product_info['products_name'].'" >' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], $product_info['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>');
</noscript>

 

As you can see there are similarities in the <script> and <noscript> parts of both sets of the code, which is what I have been trying to work on. The only difference is that the additional images contribution uses a javascript pop-up window at the moment to display the large images (which is what I want to replace using the lightbox).

 

Has anyone got any ideas? Do you need to see my additional images modified code so far?

 

Any help would be greatly appreciated.

 

kind regards

Jonathan

Edited May 8, 2008 by jpmad4it

[jpmad4it]

Ok, I managed to get the first image to display, but I am having a nightmare trying to get the additional images to display.

 

The file that controls the building and displaying of the additional images is includes/classes/displayimages.php

 

The full code for this file is here:

 

<?php
/*
 Designed for: osCommerce, Open Source E-Commerce Solutions
 http://www.oscommerce.com

 Copyright (c) 2006 Todd Holforty - [email protected]

 Released under the GNU General Public License

This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
*/

/**
*** displayimages class ***
*** 
*** 
*** 
*** 
*** 
*** 
*/
 class displayimages {

var $restrictsmimage = ADDIMAGES_RESTRICT_IMAGE_SIZE;  // true, false
var $tablealignment = ADDIMAGES_TABLE_ALIGNMENT;   // right, center, left
var $numberofcolumns = 1;
var $numberofrows =100;
var $groupwithparent = ADDIMAGES_GROUP_WITH_PARENT;
var $imagedefault = 'medium';
var $buildmenu = false;
var $onpagemenu = false;
var $linkurl = FILENAME_POPUP_ADD_IMAGE;

var $addimages_count = 0;
var $groupout = '';

var $maximagewidth = 0;
var $maximageheight = 0;


  /**
** constructor **/
function displayimages ( $products_id ) {

  $this->imagedir = DIR_FS_CATALOG . DIR_WS_IMAGES;
  $product_query = tep_db_query("SELECT products_id, products_image, products_image_med, products_image_pop, products_image_description FROM " . TABLE_PRODUCTS . " WHERE products_id = '".(int)$products_id."'");
  $product = tep_db_fetch_array($product_query);
  tep_db_free_result($product_query);

  $images = array();
  $images_query = tep_db_query("select additional_images_id, images_description, thumb_images, medium_images, popup_images from " . TABLE_ADDITIONAL_IMAGES . " where products_id = '" . (int)$products_id . "'");
  while ($tmp_images = tep_db_fetch_array($images_query)) {
	$images[] = $tmp_images;
  }
  tep_db_free_result($images_query);

  // find the largest image width and height
  if (!empty($product['products_image_pop']) || !empty($product['products_image'])) { list($this->maximagewidth, $this->maximageheight, $type) = @getimagesize($this->imagedir.(!empty($product['products_image_pop'])?$product['products_image_pop']:$product['products_image'])); }
  foreach ($images as $key => $image) {
	if (!empty($image['popup_images']) || !empty($image['thumb_images'])) { list($t_maximagewidth, $t_maximageheight, $type) = @getimagesize($this->imagedir.(!empty($image['popup_images'])?$image['popup_images']:$image['thumb_images'])); }
	if ($t_maximagewidth > $this->maximagewidth) { $this->maximagewidth = $t_maximagewidth; }
	if ($t_maximageheight > $this->maximageheight) { $this->maximageheight = $t_maximageheight; }
  }

  // determine image width to use
  $addimages_image_width = ($this->restrictsmimage=='true'?(($this->imagedefault=='medium')?DISPLAY_IMAGE_WIDTH:SMALL_IMAGE_WIDTH):'');
  $addimages_image_height = ($this->restrictsmimage=='true'?(($this->imagedefault=='medium')?DISPLAY_IMAGE_HEIGHT:SMALL_IMAGE_HEIGHT):'');

  $row = 1;
  $col = 1;

  // build composite array of products.
  $addimages_images = array();
  if (tep_not_null($product['products_image']) && $this->groupwithparent == 'true') { 
	if (tep_not_null($product['products_image_med']) && ($this->imagedefault == 'medium')) { $use_image = $product['products_image_med']; }
	elseif (tep_not_null($product['products_image']) && ($this->imagedefault == 'medium' || $this->imagedefault == 'small')) { $use_image = $product['products_image']; }
	$t_imagewidth = 0;
	$t_imageheight = 0;
	if (!empty($use_image)) { list($t_imagewidth, $t_imageheight, $type) = @getimagesize($this->imagedir.$use_image); }
	$t_popimagewidth = 0;
	$t_popimageheight = 0;
	if (!empty($product['products_image_pop'])) { list($t_popimagewidth, $t_popimageheight, $type) = @getimagesize($this->imagedir.$product['products_image_pop']); }
	$addimages_images[] = array('id' => '', 'image' => $use_image, 'image_width' => $t_imagewidth, 'image_height' => $t_imageheight, 'popimage' => $product['products_image_pop'], 'popimage_width' => $t_popimagewidth, 'popimage_height' => $t_popimageheight, 'desc' => $product['products_image_description']); 
  }
  foreach ( $images as $key => $image ) {
	if (tep_not_null($image['medium_images']) && ($this->imagedefault == 'medium')) { $use_image = $image['medium_images']; }
	elseif (tep_not_null($image['thumb_images']) && ($this->imagedefault == 'medium' || $this->imagedefault == 'small')) { $use_image = $image['thumb_images']; }
	$t_imagewidth = 0;
	$t_imageheight = 0;
	if (!empty($use_image)) { list($t_imagewidth, $t_imageheight, $type) = @getimagesize($this->imagedir.$use_image); }
	$t_popimagewidth = 0;
	$t_popimageheight = 0;
	if (!empty($image['popup_images'])) { list($t_popimagewidth, $t_popimageheight, $type) = @getimagesize($this->imagedir.$image['popup_images']); }
	$addimages_images[] = array('id' => $image['additional_images_id'], 'image' => $use_image, 'image_width' => $t_imagewidth, 'image_height' => $t_imageheight, 'popimage' => $image['popup_images'], 'popimage_width' => $t_popimagewidth, 'popimage_height' => $t_popimageheight, 'desc' => $image['images_description']);
  }
  $this->addimages_count = sizeof($addimages_images);

  // start building output
  if (tep_not_null($product['products_image'])) { $this->groupout .= '<table border="0" cellspacing="0" cellpadding="4" align="'.$this->tablealignment.'">'."\n"; }

  for ( $item=0; $item<$this->addimages_count; $item++ ) {

	if ($row<($this->numberofrows+1)) {
	  if ($col==1) {$this->groupout.='<tr>';}
	  $t_menu_mouseover = (($this->buildmenu==true) ? ' onmouseover="showImage('.(!empty($addimages_images[$item]['popimage']) ? '\\\''.DIR_WS_IMAGES.$addimages_images[$item]['popimage'].'\\\', '.$addimages_images[$item]['popimage_width'].', '.$addimages_images[$item]['popimage_height'] : '\\\''.DIR_WS_IMAGES.$addimages_images[$item]['image'].'\\\', '.$addimages_images[$item]['image_width'].', '.$addimages_images[$item]['image_height']) . ')"' : '' );

	  $this->groupout .= '
		  <td align="center" class="pic"><script language="javascript"><!--
			document.write(\'<a href="' . (!$this->onpagemenu ? 'java script:popupWindow(\\\'' : '') . tep_href_link( $this->linkurl, ($item==0&&$this->groupwithparent=='true'?'pID='.$products_id:'imagesID='.$addimages_images[$item]['id'])) . (!empty($_GET['products_id']) ? '&products_id='.$_GET['products_id'] : '') . (!empty($_GET['cPath']) ? '&cPath='.$_GET['cPath'] : '') . (!$this->onpagemenu ? '\\\')' : '') . '"' . $t_menu_mouseover . '>' . tep_image(DIR_WS_IMAGES . $addimages_images[$item]['image'], addslashes($addimages_images[$item]['desc']), (ADDIMAGES_RESTRICT_PARENT=='false'&&$item==0&&$this->groupwithparent=='true'?'':$addimages_image_width), (ADDIMAGES_RESTRICT_PARENT=='false'&&$item==0&&$this->groupwithparent=='true'?'':$addimages_image_height), 'hspace="5" vspace="5"') . '<br>' . (!empty($addimages_images[$item]['desc'])?$addimages_images[$item]['desc']:TEXT_CLICK_TO_ENLARGE) . '</a>\');
			//--></script>
			<noscript>
			  <a href="' . tep_href_link(DIR_WS_IMAGES . $addimages_images[$item]['popimage']) . '" target="_blank">' . tep_image(DIR_WS_IMAGES . $addimages_images[$item]['image'], $addimages_images[$item]['desc'], $addimages_image_width, $addimages_image_height, 'hspace="5" vspace="5"') . '<br>' . (!empty($addimages_images[$item]['desc'])?$addimages_images[$item]['desc']:TEXT_CLICK_TO_ENLARGE) . '</a>
			  </noscript></td>'."\n";

	  if ($col==$this->numberofcolumns) { $col=1; $row++; $this->groupout.='</tr>'."\n"; } else { $col++; }
	}

  }

  if ($col!=1 && $this->addimages_count > $this->numberofcolumns){ while (($col++)<($this->numberofcolumns+1)) { $this->groupout.='<td> </td>'."\n"; } }

  if (tep_not_null($product['products_image'])) { $this->groupout .= '</table>'."\n"; }

}

  /**
** member functions
**/
function groupoutput () {
  return $this->groupout;
}

function altgroupoutput () {
  $returnvar = '
	  <table width="100%" border="0" cellspacing="0" cellpadding="0">
		<tr>
		  <td align="center" class="smallText">'.$this->groupout.'</td>
		</tr>
	  </table>'."\n";
  return $returnvar;
}

function boxsize () {
  // calculate box size
  $menuimagewidth = (($this->imagedefault=='medium')?DISPLAY_IMAGE_WIDTH:SMALL_IMAGE_WIDTH);
  $menuimageheight = (($this->imagedefault=='medium')?DISPLAY_IMAGE_HEIGHT:SMALL_IMAGE_HEIGHT);
  if (empty($menuimageheight)) { $menuimageheight = $menuimagewidth; } // if width was set to zero for proper proportion display.
  if (empty($menuimagewidth)) { $menuimagewidth = $menuimageheight; } // if height was set to zero for proper proportion display.

  $real_columns = (($this->addimages_count < $this->numberofcolumns) ? $this->addimages_count : $this->numberofcolumns);
  $real_rows = ceil($this->addimages_count / $this->numberofcolumns);

  $menu_width = ($real_columns * ($menuimagewidth + 10));
  $menu_height = ($real_rows * ($menuimageheight + 10));

  return array($menu_width, $menu_height);
}

 } // end: class displayimages {}


/**
*** displaypopupimagemenu class ***
*** 
*** 
*** 
*** 
*** 
*** 
*/
 class displaypopupimagemenu extends displayimages {

  /**
** constructor **/
function displaypopupimagemenu ( $products_id ) {

  $this->imagedir = DIR_FS_CATALOG . DIR_WS_IMAGES;
  $this->restrictsmimage = ADDIMAGES_POPUP_RESTRICT_IMAGE_SIZE;
  $this->tablealignment = ADDIMAGES_POPUP_TABLE_ALIGNMENT;
  $this->numberofcolumns = ADDIMAGES_POPUP_NUMBER_OF_COLS;
  $this->numberofrows = ADDIMAGES_POPUP_NUMBER_OF_ROWS;
  $this->groupwithparent = ADDIMAGES_POPUP_GROUP_WITH_PARENT;
  $this->imagedefault = 'small';
  $this->buildmenu = true;
  $this->onpagemenu = false;
  $this->linkurl = FILENAME_POPUP_ADD_IMAGE;

  $this->displayimages ( $products_id );

}

 } // end: class displaypopupimagemenu {}


/**
*** displayonpageimagemenu class ***
*** 
*** 
*** 
*** 
*** 
*** 
*/
 class displayonpageimagemenu extends displayimages {

  /**
** constructor **/
function displayonpageimagemenu ( $products_id ) {

  $this->imagedir = DIR_FS_CATALOG . DIR_WS_IMAGES;
  $this->restrictsmimage = ADDIMAGES_POPUP_RESTRICT_IMAGE_SIZE;
  $this->tablealignment = ADDIMAGES_POPUP_TABLE_ALIGNMENT;
  $this->numberofcolumns = ADDIMAGES_POPUP_NUMBER_OF_COLS;
  $this->numberofrows = ADDIMAGES_POPUP_NUMBER_OF_ROWS;
  $this->groupwithparent = ADDIMAGES_POPUP_GROUP_WITH_PARENT;
  $this->imagedefault = 'small';
  $this->buildmenu = true;
  $this->onpagemenu = true;
  $this->linkurl = FILENAME_PRODUCT_INFO;

  $this->displayimages ( $products_id );

}

 } // end: class displayonpageimagemenu {}

?>

 

Sorry for posting the whole code, but I thought that some of you may need to see how the code works. The part I am trying to modify is this code:#

 

<script language="javascript"><!--
			document.write(\'<a href="' . (!$this->onpagemenu ? 'java script:popupWindow(\\\'' : '') . tep_href_link( $this->linkurl, ($item==0&&$this->groupwithparent=='true'?'pID='.$products_id:'imagesID='.$addimages_images[$item]['id'])) . (!empty($_GET['products_id']) ? '&products_id='.$_GET['products_id'] : '') . (!empty($_GET['cPath']) ? '&cPath='.$_GET['cPath'] : '') . (!$this->onpagemenu ? '\\\')' : '') . '"' . $t_menu_mouseover . '>' . tep_image(DIR_WS_IMAGES . $addimages_images[$item]['image'], addslashes($addimages_images[$item]['desc']), (ADDIMAGES_RESTRICT_PARENT=='false'&&$item==0&&$this->groupwithparent=='true'?'':$addimages_image_width), (ADDIMAGES_RESTRICT_PARENT=='false'&&$item==0&&$this->groupwithparent=='true'?'':$addimages_image_height), 'hspace="5" vspace="5"') . '<br>' . (!empty($addimages_images[$item]['desc'])?$addimages_images[$item]['desc']:TEXT_CLICK_TO_ENLARGE) . '</a>\');
			//--></script>

 

 

I am trying to modify the code above so that it will behave in the same way as the following code from product_info.php:

 

<script language="javascript"><!--
document.write('<?php echo '<a target="_blank" rel="lightbox" href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image_pop']) . ')">' . tep_image(DIR_WS_IMAGES . (!empty($product_info['products_image_med'])?$product_info['products_image_med']:(!empty($product_info['products_image_pop'])?$product_info['products_image_pop']:(!empty($product_info['products_image'])?$product_info['products_image_pop']:''))), addslashes($product_info['products_name']), (ADDIMAGES_RESTRICT_PARENT=='true'?DISPLAY_IMAGE_WIDTH:''), (ADDIMAGES_RESTRICT_PARENT=='true'?DISPLAY_IMAGE_HEIGHT:''), 'hspace="5" vspace="5"') . '<br>' . (!empty($product_info['products_image_description'])?$product_info['products_image_description']:TEXT_CLICK_TO_ENLARGE) . '</a>'; ?>');
//--></script>

 

As you can see the two blocks of code are similar, apart from the top block having some extra functionality. Can anyone suggest where to start to get the additional images to work using lightbox???

[loveofracing]

I have installed both as well. Immediately the top image works just fine but the "additional image" appears the original way.

 

Has anyone found the solution?

[diamondblast]

I have installed both as well. Immediately the top image works just fine but the "additional image" appears the original way.

 

Has anyone found the solution?

 

I ran it and it worked just fine...

maybe there's a problem with your configuration :) check it

what do you mean that the image appeared the "original way"?

[carline]

Has anyone managed to get this working on the Additional Images v2.1.0 mod?

 

I can get the first image to appear using Lightbox, but any additional images appear using the standard pop-up window?

 

Reading this post, it looks like I need to make changes to the \includes\classes\displayimages.php file.

 

Any help greatly appreciated.