Корзина 0
Каталог решений
Решения-Инструменты

Покупка продления купона

Продолжительность:
Общая сумма:
0 руб.
Ваш запрос успешно отправлен!

Я согласен с условиями активации продлений
Продлить
Продолжить покупки

Интерактивные метки на фото + взрыв-схемы

Интерактивные метки - это модуль который позволяет создавать интерактивные метки (маркеры) на изображении или фото с кратким описанием в виде открывающейся подсказки и детальным описанием в виде модального окна.Взрыв схемы - позволяют передать информацию об изделии или устройстве в более простом и удобном для понимания виде. Дословно означает «чертёж (эскиз/схема) в разобранном виде».Модуль позволяет установить на взрыв-схемах отметки с описанием его деталей. Также возможно привязать карточку товара с описанием и кнопкой для перехода к данному товару.Основные возможности (уже реализовано):Возможность добавлять интерактивные метки на изображения и фото с помощью удобного графического редактора.Добавлять краткое описание к метке в виде открывающейся подсказки.Добавлять подробное описание с использованием текста, фото и видео информации в виде отрывающегося модального окна.Возможность настраивать масштабирование картинки с метками для удобного отображения на компьютерах и мобильных телефонахРабота модуля в двух режимах - стандартные метки и взрыв-схемыПримеры реализации по индивидуальным заказам, на базе данного модуля:Создание географии работы компании - ПримерСоздание взрыв-схем и схем деталировки запчастей и комплектующих (оформление через корзину и заказ) - ПримерДеталировка готовых решений на сайте производителя Медицинская мебель - ПримерОформление маршрута прогулочного катера - ПримерПланы по обновлению решения:Выпуск новой версии модуля 2.0 - доработка более удобного интерфейса для гибкой настройки модуля. Внесение более 25 правок, которые были выявлены в течении 2024 года. Будет выпущено новое руководство, где предоставим описание по кастомизации дизайна.Создание раздела с настройками для кастомизации решения через административный раздел битриксаПланы по развитию решения:Выпустить отдельный модуль взрыв-схемы, который будет работать только с торговым каталогом и товарами (редакция "Малый бизнес" и "Бизнес"). Будет базово адаптирован под корзину Битрикс и оформление заказа.Адаптировать модуль на большинство шаблонов интернет-магазинов из магазина Битрикса.Разработать вариант модуля для создания меток на базе Яндекс карт.Руководство по работе с модулем - Инструкция v.1Руководство по работе с модулем - в разработке новая версия!

Интерактивные метки на фото + взрыв-схемы

Интерактивные метки на фото + взрыв-схемы

Купить: 12 400 руб.
Попробовать (14 дней) Онлайн-демо
от Инфоград веб-студия
Скриншоты
Описание

Технические данные

Опубликовано:
26.08.2021
Обновлено:
27.10.2025
Версия:
0.2.4
Установлено:
100 - 499 раз
Подходящие редакции:
«Первый сайт», «Старт», «Стандарт», «Малый бизнес», «Бизнес», «Интернет-магазин + CRM»
Адаптивность:
Да
Поддержка Композита:
Нет
Совместимо с Сайты24
Нет

Пользовательское соглашение

Описание

Интерактивные метки - это модуль который позволяет создавать интерактивные метки (маркеры) на изображении или фото с кратким описанием в виде открывающейся подсказки и детальным описанием в виде модального окна.

Взрыв схемы - позволяют передать информацию об изделии или устройстве в более простом и удобном для понимания виде. Дословно означает «чертёж (эскиз/схема) в разобранном виде».

Модуль позволяет установить на взрыв-схемах отметки с описанием его деталей. Также возможно привязать карточку товара с описанием и кнопкой для перехода к данному товару.

