How to: category page use fancybox popup on image

[Zegenrijk]

I want to use on a category page on the image the fancybox popup (and disable the link to the detailpage). In sublayouts/products.php i found this code beneath. By removing the first and last line there is no link anymore to the detailpage. That's good. But which code i must use to get a fancybox popup on the image?


      <a title="<?php echo $product->product_name ?>" href="<?php echo $product->link.$ItemidStr; ?>">
                  <?php
                  echo $product->images[0]->displayMediaThumb('class="browseProductImage"', false);
                  ?>
               </a>

VM 3.0.12

[Ghost]

If you need only 1 image:

Change this:

Code Select Expand

<a title="<?php echo $product->product_name ?>" href="<?php echo $product->link.$ItemidStr; ?>"> to this:

Code Select Expand

<a rel="vm-additional-images" title="<?php echo $product->product_name ?>" href="<?php echo $product->images[0]->file_url ?>">

And add this somewhere on the page. Make sure it's outside of product foreach loop:

Code Select Expand

  if(VmConfig::get('usefancy',1)){
$imageJS = '
jQuery(document).ready(function() {
Virtuemart.updateImageEventListeners()
});
Virtuemart.updateImageEventListeners = function() {
jQuery("a[rel=vm-additional-images]").fancybox({
"titlePosition" : "inside",
"transitionIn" : "elastic",
"transitionOut" : "elastic"
});}';
} else {
$imageJS = '
jQuery(document).ready(function() {
Virtuemart.updateImageEventListeners()
});
Virtuemart.updateImageEventListeners = function() {
jQuery("a[rel=vm-additional-images]").facebox();
var imgtitle = jQuery("span.vm-img-desc").text();
jQuery("#facebox span").html(imgtitle);
}
';
}

vmJsApi::addJScript('imagepopup',$imageJS);

If you need more images like on product details page, examine default_images.php and default_images_additional.php layouts of product details.

[Zegenrijk]

Thank you!

[PostHistorie.nl]

Sorry to bump this old post, but I just want to point out that that Ghost's answer is amazing! I love it, thanks!!
After a long search I found this forum post, and my shop is now 10x better because of this little feature!

Because I use the default VirtueMart VMBEEZ3 template, I wanted to ask/make a case for this to be the default setting. How could a shop not benefit from these awesome item image fancybox popups: it makes the shop look much more professional and makes browsing the inventory much easier.