Mouse over product images for oscommerce
Mouse Over popup for Oscommerce
Live Example: Mouse Over Popup for Oscommerce
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 = ' <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> ';
}
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 = ' <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> ';
// Mouse over image End
//////////////////////////////////////
You are done….
/////////////////////////////////////////////////////////////////////////////
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 = ' <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> ';
}
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 = ' <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> ';
// Mouse over image End
//////////////////////////////////////
You are done.
Download Link 1: Mouse Over popup for Oscommerce
Download Link 2: http://addons.oscommerce.com/info/8138
hi
thanks a lot. it is exactly what i am looking for days… i have followed your instructions, but nothing happend only thumbnail disapeared… do i have to install something else? jquery?
greetings
Hello Peter, just follow the installation file (step 1 and 2).
Thank you.
sorry for bothering you but it is not working with my osc 2.3.1. i guess there is also a problem with the existing jquery-file… would it be possible to have a look at your files (template_top, product-listing, new_products)?
or is there already a topic in the osc-forum?
greetings
I just edit the post, please check.
hello
finally it is working. there were two things i had to change:
1. css link to screenshot-class was missing
2. a ” was missing
it is working with following code in product_listing.php
----------------------- case 'PRODUCT_LIST_IMAGE': if (isset($HTTP_GET_VARS['manufacturers_id']) && tep_not_null($HTTP_GET_VARS['manufacturers_id'])) { $prod_list_contents .= ' <a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'manufacturers_id=' . $HTTP_GET_VARS['manufacturers_id'] . '&products_id=' . $listing['products_id']) . '" rel="nofollow">' . 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']; // Check you configure file path $prod_list_contents .= ' <a>' . tep_image(DIR_WS_IMAGES . $listing['products_image'], $listing['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a>'; // Mouse over image End } break; ------------------------------thank you very much for your support.
You are welcome, Mouse Over Images (Demo: http://www.arnlweb.com/demo/osc231/drama-c-3_15.html)
I really liked the article, and the very cool blog
It is not working for me. I followed every details of the instruction carefully.. I dont know wht i done worng. Are there any discussion/threads for this?
Please provide your website URL? Thank you!
Great contrib – really helpful for our products.
Have installed v2.2 rc2
works great on new products.
having issue with product listing .
if I replace the code. get only white space and no left nav column
Tried several variations – some result in no pic and just buttons in the list or white space.
thanks so much – shop is not live..
Hi folks – GREAT addon for our products. Please advise if it is designed to work in only “new products” and “subcategories.?
I would love it to also work in Manufacturers listings but am no coder..
Many thanks Bea
Apologies hit the button too soon.
Installed in V2.2rc2 Also if you click new products from side tab – they do not give mouse over.
We will have many products and some are quite detailed. it is a wonderful timesaver for folks to just roll over. For us it would be ideal on all lists. Site is not live but ready now just this one last tidy up..
i give it up, i search for:
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']) . '" rel="nofollow">' . tep_image(DIR_WS_IMAGES . $listing['products_image'], $listing['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a>'; } else { $lc_text = ' <a href="'') . 'products_id=' . $listing['products_id']) . '" rel="nofollow">' . tep_image(DIR_WS_IMAGES . $listing['products_image'], $listing['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a> '; } break;but this script isnt exact , so there is somthing not the same (sorry for the bad english)
the new products is working perfect only the product list there is a error ‘;’ on line 129
this is the error:
Parse error: syntax error, unexpected T_CASE in /home/paradise/domains/paradise-electronics.nl/public_html/winkel/catalog/includes/modules/product_listing.php on line 141
Please download it http://www.arnlweb.com/wp-content/uploads/2011/08/Image-Mouse-over.zip and try… It definitely work.
Works with your instruction. But how to ad to the product_info.php ?
Works fine. But how to make a screen.availWidth and alt=”" function so an image won’t get off the screen resolution and ave a nice al text in the pop-up??