Категории

как сделать, чтобы плавно увеличивались фото товаров

Как сделать чтобы плавно увеличивались фото товаров, а то они сейчас открываются на отдельной странице?

Какой шаблон?

buy-shopos-2

Я так понял это платный шаблон, спросите Евгений или посмотрите как сделано в default шаблоне!
надо смотреть product_info.html

На своём сайте я применил такой альтернативный вариант Pop-up окна
http://www.zeltaperlite.lv/product_info.php?products_id=225

Скрипт скачал здесь http://www.yellowlemon.net/demo/1/cloud-zoom/index.html
Как видите здесь четыре разных варианта

Не подскажите как прикрутить данный скрипт?

Я не опытный веб-мастер поэтому вариант который я могу предложить может быть не валидный поэтому прошу не ругать меня. Единственно я могу сказать что он работает.
Итак Вы скачали с сайта

http://www.yellowlemon.net/javascript/images/cloud-zoom

три файла

cloud-zoom.1.0.2.js, cloud-zoom.1.0.2.min.js, cloud-zoom.css

Их нужно залить в корень сайта туда-же где находятся файлы например config.php и .htaccess
Теперь Вы выбираете один из четырёх предложеных вариантов плагина и четыре строчки

Это всё нужно интегрировать в файл

themes/шаблон/module/product_info/product_info_v1.html

Причём в других шаблонах файл product_info_v1.html называется product_info.html
Мой шаблон shopos-vamcart сделан на div-ах, посему если у Вас шаблон табличный надо немного доделать.
Привожу часть кода. Файл product_info_v1.html
Скрипт отмечен (красным цветом)
Обратите внимание! для наглядности оригинальный вариант без скрипта закоментирован (зелёный цвет)
{config_load file="$language/lang.conf" section="product_info"}
{$FORM_ACTION}
<h1 class="contentBoxHeading">{$PRODUCTS_NAME}</h1>

{if $info_message}
<div class="contacterror">
{$info_message}
</div>
{/if}

{$PRODUCT_NAVIGATOR}

<div class="page">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="pagecontent">

<div class="ProductInfoLeft">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<script type="text/javascript" src="cloud-zoom.1.0.2.js"></script>
<link href="cloud-zoom.css" rel="stylesheet" type="text/css" />

{if $PRODUCTS_IMAGE or $PRODUCTS_MO_IMAGES or $PRODUCTS_IMAGE_LINK!=''}
{if $PRODUCTS_POPUP_LINK!=''}
<a href='{$PRODUCTS_POPUP_IMAGE}' class = 'cloud-zoom' title="{$PRODUCTS_NAME}" rel="softFocus: false, position:'anypos', smoothMove:2"
{if $PRODUCTS_MO_IMAGES}rel="gallery-plants"{/if} target="_blank">{/if}<img src="{$PRODUCTS_IMAGE}" alt="{$PRODUCTS_NAME}" />

{if $PRODUCTS_POPUP_LINK!=''}</a>
{/if}
<div class="zoom-desc" style="position:relative; ">
<div id="anypos" style="position:absolute;top:10px; left: 0px;width:300px; height:300px; "></div>
</div>
<div style="height:300px;"></div>
{/if}



{if ($PRODUCTS_FSK18=='true') or ($MODULE_graduated_price !='')}
{if $PRODUCTS_FSK18=='true'}
<p>
<img src="{$tpl_path}img/fsk18.gif" alt="" />
</p>
{/if}
{if $MODULE_graduated_price !=''}
{$MODULE_graduated_price}
{/if}

{/if}

</div>

Источник