Navigation Arrows in Additional Products Pop Up Image

[castorianos]

---------------
Joomla 3.4.8
VM 3.0.12
Fancybox 1.3.4
---------------
I'm trying to add navigation arrows to Fancybox pop up additional images.
According to: http://forum.virtuemart.net/index.php?topic=102249.msg339434#msg339434 (but this is for VM 2).
I must edit either com_virtuemart/productdetails/default_images.php or
com_virtuemart/productdetails/default_images_additional.php
Could you please help me.

[Ghost]

Replace every instance of data-toggle attribute with rel attribute in both of those files.

[castorianos]

Thank you. Can you give me an example where exaclty to change it?

[Ghost]

Everywhere in /templates/yourtemplate/html/com_virtuemart/productdetails/default_images.php and /templates/yourtemplate/html/productdetails/default_images_additional.php.

Just search and replace data-toggle with rel.

[castorianos]

They already have data-rel.
This is default_images.php

<?php
/**
*
* Show the product details page
*
* @package   VirtueMart
* @subpackage
* @author Max Milbers, Valerie Isaksen

* @link http://www.virtuemart.net
* @copyright Copyright (c) 2004 - 2010 VirtueMart Team. All rights reserved.
* @license http://www.gnu.org/copyleft/gpl.html GNU/GPL, see LICENSE.php
* VirtueMart is free software. This version may have been modified pursuant
* to the GNU General Public License, and as distributed it includes or
* is derivative of works licensed under the GNU General Public License or
* other free or open source software licenses.
* @version $Id: default_images.php 8657 2015-01-19 19:16:02Z Milbo $
*/
// Check to ensure this file is included in Joomla!
defined('_JEXEC') or die('Restricted access');
if(VmConfig::get('usefancy',1)){
   vmJsApi::addJScript( 'fancybox/jquery.fancybox-1.3.4.pack', false);
   vmJsApi::css('jquery.fancybox-1.3.4');
   $document = JFactory::getDocument ();
   $imageJS = '
   jQuery(document).ready(function() {
      Virtuemart.updateImageEventListeners()
   });
   Virtuemart.updateImageEventListeners = function() {
      jQuery("a[data-rel=vm-additional-images]").fancybox({
         "titlePosition"    : "inside",
         "transitionIn"   :   "elastic",
         "transitionOut"   :   "elastic"
      });
      jQuery(".additional-images a.product-image.image-0").removeAttr("data-rel");
      jQuery(".additional-images img.product-image").click(function() {
         jQuery(".additional-images a.product-image").attr("data-rel","vm-additional-images" );
         jQuery(this).parent().children("a.product-image").removeAttr("data-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);
         
         /* Zoom Image add code */         
         jQuery(".zoomContainer").remove();
         if(!(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))) {
            jQuery("#zoom-image").elevateZoom();
         }
         /* Zoom Image end */
      });
   }
   ';
} else {
   vmJsApi::addJScript( 'facebox',false );
   vmJsApi::css( 'facebox' );
   $document = JFactory::getDocument ();
   $imageJS = '
   jQuery(document).ready(function() {
      Virtuemart.updateImageEventListeners()
   });
   Virtuemart.updateImageEventListeners = function() {
      jQuery("a[data-rel=vm-additional-images]").facebox();
      var imgtitle = jQuery("span.vm-img-desc").text();
      jQuery("#facebox span").html(imgtitle);
   }
   ';
}
vmJsApi::addJScript('imagepopup',$imageJS);

// Zoom Image add code --------------------------------------------------------------------------
$zoomJs = '
if(!(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))) {
    jQuery(document).ready(function() {
      jQuery("#zoom-image").elevateZoom();   
   });
}';
$document = JFactory::getDocument ();
$document->addScriptDeclaration($zoomJs);
// Zoom Image end ---------------------------------------------------------------------------------

if (!empty($this->product->images)) {
   $image = $this->product->images[0];
   ?>
   <div class="main-image">
      <?php echo $image->displayMediaFull('id="zoom-image"',true,"data-rel='vm-additional-images'"); ?>
      <?php //echo $image->displayMediaFull("",true,"rel='vm-additional-images'"); ?>
      <div class="clear"></div>
   </div>
   <?php
}
?>

and this default_images_additional.php


<?php
/**
*
* Show the product details page
*
* @package   VirtueMart
* @subpackage
* @author Max Milbers, Valerie Isaksen

* @link http://www.virtuemart.net
* @copyright Copyright (c) 2004 - 2010 VirtueMart Team. All rights reserved.
* @license http://www.gnu.org/copyleft/gpl.html GNU/GPL, see LICENSE.php
* VirtueMart is free software. This version may have been modified pursuant
* to the GNU General Public License, and as distributed it includes or
* is derivative of works licensed under the GNU General Public License or
* other free or open source software licenses.
* @version $Id: default_images.php 7784 2014-03-25 00:18:44Z Milbo $
*/
// Check to ensure this file is included in Joomla!
defined('_JEXEC') or die('Restricted access');
?>
<div class="additional-images">
   <!--<div class="additional-images-inner">-->
      <ul id="additional_images_gallery" class="owl-carousel">
      <?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];
            ?>
            <li class="item">
               <div class="item-inner">
                  <?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 .'" data-rel="vm-additional-images"></a>';
                  } else {
                     echo $image->displayMediaThumb("",true,"data-rel='vm-additional-images'",true,$image->file_description);
                  }
                  ?>                  
               </div>
            </li>
         <?php } ?>
      </ul>
      
      <!-- Javascript Block -->
      <script type="text/javascript">
      jQuery(document).ready(function($) {
         $("#additional_images_gallery").owlCarousel({
            items :       4,
            itemsDesktop:   [1170,4],
            itemsDesktopSmall: [980,4],
            itemsTablet: [800,3],
            itemsTabletSmall: [650,3],
            itemsMobile: [479,2],
            
            navigation :    true,
            pagination :    false,            
         });
      });
      </script>
   <!--</div>-->
</div>