Делаем всплывающие картинки в листинге товара (VAMshop)

В этой заметке я опишу, как сделать увеличение картинки в листинге товара при наведении курсора мыши, а точнее вывод в сплывающем окошке. Для этого будем использовать плагин jQuery Coda Popup Bubbles.

1. Открываем includes/classes/product.php. Находим:

   'PRODUCTS_IMAGE' => $this->productImage($array['products_image'], $image),

   'PRODUCTS_IMAGE' => $this->productImage($array['products_image'], $image),

   Вставляем после для вывода картинки размером изображения карточки товара:

   'PRODUCTS_IMAGE_INFO' => $this->productImage($array['products_image'], 'info'),

   'PRODUCTS_IMAGE_INFO' => $this->productImage($array['products_image'], 'info'),

   либо размером попапа:

   'PRODUCTS_IMAGE_INFO' => $this->productImage($array['products_image'], 'popup'),

   'PRODUCTS_IMAGE_INFO' => $this->productImage($array['products_image'], 'popup'),

2. Открываем шаблон листинга товара templates/ваш шаблон/module/product_listing/product_listing_colums.html. После первой строчки вставляем сам скрипт:

   {literal} <script src="jscript/jquery/jquery.js" type="text/javascript"></script> <script type="text/javascript"> <!-- $(function () { $('.bubbleInfo').each(function () { // options var distance = 10; var time = 125; var hideDelay = 250;   var hideDelayTimer = null;   // tracker var beingShown = false; var shown = false;   var trigger = $('.trigger', this); var popup = $('.popup', this).css('opacity', 0);   // set the mouseover and mouseout on both element $([trigger.get(0), popup.get(0)]).mouseover(function () { // stops the hide event if we move from the trigger to the popup element if (hideDelayTimer) clearTimeout(hideDelayTimer);   // don't trigger the animation again if we're being shown, or already visible if (beingShown || shown) { return; } else { beingShown = true;   // reset position of popup box popup.css({ top: 10, left: 10, display: 'block' // brings the popup back in to view })   // (we're using chaining on the popup) now animate it's opacity and position .animate({ top: '-=' + distance + 'px', opacity: 1 }, time, 'swing', function() { // once the animation is complete, set the tracker variables beingShown = false; shown = true; }); } }).mouseout(function () { // reset the timer if we get fired again - avoids double animations if (hideDelayTimer) clearTimeout(hideDelayTimer);   // store the timer so that it can be cleared in the mouseover if required hideDelayTimer = setTimeout(function () { hideDelayTimer = null; popup.animate({ top: '-=' + distance + 'px', opacity: 0 }, time, 'swing', function () { // once the animate is complete, set the tracker variables shown = false; // hide the popup entirely after the effect (opacity alone doesn't do the job) popup.css('display', 'none'); }); }, hideDelay); }); }); }); //--> </script> {/literal}

   {literal} <script src="jscript/jquery/jquery.js" type="text/javascript"></script> <script type="text/javascript"> <!-- $(function () { $('.bubbleInfo').each(function () { // options var distance = 10; var time = 125; var hideDelay = 250; var hideDelayTimer = null; // tracker var beingShown = false; var shown = false; var trigger = $('.trigger', this); var popup = $('.popup', this).css('opacity', 0); // set the mouseover and mouseout on both element $([trigger.get(0), popup.get(0)]).mouseover(function () { // stops the hide event if we move from the trigger to the popup element if (hideDelayTimer) clearTimeout(hideDelayTimer); // don't trigger the animation again if we're being shown, or already visible if (beingShown || shown) { return; } else { beingShown = true; // reset position of popup box popup.css({ top: 10, left: 10, display: 'block' // brings the popup back in to view }) // (we're using chaining on the popup) now animate it's opacity and position .animate({ top: '-=' + distance + 'px', opacity: 1 }, time, 'swing', function() { // once the animation is complete, set the tracker variables beingShown = false; shown = true; }); } }).mouseout(function () { // reset the timer if we get fired again - avoids double animations if (hideDelayTimer) clearTimeout(hideDelayTimer); // store the timer so that it can be cleared in the mouseover if required hideDelayTimer = setTimeout(function () { hideDelayTimer = null; popup.animate({ top: '-=' + distance + 'px', opacity: 0 }, time, 'swing', function () { // once the animate is complete, set the tracker variables shown = false; // hide the popup entirely after the effect (opacity alone doesn't do the job) popup.css('display', 'none'); }); }, hideDelay); }); }); }); //--> </script> {/literal}

   При этом, если у Вас магазин версии 1.62, то подключение jquery.js делать не нужно,т.е. вторую строчку в коде выше убираем.

3. Дальше в этом же файле меняем:

   <dt class="itemImage"> {if $module_data.PRODUCTS_IMAGE}<a href="{$module_data.PRODUCTS_LINK}"> <img src="{$module_data.PRODUCTS_IMAGE}" alt="{$module_data.PRODUCTS_NAME}" title="{$module_data.PRODUCTS_NAME}" /></a><br />{/if} {$module_data.PRODUCTS_BUTTON_BUY_NOW} </dt>

   <dt class="itemImage"> {if $module_data.PRODUCTS_IMAGE}<a href="{$module_data.PRODUCTS_LINK}"> <img src="{$module_data.PRODUCTS_IMAGE}" alt="{$module_data.PRODUCTS_NAME}" title="{$module_data.PRODUCTS_NAME}" /></a><br />{/if} {$module_data.PRODUCTS_BUTTON_BUY_NOW} </dt>

   на:

   <dt class="itemImage"> <div class="bubbleInfo"> {if $module_data.PRODUCTS_IMAGE}<a href="{$module_data.PRODUCTS_LINK}"> <img class="trigger" id="download" src="{$module_data.PRODUCTS_IMAGE}" alt="{$module_data.PRODUCTS_NAME}" title="{$module_data.PRODUCTS_NAME}" /></a> <br />{/if} {$module_data.PRODUCTS_BUTTON_BUY_NOW} <div class="popup"> <img class="trigger" id="download" src="{$module_data.PRODUCTS_IMAGE_INFO}" alt="{$module_data.PRODUCTS_NAME}" title="{$module_data.PRODUCTS_NAME}" /> </div> </div> </dt>

   <dt class="itemImage"> <div class="bubbleInfo"> {if $module_data.PRODUCTS_IMAGE}<a href="{$module_data.PRODUCTS_LINK}"> <img class="trigger" id="download" src="{$module_data.PRODUCTS_IMAGE}" alt="{$module_data.PRODUCTS_NAME}" title="{$module_data.PRODUCTS_NAME}" /></a> <br />{/if} {$module_data.PRODUCTS_BUTTON_BUY_NOW} <div class="popup"> <img class="trigger" id="download" src="{$module_data.PRODUCTS_IMAGE_INFO}" alt="{$module_data.PRODUCTS_NAME}" title="{$module_data.PRODUCTS_NAME}" /> </div> </div> </dt>

4. Открываем файл стилей шаблона templates/ваш шаблон/stylesheet.css. И добавляем где-нибудь поближе к стилям листинга:

   .bubbleInfo {position: relative;} .trigger {position: absolute;} .popup {position: absolute;display: none;z-index: 50;border-collapse: collapse;}

   .bubbleInfo {position: relative;} .trigger {position: absolute;} .popup {position: absolute;display: none;z-index: 50;border-collapse: collapse;}

На этом все. Теперь в листинге при наведении на изображение товара будет появляться окошко с увеличенным изображением. Кстати, по такому же принципу можно переделать и карточку товара.
И еще один момент, возможно будут проблемы с отображением всплывающего блока в IE. В этом случае нужно будет задать жестко ширину и высоту блока popup и «поиграть» свойством margin совместно с css-хаком.