Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Image Popups from Product Listing


abrapin

Recommended Posts

Does anyone know how to call a popup image from the thumbnails on the Product Listing page or New Products page? The idea is to show the large images on these pages instead of linking to the Product Description page.

 

I'm at my witts end with this - pls someone tell me it's easy (or even possible) :blush: Thanks so much!

Link to comment
Share on other sites

In your catalog/includes/modules/product_listing.php

find about line 123

		  case 'PRODUCT_LIST_IMAGE':
		$lc_align = 'center';
		if (isset($HTTP_GET_VARS['manufacturers_id'])) {
		  $lc_text = '<a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'manufacturers_id=' . $HTTP_GET_VARS['manufacturers_id'] . '&products_id=' . $listing['products_id']) . '">' . tep_image(DIR_WS_IMAGES . $listing['products_image'], $listing['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a>';
		} else {
		  $lc_text = ' <a href="' . tep_href_link(FILENAME_PRODUCT_INFO, ($cPath ? 'cPath=' . $cPath . '&' : '') . 'products_id=' . $listing['products_id']) . '">' . tep_image(DIR_WS_IMAGES . $listing['products_image'], $listing['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a> ';
		}

change to

		  case 'PRODUCT_LIST_IMAGE':
		$lc_align = 'center';
		if (isset($HTTP_GET_VARS['manufacturers_id'])) {
		  $lc_text = '<a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'manufacturers_id=' . $HTTP_GET_VARS['manufacturers_id'] . '&products_id=' . $listing['products_id']) . '">' . tep_image(DIR_WS_IMAGES . $listing['products_image'], $listing['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a>';
		} else {
		  $lc_text = '<a href="' . tep_href_link(DIR_WS_IMAGES . $listing['products_image']) . '" target="_blank">' . tep_image(DIR_WS_IMAGES . $listing['products_image'], $listing['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . 'Click to enlarge' . '</a>';
		}

This code does not work if the cust got to the product listing from the manufacturers link.

My Contributions

 

Stylesheet With Descriptions Glassy Grey Boxtops Our Products Meta Tags On The Fly

Password Protect Admin

"No matter where you go....There you are" - Buccaroo Bonsai

Link to comment
Share on other sites

In your catalog/includes/modules/product_listing.php

find about line 123

		  case 'PRODUCT_LIST_IMAGE':
		$lc_align = 'center';
		if (isset($HTTP_GET_VARS['manufacturers_id'])) {
		  $lc_text = '<a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'manufacturers_id=' . $HTTP_GET_VARS['manufacturers_id'] . '&products_id=' . $listing['products_id']) . '">' . tep_image(DIR_WS_IMAGES . $listing['products_image'], $listing['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a>';
		} else {
		  $lc_text = ' <a href="' . tep_href_link(FILENAME_PRODUCT_INFO, ($cPath ? 'cPath=' . $cPath . '&' : '') . 'products_id=' . $listing['products_id']) . '">' . tep_image(DIR_WS_IMAGES . $listing['products_image'], $listing['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a> ';
		}

change to

		  case 'PRODUCT_LIST_IMAGE':
		$lc_align = 'center';
		if (isset($HTTP_GET_VARS['manufacturers_id'])) {
		  $lc_text = '<a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'manufacturers_id=' . $HTTP_GET_VARS['manufacturers_id'] . '&products_id=' . $listing['products_id']) . '">' . tep_image(DIR_WS_IMAGES . $listing['products_image'], $listing['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a>';
		} else {
		  $lc_text = '<a href="' . tep_href_link(DIR_WS_IMAGES . $listing['products_image']) . '" target="_blank">' . tep_image(DIR_WS_IMAGES . $listing['products_image'], $listing['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . 'Click to enlarge' . '</a>';
		}

This code does not work if the cust got to the product listing from the manufacturers link.

 

Thankyou Bill SO MUCH for your reply and your code help, it's really appreciated. Would you by any chance also know how to work the java script:popupWindow script into the same page so as to have an image sized popup window, as in the product description page? I'd also like to do the same thing for the thumbs on the new products page.

Thanks in advance for your kind efforts to help :)

Link to comment
Share on other sites

I've tried to use the javascript function but to no avail. too many single quotes in the script that keeps stopping the php execution.

for the new products open catalog/products_new.php.

find about line 88

		   <td width="<?php echo SMALL_IMAGE_WIDTH + 10; ?>" valign="top" class="main"><? php echo '<a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $products_new['products_id']) . '">' . tep_image(DIR_WS_IMAGES . $products_new['products_image'], $products_new['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a>'; ?></td>

change to:

		  <td width="<?php echo SMALL_IMAGE_WIDTH + 10; ?>" valign="top" class="main"><?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $products_new['products_image']) . '" target="_blank">' . tep_image(DIR_WS_IMAGES . $products_new['products_image'], $products_new['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . 'Click to enlarge' . '</a>'; ?></td>

This will act the same as the other code. New browser window not a popup window. Sorry, Best i can do with my knowledge.

My Contributions

 

Stylesheet With Descriptions Glassy Grey Boxtops Our Products Meta Tags On The Fly

Password Protect Admin

"No matter where you go....There you are" - Buccaroo Bonsai

Link to comment
Share on other sites

Thanks again Bill for your help. I seem to have found the answer, through a combination of other related posts. What I had to do was first change the involved code in catalog/includes/modules/product_listing.php to:

 case 'PRODUCT_LIST_IMAGE':
$lc_align = 'center';
if (isset($HTTP_GET_VARS['manufacturers_id'])) {
$lc_text = '<a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'manufacturers_id=' . $HTTP_GET_VARS['manufacturers_id'] . '&products_id=' . $listing['products_id']) . '">' . tep_image(DIR_WS_IMAGES . $listing['products_image'], $listing['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a>';
} else {
$lc_text = '
<script language="javascript"><!--
document.write(\'<a href="java script:popupWindow(\\\'' . tep_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $listing['products_id']) . '\\\')">' . tep_image(DIR_WS_IMAGES . $listing['products_image'], addslashes($listing['products_name']), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>Click to enlarge</a>\');
//--></script>
<noscript>
<a href="' . tep_href_link(DIR_WS_IMAGES . $listing['products_image']) . '" target="_blank">' . tep_image(DIR_WS_IMAGES . $listing['products_image'], $listing['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>
</noscript>';
}

and then insert into the header of index.php the following, making sure the window.open line is not broken:

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

Now all I have to do is try to do the same for catalog/products_new.php

Link to comment
Share on other sites

I Am keeping a copy of this for future reference. One question: Is the #39 supposed to be there? I do not find that in the other javascript functions.

My Contributions

 

Stylesheet With Descriptions Glassy Grey Boxtops Our Products Meta Tags On The Fly

Password Protect Admin

"No matter where you go....There you are" - Buccaroo Bonsai

Link to comment
Share on other sites

No, the #39 shouldn't be there - be sure not to include it.

 

I've worked out how to do the same thing for catalogue/products_new.php. I changed the code (from line 88 in an unmodified page) to:

<script language="javascript"><!--
document.write('<?php echo '<a href="java script:popupWindow(\\\'' . tep_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $products_new['products_id']) . '\\\')">' . tep_image(DIR_WS_IMAGES . $products_new['products_image'], $products_new['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'class=shadow1') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>');
//--></script>
<noscript>
<?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" target="_blank">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], $product_info['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'class=shadow1','hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>
</noscript>

 

I also added the following line at the top of the page, after line 17 and before the first ?>

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

 

And not to forget the javascript code between the head tags of the page.

Link to comment
Share on other sites

Archived

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

×
×
  • Create New...