Войти как пользователь:
Войти как пользователь
Вы можете войти на сайт, если вы зарегистрированы на одном из этих сервисов:
Просмотр изображений товара
1 000
Опубликовано: 27.07.2012
Обновлено: 06.11.2014
Версия: 1.2.0
Установлено: Менее 50 раз

Компонент для 1С-Битрикс: Просмотр изображений товара

Компонент позволяет настроить вывод дополнительных изображений товара в компактном виде.

 
Обратите внимание!
Все модули устанавливаются и обновляются только на активные лицензии 1С-Битрикс: Управление сайтом. Узнать про лицензии можно на странице продление лицензии 1С-Битрикс.
Выводится одна большая картинка и несколько миниатюр снизу. При клике на миниатюру, соответствующая ей картинка заменяет изображение большой картинки. При клике по большой картинке, выводится оригинал изображения.
Обратите внимание!
Модуль не поддерживает торговые предложения!

Компонент имеет два шаблона. Первый выводит все миниатюры под большим изображением в несколько строк. Второй компонент выводит миниатюры в одну строку с прокруткой.

Шаблон с предпросмотром изображений в одну строку.



Шаблон с предпросмотром изображений в несколько строк.

Компонент имеет массу настроек. Можно задавать ширину блока изображений, размеры большой картинки, количество миниатюр в строке и множество других параметров.

Компонент предназначен для работы в внутри компонентов каталога или новостей (устанавливается в шаблон компонента). Для установки потребуются некоторые знания в PHP.


Для установки компонента на ваш сайт, необходимо разместить код вызова компонента в шаблоне компонента "Элемент каталога детально (bitrix:catalog.element)", предварительно кастомизировав его (при попытке редактирования шаблона 1с-битрикс сам предложит скопировать шаблон в нужное пространство).

Код вызова:

<?$APPLICATION->IncludeComponent(
        "altasib:imagebox",
        "",
        Array(
                "MARGIN_H" => "1",
                "MARGIN_V" => "1",
                "THUMBS_COUNT" => "4",
                "ELEMENT_ID" => $arResult["ID"],
                "PREVIEW_HEIGHT" => "413",
                "PREVIEW_WIDTH" => "550",
                "THUMBS_POSITION" => "0",
                "SHOW_DETAIL_PICTURE" => "1",
                "NAME_PHOTO" => "MORE_PHOTO",
                "SHOW_DESC" => "1",
                "DONT_CUT_MINI" => "N",
                "DETAIL_TITLE" => "0",
                "BG_PIC" => "#ffffff",
                "BORD_COL_MAIN" => "#CCCCCC",
                "BORD_COL_MINI" => "#ffffff",
                "CUR_BORD_COL_MINI" => "#333333"
        )
);?>


После того, как компонент будет размещён в шаблоне каталога, его можно будет настраивать из меню компонентов:

Как вызвать настройки компонента


Настройки компонента:

Настройки компонента с шаблоном по умолчанию

Настройки компонента с шаблоном предпросмотра изображений в одну строку.

Есть возможность умещать миниатюры в заданные рамки целиком, либо увеличивать их по ширине, обрезая картинку по высоте, что не попадает в заданные рамки.

altasib.imagebox 6


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

Размещение миниатюр без обрезания (с сохранением пропорций).

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

Данный компонент можно использовать и на статической странице, при этом его нужно размещать через визуальный редактор, как обычные компоненты. После размещения в поле "ID элемента" в настройках компонента необходимо указать ID требуемого элемента вручную.
Если у вас возникли вопросы по работе модуля, вы можете задать их нам в техподдержку: Техподдержка модулей для 1С-Битрикс
1.3.0- Добавлена настройка показа фотографий во всплывающем окне, если детальная картинка не превосходит размерами превью
1.2.0- Добавлена возможность показа фотографий как для основного товара, так и для торговых предложений. Также теперь возможно выводить превью фотографий справа от основной фотографии
1.1.0 - Добавлена функция увеличения отдельных элементов изображения при перемещении курсора по нему.

Пример работы компонента:

Назад в раздел