Author Topic: swap product thumbnail image in category/ product details layout page on hover  (Read 3370 times)

skhn123

  • Jr. Member
  • **
  • Posts: 72
  • Almost everything in virtuemart
  • VirtueMart Version: 2.6.6
Hello Everyone.
i am using latest VM and Joomla 2.5.17

I searched in forum and i have found these thread but none of these are of my use.
http://forum.virtuemart.net/index.php?topic=86854.0
http://forum.virtuemart.net/index.php?topic=95474.0
http://forum.virtuemart.net/index.php?topic=86854.0

i want to change the main product image to second (additional image) on mouseover. i want to implement this function in category layout and product details layout both.

Here is my code for image display in category page:
Code: [Select]
<a title="<?php echo $product->product_name ?>" rel="vm-additional-images" href="<?php echo $product->link?>">

<?php
echo $product->images[0]->displayMediaThumb('class="browseProductImage"' false); ?>

</a>

And these are codes for product details page:
Code: [Select]
<div class="width46 floatleft">
<?php if (!empty($this->product->images)) {
$image $this->product->images[0];
?>

<div class="main-image">
<?php
echo $image->displayMediaFull("",true,"rel='vm-additional-images'");
?>

<div class="clear"></div>
</div>

<?php
$count_images count ($this->product->images);
if ($count_images 1) { ?>

    <div class="additional-images">
<?php
for ($i 0$i $count_images$i++) {
$image $this->product->images[$i];
?>

            <?php
                //echo $image->displayMediaFull('class="product-image" style="cursor: pointer"',false,"");
echo $image->displayMediaFull("",true,"rel='vm-additional-images'");
            ?>

<?php } ?>
        <div class="clear"></div>
    </div>
<?php } ?>
</div>

Any help??

Thanks.

skhn123

  • Jr. Member
  • **
  • Posts: 72
  • Almost everything in virtuemart
  • VirtueMart Version: 2.6.6
Please anyone help me on this.

GJC Web Design

  • 3rd party VirtueMart Developer
  • Super Hero
  • *
  • Posts: 7513
  • Virtuemart, Joomla & php developer
    • GJC Web Design
  • VirtueMart Version: 2.6.22 & 3.2.2
Doubtful you will get an answer - this isn't a bug or a configuration issue etc.. you are asking someone to come up with bespoke code for your requirements...
It has to be coded and tested etc etc ...
GJC Web Design
VirtueMart and Joomla Developers - php developers http://www.gjcwebdesign.com
VM3 AusPost Shipping Plugin - e-go Shipping Plugin - VM3 Postcode Shipping Plugin - Radius Shipping Plugin - VM3 NZ Post Shipping Plugin - AusPost Estimator
Samport Payment Plugin - EcomMerchant Payment Plugin - ccBill payment Plugin
VM2 Product Lock Extension - VM2 Preconfig Adresses Extension - TaxCloud USA Taxes Plugin - Virtuemart  Product Review Component
http://extensions.joomla.org/profile/profile/details/67210
Contact for any VirtueMart or Joomla development & customisation

skhn123

  • Jr. Member
  • **
  • Posts: 72
  • Almost everything in virtuemart
  • VirtueMart Version: 2.6.6
I know that #GJC Web Design. thats why i am asking if someone has done it before, so they can help me out. i have seen some examples but those are for older version i and dont know how to use that in new VM version.

if you have any idea please do share. it will be very helpful to me cause am stuck right now.

thanks
Sadique Khan

GJC Web Design

  • 3rd party VirtueMart Developer
  • Super Hero
  • *
  • Posts: 7513
  • Virtuemart, Joomla & php developer
    • GJC Web Design
  • VirtueMart Version: 2.6.22 & 3.2.2
Basically get the second image in the template - put it in a div - probably behind the current image and swap their visibility on mouse over
GJC Web Design
VirtueMart and Joomla Developers - php developers http://www.gjcwebdesign.com
VM3 AusPost Shipping Plugin - e-go Shipping Plugin - VM3 Postcode Shipping Plugin - Radius Shipping Plugin - VM3 NZ Post Shipping Plugin - AusPost Estimator
Samport Payment Plugin - EcomMerchant Payment Plugin - ccBill payment Plugin
VM2 Product Lock Extension - VM2 Preconfig Adresses Extension - TaxCloud USA Taxes Plugin - Virtuemart  Product Review Component
http://extensions.joomla.org/profile/profile/details/67210
Contact for any VirtueMart or Joomla development & customisation

skhn123

  • Jr. Member
  • **
  • Posts: 72
  • Almost everything in virtuemart
  • VirtueMart Version: 2.6.6
Thanks for such quick reply but that's the major part of my problem that how to call 2nd image of a product.

GJC Web Design

  • 3rd party VirtueMart Developer
  • Super Hero
  • *
  • Posts: 7513
  • Virtuemart, Joomla & php developer
    • GJC Web Design
  • VirtueMart Version: 2.6.22 & 3.2.2
foreach($this->product->images as $img) {
      $newimg[] = $img->file_url;
   }
   print 'Debug Line '.__LINE__.' $newimg <pre>'; print_r ($newimg); print "</pre><br />\n";

[attachment cleanup by admin]
GJC Web Design
VirtueMart and Joomla Developers - php developers http://www.gjcwebdesign.com
VM3 AusPost Shipping Plugin - e-go Shipping Plugin - VM3 Postcode Shipping Plugin - Radius Shipping Plugin - VM3 NZ Post Shipping Plugin - AusPost Estimator
Samport Payment Plugin - EcomMerchant Payment Plugin - ccBill payment Plugin
VM2 Product Lock Extension - VM2 Preconfig Adresses Extension - TaxCloud USA Taxes Plugin - Virtuemart  Product Review Component
http://extensions.joomla.org/profile/profile/details/67210
Contact for any VirtueMart or Joomla development & customisation

skhn123

  • Jr. Member
  • **
  • Posts: 72
  • Almost everything in virtuemart
  • VirtueMart Version: 2.6.6
can you tell me where exactly you put these code in default.php  :-[

i put it in my product details > default.php

right after these lines:

Code: [Select]
<div class="width46 floatleft">
<?php if (!empty($this->product->images)) {
$image $this->product->images[0];
?>

<div class="main-image">
<?php
echo $image->displayMediaFull("",true,"rel='vm-additional-images'");
foreach($this->product->images as $img) {
      
$newimg[] = $img->file_url;
   }
   print 
'Debug Line '.__LINE__.' $newimg <pre>'print_r ($newimg); print "</pre><br />\n";
?>

<div class="clear"></div>
</div>

but its not working  :(

GJC Web Design

  • 3rd party VirtueMart Developer
  • Super Hero
  • *
  • Posts: 7513
  • Virtuemart, Joomla & php developer
    • GJC Web Design
  • VirtueMart Version: 2.6.22 & 3.2.2
components/com_virtuemart/views/productdetails/tmpl/default_images.php - your obviously NOT using the "latest" vm as you state

will work anywhere in that file as it is a $this

must work in yours as $this->product->images is just above it - unless it's empty
GJC Web Design
VirtueMart and Joomla Developers - php developers http://www.gjcwebdesign.com
VM3 AusPost Shipping Plugin - e-go Shipping Plugin - VM3 Postcode Shipping Plugin - Radius Shipping Plugin - VM3 NZ Post Shipping Plugin - AusPost Estimator
Samport Payment Plugin - EcomMerchant Payment Plugin - ccBill payment Plugin
VM2 Product Lock Extension - VM2 Preconfig Adresses Extension - TaxCloud USA Taxes Plugin - Virtuemart  Product Review Component
http://extensions.joomla.org/profile/profile/details/67210
Contact for any VirtueMart or Joomla development & customisation

skhn123

  • Jr. Member
  • **
  • Posts: 72
  • Almost everything in virtuemart
  • VirtueMart Version: 2.6.6
Actually my template has an override of components/com_virtuemart/views/productdetails/tmpl/default.php and it dont include codes from default_images.php it has code for product image in itself.

i have attached my default.php file as txt file. you can take a look in it if its ok.

[attachment cleanup by admin]

GJC Web Design

  • 3rd party VirtueMart Developer
  • Super Hero
  • *
  • Posts: 7513
  • Virtuemart, Joomla & php developer
    • GJC Web Design
  • VirtueMart Version: 2.6.22 & 3.2.2
see no reason why it wouldn't work - does on mine
GJC Web Design
VirtueMart and Joomla Developers - php developers http://www.gjcwebdesign.com
VM3 AusPost Shipping Plugin - e-go Shipping Plugin - VM3 Postcode Shipping Plugin - Radius Shipping Plugin - VM3 NZ Post Shipping Plugin - AusPost Estimator
Samport Payment Plugin - EcomMerchant Payment Plugin - ccBill payment Plugin
VM2 Product Lock Extension - VM2 Preconfig Adresses Extension - TaxCloud USA Taxes Plugin - Virtuemart  Product Review Component
http://extensions.joomla.org/profile/profile/details/67210
Contact for any VirtueMart or Joomla development & customisation

skhn123

  • Jr. Member
  • **
  • Posts: 72
  • Almost everything in virtuemart
  • VirtueMart Version: 2.6.6
its okey now. its working. thanks for your help.  ;D

bart1983

  • Beginner
  • *
  • Posts: 4
I have quite similar problem.
On VM 3.0.18.7
I need to put another one picture but in category view (two pictures for one product in category)
The method described above works in product details etc (I tested it), but when I implement it in category view I got error with calling $this, maybe someone did the trick and would be so kind to answer for that :).
There was one topic about that (I found when I was searching), but somebody made changes in core file components/com_virtuemart/cateogry/view.html.php (and I try to avoid that).
OK, I keep searching, and if I find something, will write.
Thanks in advance.