Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Make a zoom icon hover over product image on mouse over


OSC-Sevilla

Recommended Posts

Does anyone know how to make a zoom icon hover over the prduct image on mouse over.

 

I have attached a screen shot of an exmaple i have seen and the .png magnifing glass that will be used on mouse over.

 

Many many thanks.

post-268503-0-17521000-1318233454_thumb.jpg

post-268503-0-18699000-1318233473.png

Link to comment
Share on other sites

Does anyone know how to make a zoom icon hover over the prduct image on mouse over.

 

I have attached a screen shot of an exmaple i have seen and the .png magnifing glass that will be used on mouse over.

 

Many many thanks.

 

 

BUMP!??

Link to comment
Share on other sites

Check out http://www.tripwiremagazine.com/2011/10/jquery-image-zoom.html

I use jqzoom on my site it's awesome. You will need a bit of PHP coding (not copy/pasting) to get it going. No, the fake pic and the rack is not enough for me to write it for you.

OSC User Definitions

"I can add modules to OSC" = I can search, cut and paste. But not well, or I wouldn't be here.

"I start my posting with 'works like a charm' = I'm letting you down gently, nothing works and I have no idea why

"I finish postings with "plzzzz....hlp" = My installation is buggered and I know I'm going to have to pay someone, but I really, really don't want to.

Link to comment
Share on other sites

Thanks Pete,

 

I dont actually need a zoom viewer, simply the icon that displays on mouse over - im using the standard 2.3.1 lightbox gallery - where on that site you linked me can i find this info?...

 

Many thanks

Link to comment
Share on other sites

  • 1 month later...

OK I have almost got it. but not quite....

 

1. CSS/STYLE.CSS:

ADD: .wrapper_pic_zoom {background:url(../images/icons/pic_zoom.png) 50% 50% no-repeat;display:inline-block;position:relative;}

 

2. EXT/JS/js.js:

ADD: $(function(){

var keeper=$('.wrapper_pic_div'),

zoomPic=$('.wrapper_pic_zoom, ').css({opacity:0})

keeper

.bind('mouseenter',function(){

zoomPic

.stop()

.animate({opacity:1})

 

})

.bind('mouseleave',function(){

zoomPic

.stop()

.animate({opacity:0})

})

 

})

 

3. IMAGES/ICON

ADD: see image attached

 

4. CATALOG/products_info.php

 

I´m using an OPI Image contrib, but it fits in around here:

 

<?php

 

$pi_counter = 0;

foreach ($products_images as $pi) {

$pi_counter++;

$pi_entry = ' <li class="wrapper_pic_div"><a href="';

$pi_entry .= tep_href_link(DIR_WS_IMAGES . 'thumbs/def/large/' . $pi);

$pi_entry .= '" target="_blank" rel="fancybox" title="'.(TEXT_CLICK_TO_ENLARGE_1).'" style="width:'.(PROD_INFO_IMAGE_WIDTH).'px;height:'.(PROD_INFO_IMAGE_HEIGHT).'px;"><div class="wrapper_pic_zoom" style="width:'.(PROD_INFO_IMAGE_WIDTH).'px;height:'.(PROD_INFO_IMAGE_HEIGHT).'px;"></div>'

. tep_image(DIR_WS_IMAGES . 'thumbs/def/display/' . $pi, '', (PROD_INFO_IMAGE_WIDTH), (PROD_INFO_IMAGE_HEIGHT), ' style="width:'.(PROD_INFO_IMAGE_WIDTH).'px;height:'.(PROD_INFO_IMAGE_HEIGHT).'px;"') . '</a>';

$pi_entry .= '</li>';

echo $pi_entry;

}

?>

 

THE RESULT: well its almost ok except for the fact it forces the main imge over to the side.

 

CAN ANYONE HELP? - - prob a simple fix but im stumped!

 

Thanks

Link to comment
Share on other sites

got it! as per the above but-

 

my css looks like this:

 

.wrapper_pic_div {margin:auto; border:0px solid #e3e3e3; position:relative; display:block;}

.wrapper_pic_div a:hover {background:url(../images/icons/pic_zoom.png) 50% 50% no-repeat;padding:0; cursor:pointer; text-decoration:none; border:1px solid #056eb4; width:189px!important; height:151px!important;}

.wrapper_pic_div a {padding:0; cursor:pointer; text-decoration:none; border:1px solid #e7e6e6; width:189px!important; height:151px!important;}

.wrapper_pic_div img {position:relative;margin:0px; border:1px solid #FFF; margin-top:-149px; z-index:5;}

.wrapper_pic_zoom {background:url(../images/icons/pic_zoom.png) 50% 50% no-repeat;display:inline-block;position:relative; z-index:999;}

Link to comment
Share on other sites

make this correctioin to the products_info.php;

 

<?php

 

$pi_counter = 0;

foreach ($products_images as $pi) {

$pi_counter++;

$pi_entry = ' <li class="wrapper_pic_div"><a href="';

$pi_entry .= tep_href_link(DIR_WS_IMAGES . 'thumbs/def/large/' . $pi);

$pi_entry .= '" target="_blank" rel="fancybox" title="'.(TEXT_CLICK_TO_ENLARGE_1).'" style="width:'.(PROD_INFO_IMAGE_WIDTH).'px;height:'.(PROD_INFO_IMAGE_HEIGHT).'px;">'

 

 

. tep_image(DIR_WS_IMAGES . 'thumbs/def/display/' . $pi, '', (PROD_INFO_IMAGE_WIDTH), (PROD_INFO_IMAGE_HEIGHT), ' style="width:'.(PROD_INFO_IMAGE_WIDTH).'px;height:'.(PROD_INFO_IMAGE_HEIGHT).'px;"') . '<span class="wrapper_pic_zoom" style="width:'.(PROD_INFO_IMAGE_WIDTH).'px;height:'.(PROD_INFO_IMAGE_HEIGHT).'px;"></span></a>';

$pi_entry .= '</li>';

echo $pi_entry;

 

 

 

}

?>

Link to comment
Share on other sites

CSS:

 

.wrapper_pic_div {margin:auto; border:0px solid #e3e3e3; position:relative; display:block;}

.wrapper_pic_div a:hover {background:url(../images/icons/pic_zoom.png) 50% 50% no-repeat;padding:0; cursor:pointer; text-decoration:none; border:1px solid #056eb4; width:189px!important; height:151px!important;}

.wrapper_pic_div a {padding:0; cursor:pointer; text-decoration:none; border:1px solid #e7e6e6; width:189px!important; height:151px!important;}

.wrapper_pic_div img {position:absolute;margin:0px; border:1px solid #FFF;}

.wrapper_pic_zoom {background:url(../images/icons/pic_zoom.png) 50% 50% no-repeat;display:inline-block;position:relative;}

Link to comment
Share on other sites

Archived

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

×
×
  • Create New...