Основные возможности (уже реализовано):
  • Возможность добавлять интерактивные метки на изображения и фото с помощью удобного графического редактора.
  • Добавлять краткое описание к метке в виде открывающейся подсказки.
  • Добавлять подробное описание с использованием текста, фото и видео информации в виде отрывающегося модального окна.
  • Возможность настраивать масштабирование картинки с метками для удобного отображения на компьютерах и мобильных телефонах
  • Работа модуля в двух режимах - стандартные метки и взрыв-схемы

Примеры реализации по индивидуальным заказам, на базе данного модуля:
  • Создание географии работы компании - Пример
  • Создание взрыв-схем и схем деталировки запчастей и комплектующих (оформление через корзину и заказ) - Пример
  • Деталировка готовых решений на сайте производителя Медицинская мебель - Пример
  • Оформление маршрута прогулочного катера - Пример

Планы по обновлению решения:
  1. Выпуск новой версии модуля 2.0 - доработка более удобного интерфейса для гибкой настройки модуля. Внесение более 25 правок, которые были выявлены в течении 2024 года. Будет выпущено новое руководство, где предоставим описание по кастомизации дизайна.
  2. Создание раздела с настройками для кастомизации решения через административный раздел битрикса
Планы по развитию решения:
  1. Выпустить отдельный модуль взрыв-схемы, который будет работать только с торговым каталогом и товарами (редакция "Малый бизнес" и "Бизнес"). Будет базово адаптирован под корзину Битрикс и оформление заказа.
  2. Адаптировать модуль на большинство шаблонов интернет-магазинов из магазина Битрикса.
  3. Разработать вариант модуля для создания меток на базе Яндекс карт.
Руководство по работе с модулем - Инструкция v.1
Руководство по работе с модулем - в разработке новая версия!
Отзывы (1)
Обсуждения (10)
Авторизуйтесь , чтобы оставить отзыв или задать вопрос разработчику.
1 - 5 из 10
Назад12Вперед
Что нового
0.2.5 (01.05.2025) (beta) Изменения : 1. Добавил подмешивание в кеш компонента версию модуля, чтобы корректно отображались изменения после обновления. 2. Исправление по расчету максимальной высоты, когда не включет режим масштабиирования 3. Убрать все div из visualNode.querySelectorAll('div[data-item="point"]'). Чтобы можно было различные типы тегов писать 4. Добавить настройку для модальных окон. Добавить пользовательское поле для раздела, чтобы можно было использовать кастомные модальные окна. 5. Изменил проверку при закрытии модального окна, если модальное окно без тултипа, то метка закрывается при закрытии модальног окна. 6. Добавить свойство у метки "Отображение заголовка метки ПК" и "Отображение заголовка метки ПК" Оно должно быть в виде выпадающего списка. При выборе конкретного варианта поведение заголовка должно соответствовать выбору. Варианты ПК: - не отображать - отображать всегда - отображать при наведении Варианты Моб: - не отображать - отображать всегда Свойство для ПК работает на ПК, свойство для Моб. работает на мобильных 7. Реализовать кнопку клонирования взрыв-схемы со всеми текущими настройками. 8. Для временного наполнения каталога взрыв схемами создать функционал. Вместо загрузки картинки-подложки загружать .pdf документ и он будет отображаться при выводе взрыв схемы. Так можно быстро заполнить каталог с требуемой структурой, а потом постепенно заменить все pdf взрыв-схемами. Такое реализовывали для https://vitagro57.ru/ 9. В админ панели исправлено сохранение номера позиции. Не работало
0.2.4 (01.05.2025) ВНИМАНИЕ!
Перед установкой обновления ОБЯЗАТЕЛЬНО выполните полное резервное копирование сайта.

Внесены следующие изменения:
  • Большое изменение в работе визуального редактора в административной части. Появилась возможность перетаскивания метки и панели настройки при помощи мышки
  • Добавили возможность масштабирования картинки-подложки
0.2.3 (18.04.2025) Внесены следующие изменения:
  • Исправили ошибки возникающие при установке модуля в демо период. Ошибка импорта пользовательского свойства UF_LABEL_TOTAL
