Author Topic: Order to display photo thumbnails in the product detail  (Read 224 times)

davide81

  • Beginner
  • *
  • Posts: 5
Order to display photo thumbnails in the product detail
« on: January 12, 2018, 09:24:45 am »
VirtueMart 3.2.12

Hello, I use a component for synchronization between Ebay and Virtuemart and I would need to change the order of display of the photos of the product in virtuemart so that it is equal to the display on ebay.
Precisely the order of the miniatures in the detail of the product must be the reverse of now, that is, the last photo must be the first and the first to become the last one.

Thank you

Ghost

  • Jr. Member
  • **
  • Posts: 404
Re: Order to display photo thumbnails in the product detail
« Reply #1 on: January 12, 2018, 10:08:26 am »
Simplest way is to add this to product details template override:

Code: [Select]
$this->product->images = array_reverse($this->product->images);
But if images are imported in wrong order, you may consider changing this in the synchronization component.

davide81

  • Beginner
  • *
  • Posts: 5
Re: Order to display photo thumbnails in the product detail
« Reply #2 on: January 12, 2018, 17:36:59 pm »
thank you very much,
could you please kindly tell me also in which position I have to insert that code? I think the file is default_images.php

below the contents of the file:



<?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');
// Product Main Image
if (!empty($this->product->images[0])) {
    $imagesrcmain = YTTemplateUtils::resize($this->product->images[0]->file_url, '600', '600', 'fill');
?>
    <div class="main-image">
        <img id="zoom_img" class="img-large"  src="<?php echo $imagesrcmain;?>" title="" alt="" />
    </div>

    <?php
}
?>

<?php
// Showing The Additional Images
if (!empty($this->product->images) and count ($this->product->images)>1) {   ?>
        <div id="addimgzoom" class="owl-carousel addimgzoom">
                <?php
                // List all Images
                if (count($this->product->images) > 0) {
                    foreach ($this->product->images as $key=>$image) {
                        $imageslarge = YTTemplateUtils::resize($image->file_url, '800', '800', 'fill');
                        $imagesradditional = YTTemplateUtils::resize($image->file_url, '158', '158', 'fill');
                        ?>
                        <div>
                            <a href="#" title="" data-image="<?php echo $imageslarge;?>"   >
                                <img id="zoom_img"  class="nav_thumb" src="<?php echo $imagesradditional;?>" alt="" />
                            </a>
                        </div>
                        <?php
                    }
                }
                ?>
        </div>
<?php
} // Showing The Additional Images END ?>

<?php
$document = JFactory::getDocument();
$app = JFactory::getApplication();
$templateDir = JURI::base() . 'templates/' . $app->getTemplate();
?>
<script type="text/javascript" src="<?php echo $templateDir.'/js/jquery.elevateZoom-3.0.8.min.js' ?>"></script>

<script type="text/javascript">
    jQuery(document).ready(function($) {
       var zoomCollection = '.main-image img';
      $( zoomCollection ).elevateZoom({
            gallery:'addimgzoom',
            cursor: 'crosshair',
            galleryActiveClass: 'active',
            easing:true,
         zoomType   : "inner",
         lensSize    : 150,
           
        });
       
        $('.addimgzoom').owlCarousel({
            responsive:{
            0:{
               items:3
            },
            768:{
               items:4
            },
            992:{
               items:4
            }
         },
            loop:false,
            nav:true,
            dots:false,
            lazyLoad: true,
         margin: 9,
            navText: [ '<i class="fa fa-caret-left" aria-hidden="true"></i>', '<i class="fa fa-caret-right" aria-hidden="true"></i>' ],
        });
    });
</script>

Studio 42

  • Contributing Developer
  • Sr. Member
  • *
  • Posts: 2900
  • Joomla & Virtuemart addon developper
    • Studio 42 - Virtuemart & Joomla extentions
  • VirtueMart Version: 2.6 &amp; 3.0.x.y
Re: Order to display photo thumbnails in the product detail
« Reply #3 on: January 12, 2018, 22:01:04 pm »
After line :
Quote
if (count($this->product->images) > 0) {