TUTORIAL VIRTUEMART CLASSIC GALLERY, AND NOT CLOUDZOOM

TUTORIAL 2 ALTERNATIVE GALLERY

you can also use plugin Flexible Zoom Effect on Product Page for Virtuemart www.flexiblewebdesign.com

I will explain how to modify the template to avoid using CloudZoom, and have the Flexible Zoom Effect on Product Page

1 - Install and activate plugin
2 - copy plugin provided 2 php files in /templates/YOUR_TEMPLATE/html/com_virtuemart/productdetails/
3 - in themler (product details) delete imageproduct and delete imagethumb:
4 - in themler (product details) add custom cms code below

    <?php // Check to ensure this file is included in Joomla!
defined('_JEXEC') or die('Restricted access..');
jimport( 'joomla.environment.response' );


$plugin=JPluginHelper::getPlugin('system','flexibleZoomEffect');
$params=new JRegistry($plugin->params);
?>
<!-- Flexible Web Design Zoom Effect START -->
<?php // Product Main Image
if (!empty($this->product->images[0]->virtuemart_media_id)) { ?>


<div class="flexible-main-image"> <a class="fancybox2" href="<?php echo JURI::root().$this->product->images[0]->file_url;?>" title="<?php echo $this->product->product_name ?>" > <img src="<?php echo JURI::root().$this->product->images[0]->file_url;?>" id="FlexibleMainImage" <?php if (count($this->product->images) > 1 ) echo 'class="FlexibleGallery"'; ?> data-zoom-image="<?php echo JURI::root().$this->product->images[0]->file_url;?>" alt="<?php echo $this->product->product_name ?>" /> </a> </div>
<?php if ($params->get('enlarge_show')) { ?>
<a id="flexible_enlarge" href="javascript:void(0);"><?php echo $params->get('enlarge_translate'); ?></a>
<?php } ?>
<?php } else { // or show the "picture not available" image
        echo $this->product->images[0]->displayMediaFull('class="medium-image" id="medium-image"', false, "class='modal'", true);
    } // Product Main Image END ?>
<?php // Showing The Additional Images
if(!empty($this->product->images) && count($this->product->images)>1) { 
    if (count($this->product->images) > $params->get('add_visible')) { 
    // if additional images are greater than "visible thumbnail" number you set through module parameters, then below will be visible   
?>
<div id="flexible-zoom-additionalImagesWrap" class="flexible-zoom-additionalImagesWrap">
  <div style="cursor: pointer;" class="more-views-arrow prev">&nbsp;</div>
  <div class="flexible-zoom-additionalImages">
    <ul id="FlexibleAdditionalGallery" class="additionalImagesslider" style="position: relative;">
      <?php // List all Images
$i = 0;
foreach ($this->product->images as $image) {
$ImageId = $i++;
?>
      <li> <a href="<?php echo JURI::root().$this->product->images[$ImageId]->file_url;?>" rel="<?php echo preg_replace('/[^A-Za-z0-9\-]/', '', $this->product->images[$ImageId]->file_meta)?>" title="<?php echo $this->product->images[$ImageId]->file_description;?>" data-image="<?php echo JURI::root().$this->product->images[$ImageId]->file_url;?>" data-zoom-image="<?php echo JURI::root().$this->product->images[$ImageId]->file_url;?>" class="<?php if ($i=='1') echo 'active';?>"> <span><?php echo $this->product->images[$ImageId]->displayMediaThumb('',false,"class=''",true,false,false,0,0); ?>
        <?php if ($params->get('show_subtitle') and !empty($this->product->images[$ImageId]->file_description)) { ?>
        <div class="subTitle"><?php echo $this->product->images[$ImageId]->file_description;?></div>
        <?php } ?>
        </span> </a> </li>
      <?php } ?>
    </ul>
  </div>
  <div style="cursor: pointer;" class="more-views-arrow next">&nbsp;</div>
</div>
<?php   
    } else {  
    // if additional images are less than "visible thumbnails" you set through module parameters, then below will be visible
?>
<div id="additionalImagesNoScroll">
  <ul id="FlexibleAdditionalGallery" class="additionalImagesslider">
    <?php // List all Images
$i = 0;
foreach ($this->product->images as $image) {
$ImageId = $i++;
?>
    <li> <a href="<?php echo JURI::root().$this->product->images[$ImageId]->file_url;?>" rel="<?php echo preg_replace('/[^A-Za-z0-9\-]/', '', $this->product->images[$ImageId]->file_meta)?>" title="<?php echo $this->product->images[$ImageId]->file_description;?>" data-image="<?php echo JURI::root().$this->product->images[$ImageId]->file_url;?>" data-zoom-image="<?php echo JURI::root().$this->product->images[$ImageId]->file_url;?>" class="<?php if ($i=='1') echo 'active';?>"> <span><?php echo $this->product->images[$ImageId]->displayMediaThumb('',false,"class=''",true,false,false,0,0); ?>
      <?php if ($params->get('show_subtitle') and !empty($this->product->images[$ImageId]->file_description)) { ?>
      <div class="subTitle"><?php echo $this->product->images[$ImageId]->file_description;?></div>
      <?php } ?>
      </span> </a> </li>
    <?php   } ?>
  </ul>
</div>
<?php }
     } // Showing The Additional Images END 
