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!
it's very easy
in a addScriptDeclaration :
$('.additional-images .product-image').mouseover(function() {
himg = this.src ;
$('.main-image img').attr('src',himg );
});
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!
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
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?
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?
and thanks a lot for your help!!!!!!!!!!!!!!!!!!!!! :D :D :D
The way you use the script is the best solution if you want the big image
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.
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 );
});
spacialek you saved my day after 2 years