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.

Hi,

You can change the line:
to:
in the file show_block_img of your front end template via the menu Display->Views in order to do that.

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

Please make sure that you do the change for the correct template.

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

In my previous code, it should be "onmouseover" instead of "onhover"

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?

Hi,

Here is a thread which talks about that for listings:
www.hikashop.com/forum/4-how-to/49351-sh...r.html?lang=en#49421
In your case, you're apparently using the listing_img_desc item box layout and not the default listing_img_title mentioned in that post but the code to use should be pretty similar.

Note though that the code of the image display changed a bit since then so it might require some modification. Let us know if it doesn't work and what and how it doesn't work.

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.

Hi,

I think this is a problem with the Joomla "modal" library and your template.

Regards,

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

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.

If you want, you can override the view "product | show_block_img" to change how the images are displayed in the product page.
You will be able to change mostly everything.
If you are using HikaShop 2.2.2 (that I will recommend you), the popup system and the mouse hover have been moved into the view instead of using a specific function in a class (that was harder to override).
So HikaShop 2.2.2 is easier for override the images in the product page.

Regards,

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,

gosh, it really worked, thank you so much Jerome

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 :

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