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

21.02.2011 | Написал

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

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

    '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'], '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}

    При этом, если у Вас магазин версии 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">
    <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;}

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

Метки: , ,
8 комментариев читателей статьи "Делаем всплывающие картинки в листинге товара (VAMshop)"
  • Владимир пишет:

    Хорошоая штука, давно искал. И объяснение хорошее. Ед. непонятно почему в IE8 не работает 🙁 В опере на +5. Не подскажите, где что поменять, что бы и в эксплорере заработало? Зарание большое спасибо.

    • Евгений Молодецкий пишет:

      В ИЕ8 должно работать без никаких проблем, а вот для 6-7 нужно в зависимости от верстки немного изменить отступы всплывающего блока.

  • Владимир пишет:

    Странно, в ие вообще никак не работает будто и нет ничего 🙁 может быть конечно все дело в шаблоне, а может в новой версии поставил недавно 1.65

  • Евгений Молодецкий пишет:

    Посмотрите код страницы, может мешать строка в джаваскриптах jQuery.noConflict(); Её можно, в принципе, безболезненно удалить. Но это в том случае, если вообще не работает, у Вас же вроде как другой случай.

  • Владимир пишет:

    Разобрался как нестранно, долго мучался. пока не заменил
    .trigger {position: absolute;} на .trigger {position: relative;} в IE не запахало

  • Владимир пишет:

    не одно. так другое 🙁 скачал MultiIE и обнаружил жосткие глюки в 6 и 7. С перекосами зазобрался, но никак не могу победить повер всплывающей картинки с первого товара накладываються картинки и кнопка купить с последующих.

  • Алексей пишет:

    Подскажите пожалуйста. В версии 1.7.1 приведённый код выводит не всплывающую картинку товара, а только его наименование. Насколько я понимаю, выводится {$module_data.PRODUCTS_NAME} , а {$module_data.PRODUCTS_IMAGE_INFO} отсутствует в новой версии, потому и не выводится само изображение? Не подскажете что вставить вместо {$module_data.PRODUCTS_IMAGE_INFO} чтобы заработало на 1.7.1 ?

    • Евгений Молодецкий пишет:

      Внимательно прочитайте, что я написал в статье. Метки {$module_data.PRODUCTS_IMAGE_INFO} ни в одной версии нет и не было. Её нужно добавить в includes/classes/product.php самостоятельно.

Добавить комментарий

Ваш e-mail не будет опубликован.