Community Add-Ons

Maintainers: lachitmonstar
Add file to this package
Top » Images

Mouse over product images
for osCommerce Online Merchant v2.3

Manual Installation (osC(MS2 and RC2)):

IT IS STRONGLY SUGGESTED TO MAKE A BACK-UP OF THESE FILES FIRST Use Contributions at your own risk.

Before beginning the manual install you need to:

Upload two new files, They are (and located in):

1. catalog/js/jquery.js
2. catalog/js/main.js



3. Add new css locate in catalog/stylesheet.css


/* Mouse Over Images CSS Start */

#screenshot{
position:absolute;
border:-2px solid #ccc;
background:#333333;
padding:5px;
display:none;
color:#ffffff;
}

/* */
/* Mouse Over Images CSS End */

4. Edit catalog/index.php and catalog/advance_search_result.php

Find <link rel="stylesheet" type="text/css" href="stylesheet.css">

Add this after

<!-- Image Mouse over start -->
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>
<!-- Image Mouse over end -->


4. catalog/includes/modules/new_products.php


Find this:

while ($new_products = tep_db_fetch_array($new_products_query)) {


Add after:

$image_pathe = HTTP_SERVER.DIR_WS_HTTP_CATALOG.DIR_WS_IMAGES . $new_products['products_image'];


Find again:

<a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $new_products['products_id']) . '">' . tep_image(DIR_WS_IMAGES .

$new_products['products_image'], $new_products['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a><br><a href="' .

tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $new_products['products_id']) . '">' . $new_products['products_name'] .

'</a><br>' . $currencies->display_price($new_products['products_price'], tep_get_tax_rate($new_products['products_tax_class_id'])));


Replace with:

<a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $new_products['products_id']) . '" rel="'. $image_pathe .'"

class="screenshot">' . tep_image(DIR_WS_IMAGES . $new_products['products_image'], '', SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) .

'</a><br><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $new_products['products_id']) . '">' . $new_products

['products_name'] . '</a><br>' . $currencies->display_price($new_products['products_price'], tep_get_tax_rate($new_products

['products_tax_class_id'])));


5. catalog/imcludes/modules/product_listing.php

Find:

case 'PRODUCT_LIST_IMAGE':
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 = '&nbsp;<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>&nbsp;';
}
break;



Replace with:

case 'PRODUCT_LIST_IMAGE':
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 {


// Mouse over image Start


$image_pathe = HTTP_SERVER.DIR_WS_HTTP_CATALOG.DIR_WS_IMAGES . $listing['products_image'];
$lc_text = '&nbsp;<a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $listing['products_id']) . '"

rel="'. $image_pathe .'" class="screenshot">' . tep_image(DIR_WS_IMAGES . $listing['products_image'], '', SMALL_IMAGE_WIDTH,

SMALL_IMAGE_HEIGHT) . '</a>&nbsp;';

// Mouse over image End


//////////////////////////////////////


Manual Installation (osCommerce 2.3.1 Version):


Before beginning the manual install you need to:

Upload two new files, They are (and located in):

1. catalog/js/jquery.js
2. catalog/js/main.js



3. Add new css locate in catalog/stylesheet.css


/* Mouse Over Images CSS Start */

#screenshot{
position:absolute;
border:-2px solid #ccc;
background:#333333;
padding:5px;
display:none;
color:#ffffff;
}

/* */
/* Mouse Over Images CSS End */

4. Edit catalog/includes/template_top.php

Find <link rel="stylesheet" type="text/css" href="stylesheet.css">

Add this after

<!-- Image Mouse over start -->
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>
<!-- Image Mouse over end -->


4. catalog/includes/modules/new_products.php


Find this:

while ($new_products = tep_db_fetch_array($new_products_query)) {


Add after:

$image_pathe = HTTP_SERVER.DIR_WS_HTTP_CATALOG.DIR_WS_IMAGES . $new_products['products_image'];


Find again:

$new_prods_content .= '<td width="33%" align="center" valign="top"><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' .

$new_products['products_id']) . '">' . tep_image(DIR_WS_IMAGES . $new_products['products_image'], $new_products['products_name'],

SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a><br /><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $new_products

['products_id']) . '">' . $new_products['products_name'] . '</a><br />' . $currencies->display_price($new_products['products_price'],

tep_get_tax_rate($new_products['products_tax_class_id'])) . '</td>';


Replace with:


$new_prods_content .= '<td width="33%" align="center" valign="top"><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' .

$new_products['products_id']) . '" rel="'. $image_pathe .'" class="screenshot">' . tep_image(DIR_WS_IMAGES . $new_products

['products_image'], $new_products['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a><br /><a href="' . tep_href_link

(FILENAME_PRODUCT_INFO, 'products_id=' . $new_products['products_id']) . '">' . $new_products['products_name'] . '</a><br />' .

$currencies->display_price($new_products['products_price'], tep_get_tax_rate($new_products['products_tax_class_id'])) . '</td>';


5. catalog/imcludes/modules/product_listing.php

Find:

case 'PRODUCT_LIST_IMAGE':
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 = '&nbsp;<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>&nbsp;';
}
break;



Replace with:

case 'PRODUCT_LIST_IMAGE':
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 {


// Mouse over image Start


$image_pathe = HTTP_SERVER.DIR_WS_HTTP_CATALOG.DIR_WS_IMAGES . $listing['products_image'];
$lc_text = '&nbsp;<a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $listing['products_id']) . '"

rel="'. $image_pathe .'" class="screenshot">' . tep_image(DIR_WS_IMAGES . $listing['products_image'], '', SMALL_IMAGE_WIDTH,

SMALL_IMAGE_HEIGHT) . '</a>&nbsp;';

// Mouse over image End


//////////////////////////////////////

You are done.
Thank you.
More Details: http://www.arnlweb.com/mouse-over-product-images-for-oscommerce/

Legend:  Download   Report

Expand All / Collapse All

Image Size Conrol De Dokta 29 May 2013  

With a small change in the main.js you can control the size of the displayed image.
Open main.js and change:
$ ("body"). append ("<p id='screenshot'> <img src='"+ this.rel +"' alt='Loading...' />" + c + "</ p> ");
to:
$ ("body"). append ("<p id='screenshot'> <img src='"+ this.rel +"' alt='Loading...' width='250'/>" + c + "</ p>");

Mit einer kleinen Änderung in der main.js lässt sich die Größe des angezeigten Bildes steuern.
Öffne main.js und ändere:
$("body").append("<p id='screenshot'><img src='"+ this.rel +"' alt='Loading...' />"+ c +"</p>");
zu:
$("body").append("<p id='screenshot'><img src='"+ this.rel +"' alt='Loading...' width='250'/>"+ c +"</p>");

Not full Package - only changed main.js

Image Larger sarmendrasingh 5 May 2012  
Mouse over product images sarmendrasingh 4 May 2012  
Mouse over product images lachitmonstar 18 Aug 2011