Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Product Listings - changing image on hover? like this site here


vampirehunter

Recommended Posts

i was wondering if someone can point me to how this is being achieved?

 

on the product listings in this example,

 

the main image for the product listing seems to be a unique one,

 

if you hover over an item, it will change to the other image which can be seen on the product info page.

 

the thumbnail in the product listing is only displayed on the product listing and nowhere else.

 

themeforest.net/item/unishop-responsive-oscommerce-theme/full_screen_preview/4114698

 

i would greatly appreciate it if anyone knows how to achieve this or point me in the right direction.

 

thanks

Link to comment
Share on other sites

There quite a few contributions that have done just this sort of thing in OSCommerce. The Themeforest theme you reference uses Jquery Fancybox to accomplish the picture switch. Jquery is already installed on OSCommerce, and lots of smart folks here have made contributions using Fancybox.

 

Go here http://addons.oscommerce.com/category?search=fancybox and search for 'Fancybox' .

Oscommerce site:

 

 

OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120

Link to comment
Share on other sites

  • 2 weeks later...

I'm not sure.

 

It seems like a specially defined image is being selected somehow for the product listing but once you get to product info this image is not present.

 

If anyone knows how this is being done it would be really great.

Link to comment
Share on other sites

This is the default osCommerce behavior. The Product Info page will use the Large image(s) if one or more are loaded. The Large images can be completely different from the Main image that is used on all other pages.

 

Regards

Jim

See my profile for a list of my addons and ways to get support.

Link to comment
Share on other sites

hi thanks

 

yes

 

But for the product listings, i think the code is just pulling out 1 image isn't it?

 

on that example site, the site seems to be pulling out 2 images for the product listings.

 

so when the first image is loaded, if you hover over, the second image shows.

 

it must be a query then in the product listings code which i must modify?

 

i'm not sure how i would go about it, to change the query so it pulls out 2 images, instead of just 1 for product listings.

Link to comment
Share on other sites

I think there are many ways to make this effect. you can simple change the product image to because the background <div> images, and using a blank images as the face. when on each product listing image you makes both face images and mouseover images in one.

 

example, as you can see if the product listing images <div> is 100 x 100 ( this is what you see in on your screen) but the actual images is 100 x 200. when you mouseover the your images <div> and you can simply apply your images background position change to 0 -100px something like this. If you don't want the fade or delay effect, you can even make it happen with css, doesn't even require for jQuery.

 

ken

Link to comment
Share on other sites

I think there are many ways to make this effect. you can simple change the product image to because the background <div> images, and using a blank images as the face. when on each product listing image you makes both face images and mouseover images in one.

 

example, as you can see if the product listing images <div> is 100 x 100 ( this is what you see in on your screen) but the actual images is 100 x 200. when you mouseover the your images <div> and you can simply apply your images background position change to 0 -100px something like this. If you don't want the fade or delay effect, you can even make it happen with css, doesn't even require for jQuery.

 

ken

 

im not sure you fully understand what i'm trying to do.

 

ignore the product info page.

 

just look at the product listings.

 

there are rows of all the products.

 

now, each product has its own main thumbnail. when you hover over these thumbnails, it shows a second completely different image.

 

By default it seems Oscommerce only pulls out 1 single image for the product listings.

 

I'm trying to figure out how to pull out 2 images like that site is doing, so that when the image is hovered over, the second image is displayed.

 

Its not exactly simple, there has obviously been some php coding in there to pull out more than 1 image for the product listings page.

 

Yes, i could do what you have said (same like truffleshuffle t shirt shop is doing), display the thumbnail in one size, and when hovering, increase its size or move its background position.

 

But I want to try to have a completely different second image when hovering over like that site is doing.

it seems like noone knows how this is being done.

Link to comment
Share on other sites

First, you need to add an extra image under product table. I will call in products_image_hover.

second open index.php and find

 

case 'PRODUCT_LIST_IMAGE':
	 $select_column_list .= 'p.products_image,

 

and change to

case 'PRODUCT_LIST_IMAGE':
	 $select_column_list .= 'p.products_image, p.products_image_hover,

 

 

This will bring out your hover images from the table under product listing page.

 

Now you need it the images display on your screen.

 

Open your catalog\includes\modules\product_listing.php

 

Find

 

case 'PRODUCT_LIST_IMAGE':
	 if (isset($HTTP_GET_VARS['manufacturers_id']) && tep_not_null($HTTP_GET_VARS['manufacturers_id'])) {
		 $prod_list_contents .= '	 <td align="center"><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></td>';
	 } else {
		 $prod_list_contents .= '	 <td align="center"><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></td>';
	 }
	 break;

 

and change to

case 'PRODUCT_LIST_IMAGE':
	 if (isset($HTTP_GET_VARS['manufacturers_id']) && tep_not_null($HTTP_GET_VARS['manufacturers_id'])) {
		 $prod_list_contents .= '	 <td align="center">

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

 </td>';
	 } else {
		 $prod_list_contents .= '	 <td align="center">


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

 <a href="' . tep_href_link(FILENAME_PRODUCT_INFO, ($cPath ? 'cPath=' . $cPath . '&' : '') . 'products_id=' . $listing['products_id']) . '">' . tep_image(DIR_WS_IMAGES . $listing['products_image_hover'], $listing['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a>




 </td>';
	 }
	 break;

it will bring up your hover images under the main images.

 

 

I didn't complete it, so you can play with the layer and apply different style in there.

 

 

ken

Link to comment
Share on other sites

First, you need to add an extra image under product table. I will call in products_image_hover.

second open index.php and find

 

case 'PRODUCT_LIST_IMAGE':
	 $select_column_list .= 'p.products_image,

 

and change to

case 'PRODUCT_LIST_IMAGE':
	 $select_column_list .= 'p.products_image, p.products_image_hover,

 

 

This will bring out your hover images from the table under product listing page.

 

Now you need it the images display on your screen.

 

Open your catalog\includes\modules\product_listing.php

 

Find

 

case 'PRODUCT_LIST_IMAGE':
	 if (isset($HTTP_GET_VARS['manufacturers_id']) && tep_not_null($HTTP_GET_VARS['manufacturers_id'])) {
		 $prod_list_contents .= '	 <td align="center"><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></td>';
	 } else {
		 $prod_list_contents .= '	 <td align="center"><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></td>';
	 }
	 break;

 

and change to

case 'PRODUCT_LIST_IMAGE':
	 if (isset($HTTP_GET_VARS['manufacturers_id']) && tep_not_null($HTTP_GET_VARS['manufacturers_id'])) {
		 $prod_list_contents .= '	 <td align="center">

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

 </td>';
	 } else {
		 $prod_list_contents .= '	 <td align="center">


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

 <a href="' . tep_href_link(FILENAME_PRODUCT_INFO, ($cPath ? 'cPath=' . $cPath . '&' : '') . 'products_id=' . $listing['products_id']) . '">' . tep_image(DIR_WS_IMAGES . $listing['products_image_hover'], $listing['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a>




 </td>';
	 }
	 break;

it will bring up your hover images under the main images.

 

 

I didn't complete it, so you can play with the layer and apply different style in there.

 

 

ken

 

hi

thanks

 

so is that basically selecting the second image of any images ive uploaded for that particular product?

Link to comment
Share on other sites

Archived

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

×
×
  • Create New...