Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

dynamic thumbnail viewer in product_info.php


Snarf?

Recommended Posts

Hi,

 

 

I want to add a dynamic thumbnail viewer to my product_info.php page that operates exactly like the one here: http://golcarhouse.com/feather-design-hand...shion-p-71.html.

 

I found the following code snippets at http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm

 

<script type="text/javascript" src="thumbnailviewer2.js" defer="defer">

/***********************************************
* Image Thumbnail Viewer II script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit [url="http://www.dynamicDrive.com"]http://www.dynamicDrive.com[/url] for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

</script>

 

and

 

<a href="http://www.nasa.gov/images/content/167040main_image_feature_738_ys_4.jpg" rel="enlargeimage::mouseover" rev="loadarea::http://www.dynamicdrive.com" title="This is an example">Thumbnail Example 1</a><br />
<a href="http://www.nasa.gov/images/content/168177main_image_feature_749_ys_4.jpg" rel="enlargeimage::mouseover" rev="loadarea">Thumbnail Example 2</a><br />

<a href="http://www.nasa.gov/images/content/166615main_image_feature_733_ys_4.jpg" rel="enlargeimage::click" rev="loadarea2">Thumbnail Example 3 (click)</a><br />
<a href="http://www.nasa.gov/images/content/168291main_image_feature_750_ys_4.jpg" rel="enlargeimage::click" rev="loadarea2">Thumbnail Example 4 (click)</a><br /><br />

<div id="loadarea" style="width: 600px"></div>

<h2 />

<div id="loadarea2" style="width: 550px"></div>

 

The problem is the images open in another page rather than in the defined load area. In the example site above the thumbnails open beautiful in the loadarea.

 

Here is my product_info.php page without the snippets. As you can see I already have MaxiDvd's ultrapics contrib installed.

 

<?php
/*
 $Id: product_info.php,v 1.98 2003/09/02 18:52:33 project3000 Exp $

 osCommerce, Open Source E-Commerce Solutions
 [url="http://www.oscommerce.com"]http://www.oscommerce.com[/url]

 Copyright © 2003 osCommerce

 Released under the GNU General Public License
*/

 require('includes/application_top.php');

 require(DIR_WS_LANGUAGES . $language . '/' . FILENAME_PRODUCT_INFO);

 $product_check_query = tep_db_query("select count(*) as total from " . TABLE_PRODUCTS . " p, " . TABLE_PRODUCTS_DESCRIPTION . " pd where p.products_status = '1' and p.products_id = '" . (int)$HTTP_GET_VARS['products_id'] . "' and pd.products_id = p.products_id and pd.language_id = '" . (int)$languages_id . "'");
 $product_check = tep_db_fetch_array($product_check_query);
