Pop-up image

[crimsontree]

TYPO

 

 

I would like an image of the product to appear as a pop-up when the product name is clicked. Is this possible, and if so how?

[Rumble]

Where did you want this for? Which page?

[crimsontree]

Where did you want this for? Which page?

 

I would like to have the pop up from this page. I have inserted **IMAGE** to represent the actual image I want to use for the pop up.

 

 

 

 

Let's See What We Have Here

 

 

Displaying 1 to 110 (of 110 products) Result Pages: 1

 

 

Product Name Buy Now Price Quantity

 

**IMAGE** Accursed Centaur 0.10EUR 20

[Rumble]

I would like an image of the product to appear as a pop-up when the product name is clicked. Is this possible, and if so how?

 

Ok first of all the pop-up would be better on the **IMAGE** not on the 'product name', so when someone clicks the **IMAGE** a bigger pop-up of the image appears. This leaves the 'product name' to be the link to the actual product's information page.

 

In the catalog/default.php and catalog/product_new.php files replace;

 

</head>

 

with......

 

<script language="javascript"><!--

function popupWindow(url) {

 window.open(url,'popupWindow','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizab
le=yes,copyhistory=no,width=100,height=100,screenX=150,screenY=150,top=150,left=1
50')

}

//--></script>

</head>

 

Then in the catalog/includes/modules/product_listing.php file around line 138 change;

 

case 'PRODUCT_LIST_IMAGE':

 $lc_align = 'center';

 if ($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_values['products_id'], 'NONSSL') . '">' . tep_image(DIR_WS_IMAGES . $listing_values['products_image'], $listing_values['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_values['products_id']) . '">' . tep_image(DIR_WS_IMAGES . $listing_values['products_image'], $listing_values['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a> ';

 }

 break;

 

with........

 

case 'PRODUCT_LIST_IMAGE':

 $lc_align = 'center';

 if ($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_values['products_id'], 'NONSSL') . '">' . tep_image(DIR_WS_IMAGES . $listing_values['products_image'], $listing_values['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a>';

 } else {

   $lc_text = ' <a href="javascript:popupWindow('' . tep_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $listing_values['products_id']) . '')">' . tep_image(DIR_WS_IMAGES . $listing_values['products_image'], $listing_values['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a> ';

 }

 break;

 

This should now give you a pop-up on the image. :)

[Rumble]

For the product name;

 

In the catalog/default.php and catalog/product_new.php files replace;

 

</head>

 

with.........

 

<script language="javascript"><!--

function popupWindow(url) {

window.open(url,'popupWindow','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizab

le=yes,copyhistory=no,width=100,height=100,screenX=150,screenY=150,top=150,left=1

50')

}

//--></script>

</head>

 

Then in the catalog/includes/modules/product_listing.php file around line 112 change;

 

case 'PRODUCT_LIST_NAME':

if ($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_values['products_id'], 'NONSSL') . '">' . $listing_values['products_name'] . '</a>';

} else {

$lc_text = '<a href="' . tep_href_link(FILENAME_PRODUCT_INFO, ($cPath ? 'cPath=' . $cPath . '&' : '') . 'products_id=' . $listing_values['products_id']) . '">' . $listing_values['products_name'] . '</a> ';

}

break;

 

with.......

 

case 'PRODUCT_LIST_NAME':

if ($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_values['products_id'], 'NONSSL') . '">' . $listing_values['products_name'] . '</a>';

} else {

$lc_text = '<a href="java script:popupWindow('' . tep_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $listing_values['products_id']) . '')">' . $listing_values['products_name'] . '</a> ';

}

break;

 

let me know how it goes

[crimsontree]

Excellent.

 

That worked a treat.

 

:)

 

Many thanks.

[crimsontree]

If I do a search for a product using Quick Search, the pop-up does not work on the names shown on the results page and an error message appears in the bottom status bar of the browser. Any ideas on how to remedy this?

[crimsontree]

Is there a way to change the background colour of the pop up image?

[jasZ]

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

This should now give you a pop-up on the image. :)

 

 

 

Hi i've tried this code on my product_new.php page, but wonder how come it didnt work? The image still link to product_info.php, and when i click "back", it will show page error at the bottom.

 

Or perhaps any modules for product_new.php popup? as i've gone through the modules, only found popup for product_listing, product_info, index and new products(at homepage).

Thanks for advice