How to make the full image swap on rollover

[spacialek]

I am trying to make the product image thumbnails swap the full image on rollover. It's a default HikaShop feature, see an example here
http://www.demo.hikashop.com/index.php?option=com_hikashop&view=product&layout=show&Itemid=83&lang=en I tried by modifying the productdetails/tmpl/default.php file

I already tried by modifying the following page: components/com_virtuemart/productdetails/tmpl/default.php with this code (I have also given my full image the "main-img" id):

Code Select Expand

foreach ($this->product->images as $image) {
echo $image->displayMediaThumb('class="product-image" onmouseover="document.getElementById(\'main-img\').src = \'' . $image->product->file_url . '\'"',true,'class="modal"',true,true);
} ?>

The problem is that I don't know how to get the image file path in the mouseover event. 

Any ideas on how to achieve this?

Thanks!

[Studio 42]

it's very easy
in a addScriptDeclaration :

Code Select Expand

$('.additional-images .product-image').mouseover(function() {
himg = this.src ;
$('.main-image img').attr('src',himg );
});

[spacialek]

Hi Electrocity,

thanks for your answer!
I don't know where to place this script though 

here is the entire bloc concerning those images:

Code Select Expand

<?php // Product Main Image
if (!empty($this->product->images[0])) { ?>
<div class="main-image">
<?php echo $this->product->images[0]->displayMediaFull('class="product-image"',false,"class='modal'",true); ?>
</div>
<?php } // Product Main Image END ?>

<?php // Showing The Additional Images
if(!empty($this->product->images) && count($this->product->images)>1) { ?>
<div class="additional-images">
<?php // List all Images
foreach ($this->product->images as $image) {
echo $image->displayMediaThumb('class="product-image"',true,'class="modal"',true,true); //'class="modal"'
} ?>
</div>
<?php } // Showing The Additional Images END ?>

Can you specify where should I place the code you gave me?

Thanks!

[Studio 42]

The code you give is the HTML render.

My code is the javascript
look at default.php in the begin

Code Select Expand

$document->addScriptDeclaration("
jQuery(document).ready(function($) {

you must add this lines after this

[spacialek]

ok I see! it works great but it take the resized image source, so the rollover image is smaller than the full size image, is there a way to take the full size image source instead?

[spacialek]

I think I've found a solution, I took the href source of the modal class instead and it seems to work great!

Code Select Expand

$('.additional-images .modal').mouseover(function() {
himg = this.href ;
$('.main-image img').attr('src',himg );
});

Do you think there is better ways to achieve that?

[spacialek]

and thanks a lot for your help!!!!!!!!!!!!!!!!!!!!!     

[Studio 42]

The way you use the script is the best solution if you want the big image

[JdKock]

The code you give is the HTML render.

My code is the javascript
look at default.php in the begin

Code Select Expand

$document->addScriptDeclaration("
jQuery(document).ready(function($) {

you must add this lines after this

What code lines do i need to put after the jQuery line to get this to work ? I was also looking for some full image display with mouse over.

[spacialek]

What code lines do i need to put after the jQuery line to get this to work ? I was also looking for some full image display with mouse over.

You place the following code after the jQuery line:

Code Select Expand


$('.additional-images .modal').mouseover(function() {
himg = this.href ;
$('.main-image img').attr('src',himg );
});


[no_leaf]

spacialek you saved my day after 2  years