0.2.2 (18.02.2025) Внесены следующие изменения:
  • Исправили ошибки возникающие при установке модуля в демо период
0.2.1 (12.02.2025) Внесены следующие изменения:
  • 1. В административной части на вкладке «Визуальный редактор» не отрабатывали стрелки вверх и вниз для перемещения координат
  • 2. Внесли исправление в component.php - наблюдалась проблема при кешировании компонента внутри компонента
  • 3. Исправлена ошибка в шаблоне компонента
  • 4. Исправили инициализацию JS для вызова «кода-вставки»
0.2.0 (04.02.2025) ВНИМАНИЕ!
Перед установкой обновления ОБЯЗАТЕЛЬНО выполните полное резервное копирование сайта.
После обновления необходимо сбросить кэш, для применения обновлений шаблона, стилей и скриптов

Внесены следующие изменения:
  • 1. При масштабе в 75% и клике по списку товаров происходило перемещение (дергание) картинки подложки - исправлено.
  • 2. Реализовали открытие Тултипа (tooltips) по центру при клике по товару из списка товаров в таблице.
  • 3. Внесены изменения в событие onLoadIMarkers - его обработка перенесена после загрузки основного изображения.
  • 4. В функцию marker_refresh добавили callback обработчик после загрузки.
  • 5. Включить проверку Тултипа (tooltips) при открытии метки - исправлено.
  • 6. Сделали перенос заголовка метки если он очень длинный на другую сторону от метки.
  • 7. Исправили сбои при уменьшении масштаба вертикального изображения.
  • 8. Внесли исправление отображения метки при ее активности. Если Тултип (tooltips) пустой, то он не отображается.
  • 9. Исправление init.js. Перенесено внутрь "include.php".
  • 10. Перенесли все вычисления в component.php.
  • 11. Доработали возможно выключения/выключения таблицы с товарами в режиме врыв-схем. Добавили возможность перенести выбора ее положения: справа, слева, внизу, выкл.
  • 12. Исправили ошибки при установке модуля после окончания демо-режима.
  • 13. Добавлены события new BX.infograd.marker(node, { ...парамтеры..}).on(event, eventHandler); Где event - это событие сейчас доступно init - событие после инициализации метки, showPoint - после открытия метки, showModal - открытие модального окна. eventHandler - это функция обработчик.
  • 14. Исправление при обновлении метки adminSecTab.php - перетирались старые данные.
  • 15. Исправлена ошибка расчетов отображения мин размеров зума.
  • 16. Исправлена функция - в мобильной версии не отображалась активная метка.
  • 17. Исправлено - работа функции выравнивания по высоте в центр.
  • 18. Исправление чтобы метка вставала по центру по клику из списка в таблице.
  • 19. Другие доработки для стабильной и правильной работы модуля.
0.1.7 (04.10.2023) Внесены следующие изменения:
  • 1. Пересмотрен алгоритм работы масштабирования. Было принято что за 100% масштаба будет принята меньшая из сторон картинки. После установки обновления возможно потребуется корректировка масштаба
  • 2. Исправлена ошибка которая возникала при установке на версию php 8.1
0.1.6 (21.06.2023) Внесены следующие изменения:
  • 1. Исправлена ошибка с кодировкой win 1251 в административной панели.
0.1.5 (22.05.2023) Внесены следующие изменения:
  • 1. Внесено исправление отображения блока для вставки на версии php 8.1
0.1.4 (11.04.2023) Внесены следующие изменения:
  • 1. Добавлена функция BX.infograd.marker_refresh(), используется в js в тех случаях когда, необходимо вызвать интерактивные метки на странице не сразу или по какому либо событию
  • 2. Для вызова меток через тэг, добавлено подключение стиля из шаблона компонента
  • 3. Внесены большие исправления в функционал масштабирования
  • 4. Исправлена небольшая ошибка с работой при PHP 8.1
