Make a zoom icon hover over product image on mouse over

[OSC-Sevilla]

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.

[OSC-Sevilla]

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

[p2409]

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

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

[OSC-Sevilla]

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

[OSC-Sevilla]

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

[OSC-Sevilla]

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;

 

 

 

}

?>

[OSC-Sevilla]

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