swap product thumbnail image in category/ product details layout page on hover

Started by skhn123, April 19, 2014, 09:26:45 AM

Previous topic - Next topic

skhn123

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


GJC Web Design

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 https://www.gjcwebdesign.com
VM4 AusPost Shipping Plugin - e-go Shipping Plugin - VM4 Postcode Shipping Plugin - Radius Shipping Plugin - VM4 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
https://extensions.joomla.org/profile/profile/details/67210
Contact for any VirtueMart or Joomla development & customisation

skhn123

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

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 https://www.gjcwebdesign.com
VM4 AusPost Shipping Plugin - e-go Shipping Plugin - VM4 Postcode Shipping Plugin - Radius Shipping Plugin - VM4 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
https://extensions.joomla.org/profile/profile/details/67210
Contact for any VirtueMart or Joomla development & customisation

skhn123

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

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 https://www.gjcwebdesign.com
VM4 AusPost Shipping Plugin - e-go Shipping Plugin - VM4 Postcode Shipping Plugin - Radius Shipping Plugin - VM4 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
https://extensions.joomla.org/profile/profile/details/67210
Contact for any VirtueMart or Joomla development & customisation

skhn123

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:

<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

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 https://www.gjcwebdesign.com
VM4 AusPost Shipping Plugin - e-go Shipping Plugin - VM4 Postcode Shipping Plugin - Radius Shipping Plugin - VM4 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
https://extensions.joomla.org/profile/profile/details/67210
Contact for any VirtueMart or Joomla development & customisation

skhn123

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

GJC Web Design
VirtueMart and Joomla Developers - php developers https://www.gjcwebdesign.com
VM4 AusPost Shipping Plugin - e-go Shipping Plugin - VM4 Postcode Shipping Plugin - Radius Shipping Plugin - VM4 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
https://extensions.joomla.org/profile/profile/details/67210
Contact for any VirtueMart or Joomla development & customisation

skhn123


bart1983

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.