Увеличение картинки при наведении мышкой в Webasyst

Сегодня в этой статье я расскажу вам как принаведении на картинку увеличить ее до вашего определенного размера .

 

1. Для начала вам нужно Cкачать архив со скриптами

2. Скачаный архив распаковываем и 2 java-скрипта и заливаем в папку "http://Ваш_сайт.com/published/SC/html/scripts/js"

3. В файле "http://Ваш_сайт.com/published/SC/html/scripts/templates/frontend/product_brief.html"


Ищем строку:


<!-- Thumbnail -->
<a {$target} href='{$_product_url}'>{if $product_info.thumbnail}<img src="/{$smarty.const.URL_PRODUCTS_PICTURES}/{$product_info.thumbnail|escape:'url'}" alt="{$product_info.name|escape:'html'}" title="{$product_info.name|escape:'html'}">
{elseif $product_info.picture}<img src="/{$smarty.const.URL_PRODUCTS_PICTURES}/{$product_info.picture|escape:'url'}" alt="{$product_info.name|escape:'html'}" title="{$product_info.name|escape:'html'}">{/if}</a>


И заменяем ее на:


<!-- Thumbnail -->
<a {$target} href='{$_product_url}'{if $product_info.big_picture} class="supershop" name='<img src="/{$smarty.const.URL_PRODUCTS_PICTURES}/{$product_info.big_picture}"/>'{/if}>{if $product_info.thumbnail}<img src="/{$smarty.const.URL_PRODUCTS_PICTURES}/{$product_info.thumbnail|escape:'url'}" alt="{$product_info.name|escape:'html'}" title="{$product_info.name|escape:'html'}">
{elseif $product_info.picture}<img src="/{$smarty.const.URL_PRODUCTS_PICTURES}/{$product_info.picture|escape:'url'}" alt="{$product_info.name|escape:'html'}" title="{$product_info.name|escape:'html'}">{/if}</a>


 

 

4. В CSS (в редакторе дизайна шаблона) в любом месте дописываем:


.seorominBox img { width: 250px; } 


 Цифра 250px означает ширину в пикселях. До этого размера будет увеличена картинка при наведении. Этот параметр можете выставить самостоятельно по желанию.

 

5. В head (в редакторе дизайна шаблона) дописываем : 


 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript" src="/{$smarty.const.URL_JS}/tooltipsy.min.js"></script>
<script type="text/javascript" src="/{$smarty.const.URL_JS}/seoromin.js"></script>

 


 

6. Рекомендуем очистить кеш в webAsyst Installer зайдя в раздел "Диагностика" и нажав "Сброс кеша"

Важна внутренняя оптимизация сайта.

По вопросам и установки и создания сайтов или модулей пишите в тех.поддержку Адрес электронной почты защищен от спам-ботов. Для просмотра адреса в вашем браузере должен быть включен Javascript. Либо в раздел вопрос-ответ