0.1.3 (15.02.2022) Внесены небольшие правки
0.1.2 (24.01.2022) Внесены следующие изменения:
  • 1. Добавлено позиционирование картинки при масштабировании
  • 2. Добавлено изменение цвета кнопки Подробно
0.1.1 (26.12.2022) Внесены следующие изменения:
  • 1. Исправление ошибок с поддержкой php 8.1

0.1.0 (08.12.2022) Внесены следующие изменения:
  • 1. Добавлен новый тип меток - "взрыв-схемы". Он позволяет создавать схемы разбора или деталировки с возможностью прикрепить к метке товар.
  • 2. Добавлено большое изменение связанное с масштабированием и перетаскиванием картинки.
  • 3. Полностью изменены скрипты внутри модуля.
  • 4. Изменен стандартный шаблон создания меток
  • 5. Изменены стили в соответствии с вариантами отображения: взрыв-схема или стандартная метка


ВНИМАНИЕ!
Перед установкой обновления ОБЯЗАТЕЛЬНО выполните полное резервное копирование сайта.
После обновления необходимо сбросить кэш, для применения обновлений шаблона, стилей и скриптов
0.0.4 (11.03.2022) Внесены следующие изменения:
  • 1. Исправлено смещение метки при масштабировании экрана.
  • 2. Добавлена вкладка "Визуальный редактор" меток в раздел инфоблока.
  • 3. Добавлены подсказки для пользовательских полей в разделе инфоблока.
  • 4. Изменены методы работы js для вызова через дом-элемент и компонент.
  • 5. Измены некоторые стили и стандартный шаблон компонента.
0.0.3 (11.11.2021) Внесены следующие изменения:
  • 1. Внесены исправления в стили
  • 2. Внесены изменения в шаблон компонента infograd.markers
  • 3. Исправлена критическая проблема отображения пролога модуля

ВНИМАНИЕ!
После обновления необходимо сбросить кэш, для применения обновлений шаблона, стилей и скриптов
Установка
Модуль устанавливается с помощью стандартного установщика на активную лицензию 1С-Битрикс редакции не ниже "Старт".
Модуль не требует отдельного места на лицензии Битрикс.
Возможно создавать неограниченное количество интерактивных изображений с метками и использовать их на любом сайте, который создан в рамках лицензии.

Процесс установки:
  1. Установите решение из официального магазина маркетплейс.
  2. После успешной установки, в разделе "Контент", у вас появляется новый тип инфоблоков - Инфоград. В нем будет создан инфоблок "Маркеры" с заполненными демо-данными.
Процесс создания нового изображения с метками:
  1. В разделе "Контент" в инфоблоке "Маркеры" создайте раздел и назовите его по названию интерактивного изображения. В настройках раздела загружается фотография, на которой будут размещаться метки. Там же отображается код для вставки на сайт. Вы размещаете этот код в любом месте вашего сайта, где можно использовать HTML элементы и после сохранения на странице сайта будет загружаться интерактивные метки на фото.
  2. После, в созданном разделе, создайте элемент, который и будет являться меткой на фото.
  3. Задайте у данного элемента все необходимые значения и параметры (координаты, заголовки и др.). Для примера вы можете смотреть настройки элементов в демо-данных.
Руководство по работе с модулем - Инструкция v.1
Поддержка
Мы с радостью ответим на все ваши вопросы, связанные с работой наших решений, внимательно выслушаем пожелания по необходимым функциям, исправим ошибки (если вдруг они будут обнаружены).

Техническая поддержка: info@webinfograd.ru

Решение добавлено в корзину

Перейдите в корзину и оформите заказ или продолжите покупки
Перейти в корзину
Продолжить покупки

Готовые решения

О маркетплейсе

Для разработчиков

Контакты
Карта сайта
Политика конфиденциальности
1С-Битрикс http://www.1c-bitrix.ru Мы работаем с 10:00 до 19:00 по московскому времени.

© 2001-2025 «Битрикс», «1С-Битрикс». Работает на 1С-Битрикс: Управление сайтом. 16+