Joomla 3.x, Bootstrap, Popovers и Tooltip - интерактивная карта с маркерами и подсказками |
Для реализации такой идеи есть огромная масса способов и решений. В данной статье я опишу два простых варианта как можно сделать интерактивную картинку при этом используя минимум кода и стандартные средства Joomla. Я буду использовать подготовленную картинку используя css спрайты, немного HTML и CSS кода. HTML я применяю обычным DIV и UL списком.
Вариант №1: Joomla 3.x + Bootstrap + PopoversДанные вариант подразумевает под собой использование фреймворка Bootstrap и его Popovers. Отлично будет работать на Joomla 3.x и шаблонах использующих Bootstrap.
Для начала нам понадобится главная картинка, на которой уже будут проставлены маркеры в необходимых местах. Пример картинки вы можете скачать с нашего сервера. Данную картинку нужно поместить в папку images вашего шаблона.
Далее вам понадобится создать простой HTML модуль (Расширения => Менеджер модулей => Создать => HTML-код) и вставить туда код который указан ниже. Рекомендуем отключать визуальный редактор когда работаете с стандартным HTML модулем, т.к. он может обрезать части кода.
HTML код интерактивной карты и всплывающих подсказок с помощью Bootstrap Popovers и Joomla: <div id="map-object"> Далее вам нужно активировать работу Popovers. Для этого откройте главный файл шаблона (templates/ваш_шаблон/index.php или если используется какой либо фреймворк вставку кода нужно осуществлять в соответствии с вложением фреймворка) и вставьте данный код до тега </head>.
JS код активации Popovers: <script type="text/javascript"> После вставки HTML кода в HTML модуль и вставки JS кода в шаблон, вам нужно вставить CSS код в CSS файл шаблона. Откройте templates/ваш_шаблон/css/любой-подгружаемый-css-файл.css. Вставку кода рекомендую делать в самом низу страницы.
CSS код для Popovers (код который нужно изменять, прокомментирован): #map-object{ После того как вы все сделали, можете посмотреть результат у себя на сайте. Данный пример был проверен на стандартном шаблоне Protostar (Joomla 3.x) который поддерживает фреймворк Bootstrap. Если вы используете шаблон в котором нет поддержки Bootstrap, то предварительно подключите фреймворк к вашему шаблону.
В примере выше я проставил 3 маркера, которые работают, отображая информацию при наведении курсора мышки на иконку и при клике на эту иконку открывается нужная вам страница (URL прописывается в href="#"). Если вам необходимо сделать так чтобы всплывающая подсказка появлялась только при КЛИКЕ на иконку и оставалась на месте до обратного клика на иконку, то вам нужно удалить из HTML кода опцию data-trigger="hover". В итоге код должен выглядеть так: <a href="#" rel="popover" data-placement="bottom" data-content="<img src='images/1.jpeg' alt='название картинки' /> <span class='ttext'>Любой произвольный текст...</span> <span class='tprice'>950 руб. шт.</span> <a class='linkcontent' href='#' title='Подробнее...'>Подробнее...</a>" data-original-title="Заголовок">Заголовок</a> Как видите в данном примере выше я добавил еще ссылку "Подробнее" с классом linkcontent (например для перехода на поднобную информацию о маркере). Наглядный пример вы можете увидеть на видео в данной статье.
Хотелось бы также заметить что вы можете легко редактировать всплывающее окно, добавлять туда свои опции и прочую информацию. Например чтобы отобразить положение и стрелку всплывающего окна, вы можете использовать опцию data-placement="left" (в данном случае всплывающее окно будет отображатся слева от маркера, что очень удобно если размер страницы не позволяет показать окно справа). Более подробно о дополнительных настройках Popover вы можете узнать на официальном сайте —
Вариант №2: Joomla 3.x + TooltipВторой вариант можно использовать на абсолютно всех версиях CMS: Joomla 1.5, Joomla 2.5 и на Joomla 3.x, т.к. мы будем использовать встроенный в CMS скрипт Tooltip. В примере ниже я делал интерактивную карту на Joomla 3.3 и стандартном шаблоне Beez3. Все делаем практически по тому же сценарию что и выше, за исключением некоторых строк кода.
Для начала убедимся что в нашем шаблоне используется вызов всплывающих подсказок. Для этого откройте код страницы своего сайта (в браузере нажмите на правую кнопку и в контекстном меню выберите - исходный код страницы). В верхней части экрана ищем код подсказок, можно использовать поиск встроенный в браузере (введите в поиске слова JTooltips или hasTip). Если поиск найдет код вызова подсказок, то хорошо. В случае если на странице нет вызова кода подсказок, вам нужно добавить вызов кода в ваш шаблон (templates/ваш_шаблон/index.php или если используется какой либо фреймворк вставку кода нужно осуществлять в соответствии с вложением фреймворка): JHtml::_('behavior.tooltip'); Данный PHP код добавляется в верхную часть главного файла шаблона. После добавления кода, обновите страницу в браузере и убедитесь что у вас подгружается скрипт Tooltip (также как и в примере поиска кода выше).
Далее вам также нужно создать HTML модуль и вставить туда код, который указан ниже. (все делается также как я описывал в начале данной статьи).
HTML код интерактивной карты и всплывающих подсказок с помощью стандартной подсказки Tooltip Joomla: <div id="map-object"> После вставки HTML кода, вам нужно вставить CSS код в CSS файл шаблона (делаем также как описывал в начале данной статьи)
CSS код для Tooltip (код который нужно изменять, прокомментирован): #map-object{ Как видите в отличии от первого варианта с использованием Bootstrap, у нас добавились несколько новых CSS строк. В основном они предназначены для оформления нашего всплывающего окна.
После также сохраняем все и смотрим на результат в браузере. При желании вы можете изменить оформление всплывающего окна и его содержимого (фон, цвет, размер и пр.). Незабываем о том что второй вариант можно использовать на любой версии CMS.
Как мне найти координаты моего маркера?Очень просто. Откройте картинку с маркерами в любом графическом редакторе или просмотрщике (в нашем примере это background-map.jpg) после чего измеряем растояние от левого края изображения до начала нужного маркера и также от верхнего края изображения до начала нужно маркера, после этого указываем в CSS координаты. Для примера ниже скриншот первого маркера. Как можно увидеть от левого края картинки он имеет растояние в 359px, а от верхнего 114px. Указываем такие координаты в CSS файле для каждого созданного маркера (#marker1, #marker2, #marker3, #marker4 .....).
Видео пример двух вариантов интерактивной картинки:
На этом в принципе все. HTML код у вас есть, CSS также имеется (постарался хорошо прокомментировать для более понятного восприятия). Остальное все зависит от вашего знания, умения и конечно же желания. Если возникли вопросы, пишите в комментариях или задавайте вопросы на нашем форуме. Если понравилась статья, будем признательны если поделитесь ей в социальных сетях.
Автор: Евгений Матюшенко. © Joomfans.com |
|
Партнеры |
|
Joomla 3, Bootstrap и Google Prettify - качественная подсветка синтаксиса кода → |
---|
Комментарии
а как сделать модуль
Чтобы выводил картинку и координаты
Создаете обычный HTML модуль и вставляете туда код.
Цитирую asdasdasd:
Создаете либо обычный материал (статью) либо HTML модуль. Выключаете визуальный редактор и вставляете туда HTML код, который указан в статье. CSS и JS коды вставляете в файлы шаблона, как описано выше. После публикуете статью или модуль на странице сайта. Более ничего не требуется.
вставляю html код, но при сохранении опять активным становится визуальный редактор и все теги в ковычках которые идут в
Зайдите в настройки пользователя (в вашем случае администратор) и в опции "Редактор пользователя" измените TinyMCE (или JCE) на "Простой редактор HTML". После вставляйте код в статью и сохраняйте.
Пытался сделать все первым способом, на сырой CMS Joomla 3.x
Ничего не вышло, в чем причина так и не понял, может я чего-то не учел, может сделал что-то не так, ничего не отображается вообще, не поможете пошагово?
Все получилось сделать, но до сих пор не пойму как вы сделали такие иконки луп, у меня ничего вообще не выходит отобразить, ни иконки и поменять цвет блока.
Здравствуйте!
Иконки луп, расположены на самом изображении — http://joomfans.com/images/background-map.jpg, остальное уже прописывается в коде как показано выше.
Что именно у вас не получается?
У вас на картинке готовые иконки лупы, а можно ли как-нибудь привинтить уже их вместе белых квадратиков, много способов перепробовал, даже просто перекрасить квадратик, но ничего не выходит у меня.
Если у вас есть идеи или готовое решение, не могли бы поделиться им? подсказать куда в ваш код добавить и что?
RSS лента комментариев этой записи