TUTORIAL VIRTUEMART CLASSIC GALLERY, AND NOT CLOUDZOOM

Giuma
60 Posts
Giuma posted this 25 February 2017

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="main-image">
        <?php echo $image->displayMediaFull("",true,"rel='vm-additional-images'"); ?>
        <div class="clear"></div>
    </div>
    <?php
}
?>


<div class="additional-images">
    <?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="floatleft">
            <?php
            if(VmConfig::get('add_img_main', 1)) {
                echo $image->displayMediaThumb('class="product-image" style="cursor: pointer"',false,$image->file_description);
                echo '<a href="'. $image->file_url .'"  class="product-image image-'. $i .'" style="display:none;" title="'. $image->file_meta .'" rel="vm-additional-images"></a>';
            } else {
                echo $image->displayMediaThumb("",true,"rel='vm-additional-images'",true,$image->file_description);
            }
            ?>
        </div>
    <?php
    }
    ?>
    <div class="clear"></div>
</div>

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="main-image"> <?php echo $image->displayMediaFull("",true,"rel='vm-additional-images'"); ?> <div class="clear"></div> </div> <?php } ?> <div class="additional-images"> <?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="floatleft"> <?php if(VmConfig::get('add_img_main', 1)) { echo $image->displayMediaThumb('class="product-image" style="cursor: pointer"',false,$image->file_description); echo '<a href="'. $image->file_url .'" class="product-image image-'. $i .'" style="display:none;" title="'. $image->file_meta .'" rel="vm-additional-images"></a>'; } else { echo $image->displayMediaThumb("",true,"rel='vm-additional-images'",true,$image->file_description); } ?> </div> <?php } ?> <div class="clear"></div> </div>
Vote to pay developers attention to this features or issue.
4 Comments
Order By: Standard | Newest
Giuma
60 Posts
Giuma posted this 25 February 2017

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

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

frederic11
85 Posts
frederic11 posted this 05 November 2017

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

    &lt;?php?&gt;     

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];
  ?>
  &lt;div class&gt;

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

&lt;div class&gt;

> <?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.

> 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 > > > &lt;?php?&gt; > > 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]; > ?> > &lt;div class&gt; &gt; &lt;?php echo $image-?&gt;displayMediaFull(&quot;&quot;,true,&quot;rel=&#39;vm-additional-images&#39;&quot;); ?&gt; &gt; &lt;div class&gt;&lt;/div&gt; &gt; &lt;/div&gt; > &lt;?php?&gt; } > ?> > > > &lt;div class&gt; &gt; &lt;?php?&gt; $start_image = VmConfig::get(&#39;add_img_main&#39;, 1) ? 0 : 1; &gt; for ($i = $start_image; $i &lt; count($this-&gt;product-&gt;images); $i++) { &gt; $image = $this-&gt;product-&gt;images[$i]; &gt; ?&gt; &gt; &lt;div class&gt; &gt; &lt;?php?&gt; if(VmConfig::get(&#39;add_img_main&#39;, 1)) { &gt; echo $image-&gt;displayMediaThumb(&#39;class=&quot;product-image&quot; style=&quot;cursor: pointer&quot;&#39;,false,$image-&gt;file_description); &gt; echo &#39;&lt;a href class style title rel&gt;&lt;/a&gt;&#39;; &gt; } else { &gt; echo $image-&gt;displayMediaThumb(&quot;&quot;,true,&quot;rel=&#39;vm-additional-images&#39;&quot;,true,$image-&gt;file_description); &gt; } &gt; ?&gt; &gt; &lt;/div&gt; &gt; &lt;?php?&gt; } &gt; ?&gt; &gt; &lt;div class&gt;&lt;/div&gt; &gt; &lt;/div&gt; 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

LGWeb
140 Posts
LGWeb posted this 25 April 2018

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?

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

Giuma
60 Posts
Giuma posted this 05 May 2018

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

> 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
You must log in or register to leave comments