MouseOver Effect For Product Images

Hi There

Is there any option to create move over effect on product images. Means we dont have to click on the image to see large image rather then when we point the mouse over the image it shows the large image instead of clicking it. Pls help regarding this.

Thanks Nicolas. I tried but its still not working even after changing the code its still showing large pic after clicking. Can you help?

i have updated the file "show_block_img" in my frontend template (i applied this on the template i am using). But still image is getting big after clicking on it not on the "Mouseover" . Following is the entire code of the changed "show_block_img" file. Please suggest if i am doing some thing wrong. Also can i have this effect on product listing page as well



<?php
/**
* @package HikaShop for Joomla!
* @version 1.5.6
* @author hikashop.com
* @copyright (C) 2010-2012 HIKARI SOFTWARE. All rights reserved.
* @license GNU/GPLv3 www.gnu.org/licenses/gpl-3.0.html
*/
defined('_JEXEC') or die('Restricted access');
?>
<div id="hikashop_product_image_main" >
<div id="hikashop_main_image_div" class="hikashop_main_image_div">
<?php
if(!empty ($this->element->images)){
$image = reset($this->element->images);
}
$height = $this->config->get('product_image_y',$this->config->get('thumbnail_y'));
$width = $this->config->get('product_image_x',$this->config->get('thumbnail_x'));
if (!$this->config->get('thumbnail')) {
if(!empty ($this->element->images)){
echo '<img src="' . $this->image->uploadFolder_url . $image->file_path . '" alt="' . $image->file_name . '" id="hikashop_main_image" style="margin-top:10px;margin-bottom:10px;display:inline-block;vertical-align:middle" />';
}
} else {
$style = '';
if (!empty ($this->element->images) && count($this->element->images) > 1) {
if (!empty ($height)) {
$style = ' style="height:' . ($height +5) . 'px;"';
}
}
?>
<div class="hikashop_product_main_image_thumb" id="hikashop_main_image_thumb_div" <?php echo $style;?> >


<?php echo $this->image->display(@$image->file_path,true,@$image->file_name,'id="hikashop_main_image" style="margin-top:10px;margin-bottom:10px;display:inline-block;vertical-align:middle"','id="hikashop_main_image_link" onhover="SqueezeBox.fromElement(this,{parse: \'rel\'});return false;" ', $width, $height); ?>


</div>
<?php
}
?>
</div>
<div id="hikashop_small_image_div" class="hikashop_small_image_div">
<?php
if (!empty ($this->element->images) && count($this->element->images) > 1) {
foreach ($this->element->images as $image) {
echo $this->image->display($image->file_path, 'hikashop_main_image', $image->file_name, 'class="hikashop_child_image"','', $width, $height);
}
}
?>
</div>
</div

Gr8 its working perfect on the product page thanks.... Gr8 Support from Gr8 Product.....

Hello i have change this and work perfect but can i do this also on the next page www.universal-gemstone.com/index.php/com...cedoon.html?Itemid=1
to "onmouseover" where do i have to change it and into what?

So fare its work ok , only the half of the screen become gray so i tried just to change the mouseover into mouseclick and its works perfect

Thanks.

I will leave it with the mouseclick that work ok, with the mouseover you can get greasy like mentioned before in this topic.

so thanks for the help

Hello

Can anybody tell me how to switch off this mouseover thumbnails effect on product page? I mean that when i move mouse over thumbnail image (orientation: portrait) the image hides away thumbnails at the bottom.. <<<< Look at pic 1

it came after i tried to solve the problem on the second image (Product page) whereby i changed the configuration->Display->css
.hikashop_product_main_image_thumb{
margin-bottom:-100px;

and completely another question about this MouseOver Effect...
changing the php code in: listing_img_title" of the view "product". doesn't for some reason work and i noticed this php code is much longer there than written above...

And thank you soo much hikashop team.. love the product - learning every day

Jerome wrote: Hi,
There is in HikaShop an option to set the image size for the product page.
These dimensions (height and width) creates some kind of virtual box where the images would be displayed. So the box will always have the same size.
Regards,

Hi,

Is there a way to add this effect to the carousel? The only thing is, I don't want the image to be maximized. I just want to be a little bigger when mouse hovers on it. I think this is a feature the carousel should have by default. But what can I do about it now that it doesn't have it as a default feature. I really need it. Please HELP!!!

Hi,

I think that this can be done by using some CSS code customization like :

.YourCarouselClass img:hover {
width: 300px;
}

I did this:
.hikashop_main_carousel_divimg:hover {
width: 300px;
}
.hikashop_main_carousel_div ul li{

padding: 0px !important;
background: none !important;
}
.... is it correct?! because I didn't get any result.. I found one CAROUSEL in my CSS and I added to it. I think I did it wrong because I got no results. Help me out please!

You will have to apply it on a parent div:
.hikashop_main_carousel_div .hikashop_product_image:hover{ width: 300px; }[code]
.hikashop_main_carousel_div .hikashop_product_image:hover{
width: 300px;
}

Dear Xavier.. I did as you said and all I get now is a movement to right which is not correct as you can see in this link : 212.113.141.199/~pubnew/newcatalog/index.php/fa/ ... what I'm looking for is a kind of effect which won't move the items but just enlarges the images a bit.. right where they are... Thanks for the help you've given me so far.. It would be great if you tell me where my flaw is... I'll provide the CSS as well..


.hikashop_main_carousel_div .hikashop_product_image:hover{width: 300px; }
.hikashop_main_carousel_div ul li{

padding: 0px !important;
background: none !important;
}
.hikashop_main_carousel_div .hikashop_product_image:hover{width: 300px;}