Как сделать несколько фотографий для одного товара и выводить их в всплывающем окне (tpl-шаблонизатор) — различия между версиями

Материал из Umicms
Перейти к:навигация, поиск
(Новая страница: «По умолчанию для объекта каталога предполагается одна фотография. Чтобы сделать их неско…»)
 
 
(не показаны 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