jpmad4it Posted May 8, 2008 Posted May 8, 2008 (edited) 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 Quote
jpmad4it Posted May 8, 2008 Author Posted May 8, 2008 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??? Quote
loveofracing Posted June 27, 2008 Posted June 27, 2008 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? Quote
diamondblast Posted December 20, 2008 Posted December 20, 2008 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"? Quote
carline Posted January 5, 2009 Posted January 5, 2009 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. Quote If it ain't broke, you're not trying hard enough!!
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.