News:

You may pay someone to create your store, or you visit our seminar and become a professional yourself with the silver certification

Main Menu

How to: category page use fancybox popup on image

Started by Zegenrijk, February 22, 2016, 12:56:07 PM

Previous topic - Next topic

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

#1
If you need only 1 image:

Change this:

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

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

  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.


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.