Эффекты Lytebox для объектов каталога
Материал из Umicms
Содержание |
Подключение эффектов Lytebox
Скачиваем Lytebox с официального сайта:
Разархивируем файлы по соответствующим папкам в системе:
- Скрипт lytebox.js сохраняем в папку "/js"
- Стиль lytebox.css сохраняем в папку "/css/cms"
Подключаем js и css в шаблонах:
<link rel="stylesheet" href="/css/cms/lytebox.css" type="text/css" media="screen" /> <script type="text/javascript" language="javascript" src="/js/lytebox.js"></script>
Редактирование шаблонов
- Редактируем шаблон "default.tpl" в папке "/tpls/catalog"
В блоке 'objects_block_line' меняем шаблон %catalog viewObject(%id%, 'preview_lytebox')%
Создаем шаблон preview_lytebox.tpl в папке "/tpls/catalog" со следующим содержанием:
<?php $FORMS = Array(); $FORMS['view_block_empty'] = <<<END END; $FORMS['view_block'] = <<<END <div class="item" umi:element-id="%id%"> <table border="0"> <tr> <td style="vertical-align:top;"> %data getProperty(%id%, 'photo', 'preview_image')% </td> <td style="padding-left: 15px; vertical-align:top;"> <a href="%link%" class="title" rel="lyteframe[catalog] rev="width: 400px; height: 400px; scrolling: yes;">%name%</a> %data getProperty(%id%, 'price', 'catalog_preview')% %data getPropertyGroup(%id%, 'short_info', 'catalog_preview')% </td> </tr> </table> <div style="clear: both; margin-top: 10px; padding-bottom: 10px;"> %eshop addtobasket(%id%)% | <a href="%pre_lang%/eshop/addToCompare/%id%/" rel="nofollow">Добавить к сравнению</a> | <a href="%link%#comments" >Комментарии (%comments countComments(%id%)%)</a> </div> </div> END; ?>
Создаем шаблон для объектов каталога:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" xmlns:umi="http://www.umi-cms.ru/TR/umi"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link type="text/css" rel="stylesheet" href="/css/cms/style.css"/> <title>%title%</title> </head> <body> %content% </body> </html>
Настройки Lytebox
Настройки Lytebox производятся в файле lytebox.js, блоки:
- Global Configuration
- Slideshow Options
Дополнительно
Браузерная совместимость
- IE 5.01 SP2 - Эффект постепенного затемнения не работает.
- IE 5.5 SP2 - Нет известных проблем.
- IE 7.0 - Нет известных проблем.
- Opera 9.23 - Нет известных проблем.
- Firefox 1.5+ - Нет известных проблем.