?>
<!-- Flexible Web Design Zoom Effect END -->

Last edited 25 February 2017 by Giuma

themler it's very impressive, execept for cloud zoom :

I will explain how to modify the template to avoid using CloudZoom, and have the CLASSIC VIRTUEMART GALLERY

1 - OPEN VIRUEMART ZIP component, search for default_images.php and default_images_additional.php
2 - copy this 2 php files in /templates/YOUR_TEMPLATE/html/com_virtuemart/productdetails/
3 - in themler (product details) delete imageproduct and delete imagethumb:
4 - in themler (product details) add custom cms code below

    <?php?>     

vmJsApi::loadPopUpLib();
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"
  });
  jQuery(".additional-images a.product-image.image-0").removeAttr("rel");
  jQuery(".additional-images img.product-image").click(function() {
      jQuery(".additional-images a.product-image").attr("rel","vm-additional-images" );
      jQuery(this).parent().children("a.product-image").removeAttr("rel");
      var src = jQuery(this).parent().children("a.product-image").attr("href");
      jQuery(".main-image img").attr("src",src);
      jQuery(".main-image img").attr("alt",this.alt );
      jQuery(".main-image a").attr("href",src );
      jQuery(".main-image a").attr("title",this.alt );
      jQuery(".main-image .vm-img-desc").html(this.alt);
      }); 
  }
  ';
} 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 (!empty($this->product->images)) {
  $image = $this->product->images[0];
  ?>
  <div class>

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

<div class>

> <?php?> $start_image = VmConfig::get('add_img_main', 1) ? 0 : 1;
> for ($i = $start_image; $i < count($this->product->images); $i++) {
> $image = $this->product->images[$i];
> ?>
> <div class>
> <?php?> if(VmConfig::get('add_img_main', 1)) {
> echo $image->displayMediaThumb('class="product-image" style="cursor: pointer"',false,$image->file_description);
> echo '<a href class style title rel></a>';
> } else {
> echo $image->displayMediaThumb("",true,"rel='vm-additional-images'",true,$image->file_description);
> }
> ?>
> </div>
> <?php?> }
> ?>
> <div class></div>
> </div>

Hello,

i have use this code and it work fine, thank you.

Just i have do is to open my themler template in joomls and add cms code with your code directly at the place i want to have the standard gallery. I have no modify other file.

I have delete the themler image and slide under and is it OK.

Last edited 05 November 2017 by frederic11

Where is this file you mention?

OPEN VIRUEMART ZIP component, search for default_images.php and default_images_additional.php

is this compatible with Wordpress?

Last edited 25 April 2018 by LGWeb

Where is this file you mention?

OPEN VIRUEMART ZIP component, search for default_images.php and default_images_additional.php

is this compatible with Wordpress?

NO VIRTUEMART is a joomla shopping cart