Author Topic: How to make the full image swap on rollover  (Read 6110 times)

spacialek

  • Jr. Member
  • **
  • Posts: 56
    • Xaomé - Intégration Joomla
How to make the full image swap on rollover
« on: December 27, 2011, 04:10:46 am »
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]
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

  • Contributing Developer
  • Sr. Member
  • *
  • Posts: 4022
  • Joomla & Virtuemart developper
    • Studio 42 - Virtuemart & Joomla extentions
  • VirtueMart Version: 2.6 & 3
Re: How to make the full image swap on rollover
« Reply #1 on: December 27, 2011, 08:30:06 am »
it's very easy
in a addScriptDeclaration :
Code: [Select]
$('.additional-images .product-image').mouseover(function() {
himg = this.src ;
$('.main-image img').attr('src',himg );
});

spacialek

  • Jr. Member
  • **
  • Posts: 56
    • Xaomé - Intégration Joomla
Re: How to make the full image swap on rollover
« Reply #2 on: December 27, 2011, 08:51:29 am »
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:

Code: [Select]
<?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

  • Contributing Developer
  • Sr. Member
  • *
  • Posts: 4022
  • Joomla & Virtuemart developper
    • Studio 42 - Virtuemart & Joomla extentions
  • VirtueMart Version: 2.6 & 3
Re: How to make the full image swap on rollover
« Reply #3 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

Code: [Select]
$document->addScriptDeclaration("
jQuery(document).ready(function($) {

you must add this lines after this

spacialek

  • Jr. Member
  • **
  • Posts: 56
    • Xaomé - Intégration Joomla
Re: How to make the full image swap on rollover
« Reply #4 on: December 27, 2011, 09:20:02 am »
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

  • Jr. Member
  • **
  • Posts: 56
    • Xaomé - Intégration Joomla
Re: How to make the full image swap on rollover
« Reply #5 on: December 27, 2011, 09:31:04 am »
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]
$('.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

  • Jr. Member
  • **
  • Posts: 56
    • Xaomé - Intégration Joomla
Re: How to make the full image swap on rollover
« Reply #6 on: December 27, 2011, 09:34:15 am »
and thanks a lot for your help!!!!!!!!!!!!!!!!!!!!!  :D  :D  :D

Studio 42

  • Contributing Developer
  • Sr. Member
  • *
  • Posts: 4022
  • Joomla & Virtuemart developper
    • Studio 42 - Virtuemart & Joomla extentions
  • VirtueMart Version: 2.6 & 3
Re: How to make the full image swap on rollover
« Reply #7 on: December 27, 2011, 11:51:02 am »
The way you use the script is the best solution if you want the big image

JdKock

  • Beginner
  • *
  • Posts: 35
Re: How to make the full image swap on rollover
« Reply #8 on: December 27, 2011, 14:47:46 pm »
The code you give is the HTML render.

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

Code: [Select]
$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

  • Jr. Member
  • **
  • Posts: 56
    • Xaomé - Intégration Joomla
Re: How to make the full image swap on rollover
« Reply #9 on: December 27, 2011, 18:27:44 pm »
Quote
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]
$('.additional-images .modal').mouseover(function() {
himg = this.href ;
$('.main-image img').attr('src',himg );
});

no_leaf

  • Beginner
  • *
  • Posts: 6
Re: How to make the full image swap on rollover
« Reply #10 on: January 21, 2013, 23:35:02 pm »
spacialek you saved my day after 2  years