Слайдер картинок в карточке товара virtuemart 2

Оцените материал
(2 голосов)

Стятья взята с сайта http://virtuemart2.info


 

Данная статья является дополнением к статье про работу с изображениями товара в virtuemart 2. В ней уже был рассмотрен вывод изображений товара в слайдере с помощью плагина Shadowbox Media Viewer.

Тот способ не был лишен недостатков — главное изображение не участвовало в слайдере, внешний вид слайдера требовал доработок.

В этой статье речь пойдет об еще одном слайдере (более удобном, на мой взгляд).

Установка и настройка плагина 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

Другие материалы в этой категории: « Как сделать шаблон для VirtueMart 2 самому?
Добавить комментарий


Комментарии  
Екатерина Катюхина
0 # Екатерина Катюхина 08.08.2015 06:38
Замечательный материал, очень помог. Спасибо вам большое!
Ответить | Ответить с цитатой | Цитировать
Яндекс.Метрика

По всем вопросам, связанным с сайтом просьба обращаться на e-mail: pontin@mail.ru