News:

You may pay someone to create your store, or you visit our seminar and become a professional yourself with the silver certification

Main Menu

How to make the full image swap on rollover

Started by spacialek, December 27, 2011, 04:10:46 AM

Previous topic - Next topic

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):

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 :
$('.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  ;D

here is the entire bloc concerning those images:

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

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

$('.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!!!!!!!!!!!!!!!!!!!!!  :D  :D  :D

Studio 42

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

JdKock

Quote from: Electrocity on December 27, 2011, 09:14:53 AM
The code you give is the HTML render.

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

$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

QuoteWhat 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:


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

no_leaf