Author Topic: How to: category page use fancybox popup on image  (Read 1102 times)

Zegenrijk

  • Beginner
  • *
  • Posts: 16
How to: category page use fancybox popup on image
« on: February 22, 2016, 12:56:07 pm »
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

  • Jr. Member
  • **
  • Posts: 410
Re: How to: category page use fancybox popup on image
« Reply #1 on: February 22, 2016, 13:32:03 pm »
If you need only 1 image:

Change this:

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

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

  • Beginner
  • *
  • Posts: 16
Re: How to: category page use fancybox popup on image
« Reply #2 on: February 24, 2016, 14:47:37 pm »
Thank you!

PostHistorie.nl

  • Beginner
  • *
  • Posts: 34
Re: How to: category page use fancybox popup on image
« Reply #3 on: August 08, 2018, 15:23:41 pm »
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.