Как сделать несколько фотографий для одного товара и выводить их в всплывающем окне (tpl-шаблонизатор) — различия между версиями
Gordeev (обсуждение | вклад) (Новая страница: «По умолчанию для объекта каталога предполагается одна фотография. Чтобы сделать их неско…») |
Mad grant (обсуждение | вклад) |
||
| (не показаны 2 промежуточные версии 2 участников) | |||
| Строка 2: | Строка 2: | ||
Теперь необходимо в шаблоне вывода объекта каталога (по умолчанию это \tpls\catalog\default.tpl ) указать вывод не одной фотографии, а нескольких. | Теперь необходимо в шаблоне вывода объекта каталога (по умолчанию это \tpls\catalog\default.tpl ) указать вывод не одной фотографии, а нескольких. | ||
Меняем код шаблона | Меняем код шаблона | ||
| + | <pre> | ||
$FORMS['view_block'] = <<<END | $FORMS['view_block'] = <<<END | ||
%data getProperty(%id%, 'photo', 'catalog_view')% | %data getProperty(%id%, 'photo', 'catalog_view')% | ||
| Строка 9: | Строка 10: | ||
%data getProperty(%id%, 'photo2', 'catalog_view')% | %data getProperty(%id%, 'photo2', 'catalog_view')% | ||
... | ... | ||
| + | </pre> | ||
В результате, на странице сайта будет отображаться несколько изображений товара. | В результате, на странице сайта будет отображаться несколько изображений товара. | ||
| Строка 20: | Строка 22: | ||
Подключаем js и css в шаблоне дизайна для объектов каталога в теге <head>: | Подключаем js и css в шаблоне дизайна для объектов каталога в теге <head>: | ||
| + | <pre> | ||
<link rel="stylesheet" href="/css/cms/lytebox.css" type="text/css" media="screen" /> | <link rel="stylesheet" href="/css/cms/lytebox.css" type="text/css" media="screen" /> | ||
<script type="text/javascript" language="javascript" src="/js/lytebox.js"></script> | <script type="text/javascript" language="javascript" src="/js/lytebox.js"></script> | ||
| + | </pre> | ||
В шаблоне tpls/data/catalog_view.tpl меняем строку | В шаблоне tpls/data/catalog_view.tpl меняем строку | ||
| + | <pre> | ||
%system makeThumbnail(%filepath%, 200, 'auto', 'catalog_view')% | %system makeThumbnail(%filepath%, 200, 'auto', 'catalog_view')% | ||
| + | </pre> | ||
на | на | ||
| + | <pre> | ||
<a href="%src%" rel="lytebox[vacation]" title="%title%">%system makeThumbnail(%filepath%, 200, 'auto', 'catalog_view')%</a> | <a href="%src%" rel="lytebox[vacation]" title="%title%">%system makeThumbnail(%filepath%, 200, 'auto', 'catalog_view')%</a> | ||
| − | + | </pre> | |
Прописываем в lytebox.css пути изображениям, используемым скриптом, в папку images/lightbox. | Прописываем в lytebox.css пути изображениям, используемым скриптом, в папку images/lightbox. | ||
| Строка 33: | Строка 40: | ||
Global Configuration | Global Configuration | ||
Slideshow Options | Slideshow Options | ||
| + | [[Категория:Модуль Каталог]][[Категория:Верстка в TPL]] | ||
Текущая версия на 13:27, 5 июня 2013
По умолчанию для объекта каталога предполагается одна фотография. Чтобы сделать их несколько, необходимо в модуле «Шаблоны данных» для нужного типа товара в группе полей «Изображения» добавить дополнительные поля типа «Изображение». Идентификаторы полей назовем, например, photo1, photo2 и т.д. Теперь необходимо в шаблоне вывода объекта каталога (по умолчанию это \tpls\catalog\default.tpl ) указать вывод не одной фотографии, а нескольких. Меняем код шаблона
$FORMS['view_block'] = <<<END %data getProperty(%id%, 'photo', 'catalog_view')% на $FORMS['view_block'] = <<<END %data getProperty(%id%, 'photo1', 'catalog_view')% %data getProperty(%id%, 'photo2', 'catalog_view')% ...
В результате, на странице сайта будет отображаться несколько изображений товара. Теперь необходимо сделать так, чтобы при клике на изображение оно открывалось в полный размер лайтбоксе. Скачиваем архив: http://www.dolem.com/lytebox/ Разархивируем файлы по соответствующим папкам в системе: Скрипт lytebox.js сохраняем в папку "/js" Стиль lytebox.css сохраняем в папку "/css/cms" Копируем изображения в папку images/lightbox
Подключаем js и css в шаблоне дизайна для объектов каталога в теге <head>:
<link rel="stylesheet" href="/css/cms/lytebox.css" type="text/css" media="screen" /> <script type="text/javascript" language="javascript" src="/js/lytebox.js"></script>
В шаблоне tpls/data/catalog_view.tpl меняем строку
%system makeThumbnail(%filepath%, 200, 'auto', 'catalog_view')%
на
<a href="%src%" rel="lytebox[vacation]" title="%title%">%system makeThumbnail(%filepath%, 200, 'auto', 'catalog_view')%</a>
Прописываем в lytebox.css пути изображениям, используемым скриптом, в папку images/lightbox.
Настройки Lytebox производятся в файле lytebox.js, блоки: Global Configuration Slideshow Options
