Проблема Не правильно работают миниатюры в карточке товара

Тема в разделе "Дизайн и оформление, шаблоны", создана пользователем Syas, 21.01.2016.

  1. Offline

    Syas Пользователь

    Регистрация:
    15.10.2011
    Сообщения:
    48
    Симпатии:
    2
    Пол:
    Мужской
    Вот карточка товара
    https://lik-astana.kz/oformlenie-v-...aget/izgotovlenie-ram-dlya-kartin-detail.html
    Надо сделать так чтоб при нажатии на миниатюру главное изображение поменялось на нажатое
    Вот мой /templates/lik-astana/html/com_virtuemart/productdetails/default_images.php
    Код (PHP):
    1. <?php
    2. /**
    3.  *
    4.  * Show the product details page
    5.  *
    6.  * @package    VirtueMart
    7.  * @subpackage
    8.  * @author Max Milbers, Valerie Isaksen
    9.  
    10.  * @link http://www.virtuemart.net
    11.  * @copyright Copyright (c) 2004 - 2010 VirtueMart Team. All rights reserved.
    12.  * @license http://www.gnu.org/copyleft/gpl.html GNU/GPL, see LICENSE.php
    13.  * VirtueMart is free software. This version may have been modified pursuant
    14.  * to the GNU General Public License, and as distributed it includes or
    15.  * is derivative of works licensed under the GNU General Public License or
    16.  * other free or open source software licenses.
    17.  * @version $Id: default_images.php 6188 2012-06-29 09:38:30Z Milbo $
    18.  */
    19. // Check to ensure this file is included in Joomla!
    20. defined('_JEXEC') or die('Restricted access');
    21. if(VmConfig::get('usefancy',1)){
    22.     vmJsApi::js( 'fancybox/jquery.fancybox-1.3.4.pack');
    23.     vmJsApi::css('jquery.fancybox-1.3.4');
    24.     $document = JFactory::getDocument ();
    25. /*    $imageJS = '
    26.     jQuery(document).ready(function() {
    27.     jQuery("a[rel=vm-additional-images]")
    28.     .fancybox({
    29.             "titlePosition"     :"inside",
    30.             "transitionIn"    :    "elastic",
    31.             "transitionOut"    :    "elastic"
    32.         });
    33.  
    34.           jQuery(".additional-images a.product-image.image-0").removeAttr("rel");
    35.         jQuery(".additional-images img.product-image").click(function() {
    36.             jQuery(".additional-images a.product-image").attr("rel","vm-additional-images" );
    37.             jQuery(this).parent().children("a.product-image").removeAttr("rel");
    38.             var src = jQuery(this).parent().children("a.product-image").attr("href");
    39.             jQuery(".main-image img").attr("src",src);
    40.             jQuery(".main-image img").attr("alt",this.alt );
    41.             jQuery(".main-image a").attr("href",src );
    42.             jQuery(".main-image a").attr("title",this.alt );
    43.             jQuery(".main-image .vm-img-desc").html(this.alt);
    44.         });
    45.     });
    46.     ';   */
    47. $imageJS = '
    48. var j$ = jQuery.noConflict();
    49. j$(document).ready(function() {
    50.    j$("a[rel=vm-additional-images]").fancybox({
    51.        "titlePosition" : "inside",
    52.        "transitionIn" : "elastic",
    53.        "transitionOut" : "elastic"
    54.    });
    55.  
    56. });
    57.  
    58.  
    59.          jQuery(".additional-images a.product-image.image-0").removeAttr("rel");
    60.        jQuery(".additional-images img.product-image").click(function() {
    61.            jQuery(".additional-images a.product-image").attr("rel","vm-additional-images" );
    62.            jQuery(this).parent().children("a.product-image").removeAttr("rel");
    63.            var src = jQuery(this).parent().children("a.product-image").attr("href");
    64.            jQuery(".main-image img").attr("src",src);
    65.            jQuery(".main-image img").attr("alt",this.alt );
    66.            jQuery(".main-image a").attr("href",src );
    67.            jQuery(".main-image a").attr("title",this.alt );
    68.            jQuery(".main-image .vm-img-desc").html(this.alt);
    69.        });
    70.  
    71.    ';
    72.  
    73. } else {
    74.     vmJsApi::js( 'facebox' );
    75.     vmJsApi::css( 'facebox' );
    76.     $document = JFactory::getDocument ();
    77.     $imageJS = '
    78.    jQuery(document).ready(function() {
    79.        jQuery("a[rel=vm-additional-images]").facebox();
    80.  
    81.        var imgtitle = jQuery("span.vm-img-desc").text();
    82.        jQuery("#facebox span").html(imgtitle);
    83.  
    84.  
    85.    });
    86.    ';
    87. }
    88. $document->addScriptDeclaration ($imageJS);
    89.  
    90. if (!empty($this->product->images)) {
    91.     $image = $this->product->images[0];
    92.     ?>
    93.     <div class="main-image">
    94. <?php echo $image->displayMediaFull("",true,"rel='vm-additional-images'"); ?>
    95.  
    96.         <div class="clear"></div>
    97.     </div>
    98.  
    99.     <?php
    100.     $count_images = count ($this->product->images);
    101.     if ($count_images > 1) {
    102.         ?>
    103.         <div class="additional-images">
    104.             <?php
    105.             $start_image = VmConfig::get('add_img_main', 20) ? 0 : 1;
    106.             for ($i = $start_image; $i < $count_images; $i++) {
    107.                 $image = $this->product->images[$i];
    108.                 ?>
    109.                 <div class="floatleft">
    110.                     <?php
    111.                     if(VmConfig::get('add_img_main', 1)) {
    112.  //    echo $image->displayMediaThumb('class="product-image" style="cursor: pointer"',false,"");
    113.  
    114. //    echo '<div class="floatleft">' . $image->displayMediaThumb('class="product-image image-"', true, 'class="modal"', true, true). '</div>'; //'class="modal"'
    115.  
    116.     echo  $image->displayMediaThumb('class="product-image image-"', true, 'class="modal"', true, true, 'rel="vm-additional-images"'); //'class="modal"'
    117.  
    118. //    echo '<div class="floatleft">'.$image->displayMediaFull('class="product-image image-"
    119. //    title="'.$this->product->product_name.'" alt="'.$this->product->product_name.'"',true,'rel="vm-additional-images"'). '</div>';
    120.  
    121.                         echo '<a href="'. $image->file_url .'"  class="product-image image-'. $i .'" style="display:none;" title="'. $image->file_meta .'" rel="vm-additional-images"></a>';
    122.                     } else {
    123.                         echo $image->displayMediaThumb("",true,"rel='vm-additional-images'");
    124.                     }
    125.                     ?>
    126.                 </div>
    127.  
    128.             <?php
    129.             }
    130.             ?>
    131.             <div class="clear"></div>
    132.         </div>
    133.     <?php
    134.     }
    135. }
    136. // Showing The Additional Images END
    137. ?>

    пробовал несколько вариантов
    Код (PHP):
    1. //    echo $image->displayMediaThumb('class="product-image" style="cursor: pointer"',false,"");

    просто отображает и не меняются
    Код (PHP):
    1. echo  $image->displayMediaThumb('class="product-image image-"', true, 'class="modal"', true, true, 'rel="vm-additional-images"'); //'class="modal"'

    становится все кликабельным но первые две одинаковые картинки отображаются
    Код (PHP):
    1. //    echo '<div class="floatleft">'.$image->displayMediaFull('class="product-image image-"
    2. //    title="'.$this->product->product_name.'" alt="'.$this->product->product_name.'"',true,'rel="vm-additional-images"'). '</div>';

    Срабатывает и главная и миниатюры но при этом миниатуры листаются по 2 штуки одинаковых

    Помогите решить проблему
     
  2.  

Поделиться этой страницей

Загрузка...