?>
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html <?php echo HTML_PARAMS; ?>>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<?php echo CHARSET; ?>">
<title><?php echo TITLE; ?></title>
<base href="<?php echo (($request_type == 'SSL') ? HTTPS_SERVER : HTTP_SERVER) . DIR_WS_CATALOG; ?>">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script language="javascript"><!--
function popupWindow(url) {
 window.open(url,'popupWindow','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,res
izable=yes,copyhistory=no,width=100,height=100,screenX=150,screenY=150,top=150,le
ft=150')
}
//--></script>
</head>
<body marginwidth="0" marginheight="0" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0">
<!-- header //-->
<?php require(DIR_WS_INCLUDES . 'header.php'); ?>
<!-- header_eof //-->

<!-- body //-->
<table border="0" width="100%" cellspacing="3" cellpadding="3">
 <tr>
   <td width="<?php echo BOX_WIDTH; ?>" valign="top"><table border="0" width="<?php echo BOX_WIDTH; ?>" cellspacing="0" cellpadding="2">
<!-- left_navigation //-->
<?php require(DIR_WS_INCLUDES . 'column_left.php'); ?>
<!-- left_navigation_eof //-->
   </table></td>
<!-- body_text //-->
   <td width="100%" valign="top"><?php echo tep_draw_form('cart_quantity', tep_href_link(FILENAME_PRODUCT_INFO, tep_get_all_get_params(array('action')) . 'action=add_product')); ?><table border="0" width="100%" cellspacing="0" cellpadding="0">
<?php
 if ($product_check['total'] < 1) {
?>
     <tr>
       <td><?php new infoBox(array(array('text' => TEXT_PRODUCT_NOT_FOUND))); ?></td>
     </tr>
     <tr>
       <td><?php echo tep_draw_separator('pixel_trans.gif', '100%', '10'); ?></td>
     </tr>
     <tr>
       <td><table border="0" width="100%" cellspacing="1" cellpadding="2" class="infoBox">
         <tr class="infoBoxContents">
           <td><table border="0" width="100%" cellspacing="0" cellpadding="2">
             <tr>
               <td width="10"><?php echo tep_draw_separator('pixel_trans.gif', '10', '1'); ?></td>
               <td align="right"><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image_button('button_continue.gif', IMAGE_BUTTON_CONTINUE) . '</a>'; ?></td>
               <td width="10"><?php echo tep_draw_separator('pixel_trans.gif', '10', '1'); ?></td>
             </tr>
           </table></td>
         </tr>
       </table></td>
     </tr>
<?php
 } else {
// BOF MaxiDVD: Modified For Ultimate Images Pack!
   $product_info_query = tep_db_query("select p.products_id, pd.products_name, pd.products_description, p.products_model, p.products_quantity, p.products_image, p.products_image_med, p.products_image_lrg, p.products_image_sm_1, p.products_image_xl_1, p.products_image_sm_2, p.products_image_xl_2, p.products_image_sm_3, p.products_image_xl_3, p.products_image_sm_4, p.products_image_xl_4, p.products_image_sm_5, p.products_image_xl_5, p.products_image_sm_6, p.products_image_xl_6, pd.products_url, p.products_price, p.products_tax_class_id, p.products_date_added, p.products_date_available, p.manufacturers_id from " . TABLE_PRODUCTS . " p, " . TABLE_PRODUCTS_DESCRIPTION . " pd where p.products_status = '1' and p.products_id = '" . (int)$HTTP_GET_VARS['products_id'] . "' and pd.products_id = p.products_id and pd.language_id = '" . (int)$languages_id . "'");
// EOF MaxiDVD: Modified For Ultimate Images Pack!
   $product_info = tep_db_fetch_array($product_info_query);

   tep_db_query("update " . TABLE_PRODUCTS_DESCRIPTION . " set products_viewed = products_viewed+1 where products_id = '" . (int)$HTTP_GET_VARS['products_id'] . "' and language_id = '" . (int)$languages_id . "'");

   if ($new_price = tep_get_products_special_price($product_info['products_id'])) {
     $products_price = '<s>' . $currencies->display_price($product_info['products_price'], tep_get_tax_rate($product_info['products_tax_class_id'])) . '</s> <span class="productSpecialPrice">' . $currencies->display_price($new_price, tep_get_tax_rate($product_info['products_tax_class_id'])) . '</span>';
   } else {
     $products_price = $currencies->display_price($product_info['products_price'], tep_get_tax_rate($product_info['products_tax_class_id']));
   }

   if (tep_not_null($product_info['products_model'])) {
     $products_name = $product_info['products_name'] . '<br><span class="smallText">[' . $product_info['products_model'] . ']</span>';
   } else {
     $products_name = $product_info['products_name'];
   }
?>

       <td><table border="0" width="100%" cellspacing="0" cellpadding="0">
         <tr>
           <td class="pageHeading" valign="top"><?php echo $products_name; ?></td>
           <td class="pageHeading" align="right" valign="top"><?php echo $products_price; ?></td>
         </tr>
       </table></td>
     </tr>
     <tr>
       <td><?php echo tep_draw_separator('pixel_trans.gif', '100%', '10'); ?></td>
     </tr>
     <tr>
       <td class="main">


<?php
   if (tep_not_null($product_info['products_image'])) {
?>
         <table border="0" cellspacing="0" cellpadding="2" align="right">
           <tr>
             <td align="center" class="smallText">

<!-- // BOF MaxiDVD: Modified For Ultimate Images Pack! //-->
<?php
if ($product_info['products_image_med']!='') {
         $new_image = $product_info['products_image_med'];
         $image_width = MEDIUM_IMAGE_WIDTH;
         $image_height = MEDIUM_IMAGE_HEIGHT;
        } else {
         $new_image = $product_info['products_image'];
         $image_width = SMALL_IMAGE_WIDTH;
         $image_height = SMALL_IMAGE_HEIGHT;}?>
<script language="javascript"><!--
     document.write('<?php echo '<a href="java script:popupWindow(\\\'' . tep_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $product_info['products_id'] . 'ℑ=0') . '\\\')">' . tep_image(DIR_WS_IMAGES . $new_image, addslashes($product_info['products_name']), $image_width, $image_height, 'hspace="5" vspace="5"') . '<br>' . tep_image_button('image_enlarge.gif', TEXT_CLICK_TO_ENLARGE) . '</a>'; ?>');
//--></script>
<noscript>
     <?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image_med']) . '">' . tep_image(DIR_WS_IMAGES . $new_image . 'ℑ=0', addslashes($product_info['products_name']), $image_width, $image_height, 'hspace="5" vspace="5"') . '<br>' . tep_image_button('image_enlarge.gif', TEXT_CLICK_TO_ENLARGE) . '</a>'; ?>
</noscript>
<!-- // EOF MaxiDVD: Modified For Ultimate Images Pack! //-->

             </td>
           </tr>
         </table>
<?php
   }
?>


         <p><?php echo stripslashes($product_info['products_description']); ?></p>
<?php
   $products_attributes_query = tep_db_query("select count(*) as total from " . TABLE_PRODUCTS_OPTIONS . " popt, " . TABLE_PRODUCTS_ATTRIBUTES . " patrib where patrib.products_id='" . (int)$HTTP_GET_VARS['products_id'] . "' and patrib.options_id = popt.products_options_id and popt.language_id = '" . (int)$languages_id . "'");
   $products_attributes = tep_db_fetch_array($products_attributes_query);
   if ($products_attributes['total'] > 0) {
?>
         <table border="0" cellspacing="0" cellpadding="2">
           <tr>
             <td class="main" colspan="2"><?php echo TEXT_PRODUCT_OPTIONS; ?></td>
           </tr>
<?php
     $products_options_name_query = tep_db_query("select distinct popt.products_options_id, popt.products_options_name from " . TABLE_PRODUCTS_OPTIONS . " popt, " . TABLE_PRODUCTS_ATTRIBUTES . " patrib where patrib.products_id='" . (int)$HTTP_GET_VARS['products_id'] . "' and patrib.options_id = popt.products_options_id and popt.language_id = '" . (int)$languages_id . "' order by popt.products_options_name");
     while ($products_options_name = tep_db_fetch_array($products_options_name_query)) {
       $products_options_array = array();
       $products_options_query = tep_db_query("select pov.products_options_values_id, pov.products_options_values_name, pa.options_values_price, pa.price_prefix from " . TABLE_PRODUCTS_ATTRIBUTES . " pa, " . TABLE_PRODUCTS_OPTIONS_VALUES . " pov where pa.products_id = '" . (int)$HTTP_GET_VARS['products_id'] . "' and pa.options_id = '" . (int)$products_options_name['products_options_id'] . "' and pa.options_values_id = pov.products_options_values_id and pov.language_id = '" . (int)$languages_id . "'");
       while ($products_options = tep_db_fetch_array($products_options_query)) {
         $products_options_array[] = array('id' => $products_options['products_options_values_id'], 'text' => $products_options['products_options_values_name']);
         if ($products_options['options_values_price'] != '0') {
           $products_options_array[sizeof($products_options_array)-1]['text'] .= ' (' . $products_options['price_prefix'] . $currencies->display_price($products_options['options_values_price'], tep_get_tax_rate($product_info['products_tax_class_id'])) .') ';
         }
       }

       if (isset($cart->contents[$HTTP_GET_VARS['products_id']]['attributes'][$products_options_name['products_options_id']])) {
         $selected_attribute = $cart->contents[$HTTP_GET_VARS['products_id']]['attributes'][$products_options_name['products_options_id']];
       } else {
         $selected_attribute = false;
       }
?>
           <tr>
             <td class="main"><?php echo $products_options_name['products_options_name'] . ':'; ?></td>
             <td class="main"><?php echo tep_draw_pull_down_menu('id[' . $products_options_name['products_options_id'] . ']', $products_options_array, $selected_attribute); ?></td>
           </tr>
<?php
     }
?>
         </table>
<?php
   }
?>
       </td>
     </tr>

<?php
// BOF MaxiDVD: Modified For Ultimate Images Pack!
if (ULTIMATE_ADDITIONAL_IMAGES == 'Enable') { include(DIR_WS_MODULES . 'additional_images.php'); }
// BOF MaxiDVD: Modified For Ultimate Images Pack!
; ?>

     <tr>
       <td><?php echo tep_draw_separator('pixel_trans.gif', '100%', '10'); ?></td>
     </tr>
<?php
   $reviews_query = tep_db_query("select count(*) as count from " . TABLE_REVIEWS . " r, " . TABLE_REVIEWS_DESCRIPTION . " rd where r.products_id = '" . (int)$HTTP_GET_VARS['products_id'] . "' and r.reviews_id = rd.reviews_id and rd.languages_id = '" . (int)$languages_id . "'");
   $reviews = tep_db_fetch_array($reviews_query);
   if ($reviews['count'] > 0) {
?>
     <tr>
       <td class="main"><?php echo TEXT_CURRENT_REVIEWS . ' ' . $reviews['count']; ?></td>
     </tr>
     <tr>
       <td><?php echo tep_draw_separator('pixel_trans.gif', '100%', '10'); ?></td>
     </tr>
<?php
   }

   if (tep_not_null($product_info['products_url'])) {
?>
     <tr>
       <td class="main"><?php echo sprintf(TEXT_MORE_INFORMATION, tep_href_link(FILENAME_REDIRECT, 'action=url&goto=' . urlencode($product_info['products_url']), 'NONSSL', true, false)); ?></td>
     </tr>
     <tr>
       <td><?php echo tep_draw_separator('pixel_trans.gif', '100%', '10'); ?></td>
     </tr>
<?php
   }

   if ($product_info['products_date_available'] > date('Y-m-d H:i:s')) {
?>
     <tr>
       <td align="center" class="smallText"><?php echo sprintf(TEXT_DATE_AVAILABLE, tep_date_long($product_info['products_date_available'])); ?></td>
     </tr>
<?php
   } else {
?>
     <tr>
       <td align="center" class="smallText"><?php echo sprintf(TEXT_DATE_ADDED, tep_date_long($product_info['products_date_added'])); ?></td>
     </tr>
<?php
   }
?>
     <tr>
       <td><?php echo tep_draw_separator('pixel_trans.gif', '100%', '10'); ?></td>
     </tr>
     <tr>
       <td><table border="0" width="100%" cellspacing="1" cellpadding="2" class="infoBox">
         <tr class="infoBoxContents">
           <td><table border="0" width="100%" cellspacing="0" cellpadding="2">
             <tr>
               <td width="10"><?php echo tep_draw_separator('pixel_trans.gif', '10', '1'); ?></td>
               <td class="main"><?php echo '<a href="' . tep_href_link(FILENAME_PRODUCT_REVIEWS, tep_get_all_get_params()) . '">' . tep_image_button('button_reviews.gif', IMAGE_BUTTON_REVIEWS) . '</a>'; ?></td>
               <td class="main" align="right"><?php echo tep_draw_hidden_field('products_id', $product_info['products_id']) . tep_image_submit('button_in_cart.gif', IMAGE_BUTTON_IN_CART); ?></td>
               <td width="10"><?php echo tep_draw_separator('pixel_trans.gif', '10', '1'); ?></td>
             </tr>
           </table></td>
         </tr>
       </table></td>
     </tr>
     <tr>
       <td><?php echo tep_draw_separator('pixel_trans.gif', '100%', '10'); ?></td>
     </tr>
     <tr>
       <td>
<?php
   if ((USE_CACHE == 'true') && empty($SID)) {
     echo tep_cache_also_purchased(3600);
   } else {
     include(DIR_WS_MODULES . FILENAME_ALSO_PURCHASED_PRODUCTS);
   }
 }
?>
       </td>
     </tr>
   </table></form></td>
<!-- body_text_eof //-->
   <td width="<?php echo BOX_WIDTH; ?>" valign="top"><table border="0" width="<?php echo BOX_WIDTH; ?>" cellspacing="0" cellpadding="2">
<!-- right_navigation //-->
<?php require(DIR_WS_INCLUDES . 'column_right.php'); ?>
<!-- right_navigation_eof //-->
   </table></td>
 </tr>
</table>
<!-- body_eof //-->

<!-- footer //-->
<?php require(DIR_WS_INCLUDES . 'footer.php'); ?>
<!-- footer_eof //-->
<br>
</body>
</html>
<?php require(DIR_WS_INCLUDES . 'application_bottom.php'); ?>

 

I feel this would make a great contribution if it were packaged with Ultrapics (instead of ugly (IMHO) lightbox). Maybe its already been done but I haven't found anyone else whose done it on the forums.

Link to comment
Share on other sites

Archived

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

×
×
  • Create New...