Cloud zoom в карточке товара типового интернет-магазина

Исторический материал из архива сайта. Указанные услуги и контакты относятся ко времени публикации и не являются действующим предложением.

Создание сайтов

Создание сайтов - отличный способ поддержать бренд уже известной компании, а также заявить о себе на стадии Start-Up. Доверьте создание сайта профессионалам и Ваш сайт станет источником увеличения прибыли компании.

Подробнее

Продвижение сайтов

Интернет-агентство ТОП10 предлагает воспользоваться услугами оптимизации сайтов, а именно продвижением сайтов в поисковых системах и контекстной рекламой, так как благодаря этому Ваш сайт найдут.

Подробнее

Тех. поддержка

Информация о вашей деятельности всегда должна быть актуальной. Именно поэтому обновление контента на сайте необходимо осуществлять своевременно, вслед за изменениями, в вашей организации.

Подробнее

Сайта Администратор

21.04.201400:0221 Апреля 2014 0:02

Для подключения Cloud-zoom к шаблону в файле component_epilog.php прописываем следующие строки:

$APPLICATION->AddHeadScript("https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js");
$APPLICATION->AddHeadScript("/cloud-zoom/cloud-zoom.1.0.2.js");
$APPLICATION->SetAdditionalCSS("/cloud-zoom/cloud-zoom.css");

Тут хочу обратить внимание, что наша версия Cloud Zoom 1.0.2 требует jQuery именно 1.4.3 или как подсказывает интуиция, нужна версия до 1.6.

Затем меняем код шаблона template.php.

Особого внимания требуют следующие участки:

<div class="bx_bigimages_imgcontainer">
   <a href="<?=$arResult['DETAIL_PICTURE']['SRC'];?>" class="cloud-zoom" rel="adjustX: 10, adjustY:-4" >
               
      <?
         $arFotoSmall = CFile::ResizeImageGet(
            $arResult['DETAIL_PICTURE']['ID'],
            Array('width'=>370, 'height'=>370),
            BX_RESIZE_IMAGE_PROPORTIONAL,
            true
         );
      ?>
               
      <img
         id="<?=$arItemIDs['PICT']; ?>"
         src="<?=$arFotoSmall['src'];?>"
         alt="<?=$arResult["DETAIL_PICTURE"]["ALT"]?>"
         title=""
         id="image_<?=$arResult["DETAIL_PICTURE"]["ID"]?>"
         class="cloud-zoom"
      >
   </a>

Здесь важно, что у ссылки прописан класс и атрибут rel - описание этих параметров можно посмотреть в документации на плагин Cloud Zoom.

Немного отредактируем style.css шаблона:

.bx_item_slider .bx_slider_conteiner {z-index: 980;} .bx_item_slider .bx_stick {z-index: 800;}

И script.js на 491 строке, примерно так должно получиться:

if (-1 < indexPict) {
   if (!!this.obPict && !!this.offers[index].SLIDER[indexPict]) {
      BX.adjust(
         this.obPict,
         {
            props: {
               src: this.offers[index].SLIDER[indexPict].SRC,
/*               className: (this.offers[index].SLIDER[indexPict].WIDTH > this.offers[index].SLIDER[indexPict].HEIGHT ? 'landscape' : 'portrait') */
               className: ''
            }
         }
      );
      // Наш код:
      var photoOfferSrc = this.offers[index].SLIDER[indexPict].SRC;
      if(photoOfferSrc !== undefined) {
         $("a.cloud-zoom").attr('href', photoOfferSrc);
         $('.cloud-zoom, .cloud-zoom-gallery').CloudZoom();
      }
   }

Начало кода - это оригинал для понимания того, куда пишем свой код.
Суть нашего кода в том, что бы выставить атрибут href для ссылки-родителя картинки и перезапустить плагин Cloud Zoom. Дело в том, что Cloud Zoom в окне с увеличенной картинкой показывает ту картинку, что прописана в атрибуте href, поэтому мы его меняем, но поскольку плагин инициализируется до того как мы поменяли href, то он может показывать в лупе другую картинку, которая была до выбранной (в случае, если у товара несколько картинок или цветовых решений).

Что бы все это корректно работало со стандартным шаблоном и эримитажем битрикса необходимо отредактировать cloud-zoom.1.0.2.js в следующих местах:

173: $mouseTrap = jWin.parent().append(format("<div class='mousetrap' style='background-image:url(".");z-index:500;position:absolute;width:%0px;height:%1px;left:%2px;top:%3px;\'></div>", sImg.outerWidth(), sImg.outerHeight(), 0, 0)).find(':last');
...  
350: $(this).wrap('<div id="wrap" style="top:0px;z-index:750;position:relative;"></div>');

Суть изменений в новом значении z-index.

Вот и всё!

Сайта Администратор

21.04.201400:0221 Апреля 2014 0:02

Просмотров:2094 Комментариев:0 0

Теги: cloud zoom, jquery, компонент, типовой интернет-магазин, шаблон

Ваше имя*

E-mail

Тема

Добавить файлы

Загрузить файлы

#name#

#size#