Zoom эффект для изображения

Актуально для версии 18 ревизия 85081
Для 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;
}