Zoom эффект для изображения — различия между версиями
Velross (обсуждение | вклад) |
Velross (обсуждение | вклад) |
||
Строка 1: | Строка 1: | ||
+ | '''Актуально для версии 2.9''' | ||
+ | <br/> | ||
'''Для TPL-шаблонизатора:''' | '''Для TPL-шаблонизатора:''' | ||
Строка 47: | Строка 49: | ||
[[Файл:Erecsonnzoom.png]] | [[Файл:Erecsonnzoom.png]] | ||
− | |||
[[Категория:Сторонние сервисы и программы]] | [[Категория:Сторонние сервисы и программы]] |
Версия 16:41, 5 июня 2013
Актуально для версии 2.9
Для TPL-шаблонизатора:
1. Скачиваем папку со скриптом [1]Файл:Zoom.zip
2. Располагаем файл cloud-zoom.1.0.2.min.js в папке /templates/имя_шаблона/js
а файл cloud-zoom.css в папке /templates/имя_шаблона/css
3. Подключаем файлы в шаблоне дизайна, который используется для отображения каталога. В нашем случае это шаблон: /templates/имя_шаблона/tpls/content/inner.tpl
<link type="text/css" rel="stylesheet" href="/templates/имя_шаблона/css/cloud-zoom.css?%system_build%"/>
<script type="text/javascript" src="/templates/имя_шаблона/js/cloud-zoom.1.0.2.min.js?%system_build%"></script>
4. Идём в шаблон по которому отображается картинка: /templates/имя_шаблона/tpls/thumbs/catalog_view.tpl и обрамляем изображение ссылкой:
<a href="%link%" class="cloud-zoom" id="zoom1" rel="adjustX: 10, adjustY: -4">
<img src="%src%" width="%width%" height="%height%" border="0" style="float: left; margin-right: 20px;" />
</a>
Для XSLT-шаблонизатора:
1. Скачиваем папку со скриптом zoom.zip
2. Располагаем файл cloud-zoom.1.0.2.min.js в папке /templates/имя_шаблона/js
а файл cloud-zoom.css в папке /templates/имя_шаблона/css
3. Подключаем файлы в шаблоне дизайна, который используется для отображения каталога. В нашем случае это шаблон: /templates/имя_шаблона/xslt/layouts/default.xsl
<link type="text/css" rel="stylesheet" href="/templates/имя_шаблона/css/cloud-zoom.css?%system_build%"/>
<script type="text/javascript" src="/templates/имя_шаблона/js/cloud-zoom.1.0.2.min.js?%system_build%"></script>
4. Идём в шаблон по которому отображается картинка: /templates/имя_шаблона/xslt/modules/catalog/object-view.xsl и обрамляем изображение ссылкой:
<a href="{.//property[@name = 'photo']/value}" class="cloud-zoom" id="zoom1" rel="adjustX: 0, adjustY: 0">
<xsl:call-template name="catalog-thumbnail">
<xsl:with-param name="element-id" select="page/@id" />
<xsl:with-param name="field-name">photo</xsl:with-param>
<xsl:with-param name="width">281</xsl:with-param>
</xsl:call-template>
</a>
5. В файле cloud-zoom.css может потребоваться некоторая корректировка стилей:
.cloud-zoom img {
display: inline !important;
}