Тот способ не был лишен недостатков — главное изображение не участвовало в слайдере, внешний вид слайдера требовал доработок.
В этой статье речь пойдет об еще одном слайдере (более удобном, на мой взгляд).
Установка и настройка плагина StarLite Pretty Photo
Плагин устанавливается стандартным образом.
После установки в менеджере плагинов находим System — StarLite Pretty Photo. Активируем плагин и проводим небольшие настройки. На выбор предлагается 6 тем, настройки слайдшоу и настройка показа кнопок соц.сетей.
Чтобы плагин заработал на страницах товаров virtuemart нужно внести несколько изменение в файл components/com_virtuemart/views/productdetails/tmpl/default_images.php
Для virtuemart младше версии 2.0.18
Заменим
<?php echo $this->product->images[0]->displayMediaFull('class="medium-image" id="medium-image"', false, "class='modal'", true); ?>
На
<?php echo $this->product->images[0]->displayMediaFull('class="medium-image" id="medium-image"', true, 'rel="prettyPhoto[other]"', true, true); ?>
И заменим
echo '<div class="floatleft">' . $image->displayMediaThumb('class="product-image"', true, 'class="modal"', true, true) . '</div>'; //'class="modal"'
На
echo '<div class="floatleft">' . $image->displayMediaThumb('class="product-image"', true, 'rel="prettyPhoto[other]"', true, true) . '</div>'; //'class="modal"'
Для virtuemart 2.0.18
В файле components/com_virtuemart/views/productdetails/tmpl/default_images.php закомментируем код в начале файла
jQuery(document).ready(function() { jQuery("a[rel=vm-additional-images]").fancybox({ "titlePosition" : "inside", "transitionIn" : "elastic", "transitionOut" : "elastic" }); });
Получится
/*jQuery(document).ready(function() { jQuery("a[rel=vm-additional-images]").fancybox({ "titlePosition" : "inside", "transitionIn" : "elastic", "transitionOut" : "elastic" }); });*/
Заменим
echo $image->displayMediaFull("",true,"rel='vm-additional-images'");
На
echo $image->displayMediaFull("",true,"rel='prettyPhoto[other]'");
И код
echo $image->displayMediaFull('class="product-image" style="cursor: pointer"',false,"");
Заменим на
echo $image->displayMediaFull('class="product-image" style="cursor: pointer"',true,"rel='prettyPhoto[other]'");
Теперь главное и дополнительные изображения товара при нажатии открываются в красивом слайдере.
Дополнение:
Дублируется главное изображение в самом всплывающем окне
Решение - замените в файле default_images.php в строке
for ($i = 0; $i < $count_images; $i++)
0 на 1