В прошлой заметке, мы выяснили, что можно создать всплывающие подсказки для ссылок и слов в конструкторе Mobirise. Сегодня, поговорим о том, как создать всплывающие фото, при наведении на выделенные слова в тексте. И все это, без особых сложностей, посредством бесплатных расширений для Mobirise.
Как создать всплывающая подсказка изображений в тексте, посредством конструктора сайтов Mobirise?
Для работы, нам будет нужен редактор кода. Если у вас бесплатная версия Mobirise, установите альтернативный бесплатный редактор кода для Mobirise и установите дополнение Page Name для добавления кода в конец тега <body> и внутри тега <head>.
Вы можете посмотреть полезные заметками по теме:
«Бесплатные расширения для Mobirise. Миф или реальность?»
«Дополнения и сервисы для HTML сайтов и для сайтов на Mobirise.»
В данном примере, будет использован редактор кода Code Editor witsec (ссылка на загрузку выше). Если у вас платная версия редактора кода, принцип редактирования сайта тот же.
Пожалуйста! Перед редактированием сайта, создавайте ОБЯЗАТЕЛЬНО резервные копии своих проектов.
Сейчас, реализуем с вами такой вариант всплывающего изображения, при наведении на слово из текста:
Начнем, с выбора нужного блока. В примере, буду использовать блок «Статьи» из бесплатной темы Mobirise 5:
И добавляем данный блок. Теперь, нам нужно его наполнить нужным текстом. В моем примере, добавлю текст о котах и немного изменю ширину блока с описанием породы. Это не принципиально и на результат не влияет. Теперь, открываем редактор кода блока:
В своем случае, выделю слова «Порода Эльф» (смотрим пример выше) и сделаю всплывающее фото котенка при наведение на эти слова. Ищем в редакторе кода HTM с нужными словами:
Сразу перед нужным словом «Порода», добавляем код:
<a href="javascript:void(0);" data-toggle="popover" data-trigger="hover" data-html="true" data-content="<img src='https://ссылка_на_фото.jpg' alt='Bild' width='250px'>">
А после второго слова «Эльф», добавляем (после этого кода, один пробел оставляем):
</a>
В коде, у вас должно стать так:
<a href="javascript:void(0);" data-toggle="popover" data-trigger="hover" data-html="true" data-content="<img src='https://ссылка_на_фото.jpg' alt='Bild' width='250px'>">Порода Эльф</a>
Небольшой разбор кода:
Вы можете задать (width='250px' в коде, смотрим выше) максимальную* ширину 250 пикселей (или меньше). При наведении, ссылка выдает всплывающее фото.
*При этом, мне не удалось увеличить отображение фото больш, чем на 250px.
Думаю, не нужно объяснять, что ссылку на фото, нужно заранее загрузить на свой хостинг или хостинг картинок и потом, использовать ее (ссылку) для вставки в код. Вы можете использовать Google Фото или попробовать Comss.pics.
Теперь, чтобы на странице стало всплывать фото при наведении, нужно добавить JavaScript код в конец тега <body>. Если у вас бесплатная версия Mobirise, скачайте и установите дополнение Page Name. В настройках страницы, добавьте код:
<!-- Скрипт всплывающей подсказки -->
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
$('[data-toggle="popover"]').popover({placement: "top"});
});
</script>
Проверяем результат:
Как видим, с мобильной адаптацией, всё в порядке:
Таким образом, вы можете создать любое количество вспыхивающих фото в тексте при наведении на выбранные слова и в разных блоках. При этом, не дублируем на одной странице JavaScript код по несколько раз в конец тега <body>.
Данный эффект, не конфликтует с предыдущим эффектом всплывающих подсказок при наведении на ссылку и/или текст. Если вы, хотите использовать на своей странице сразу несколько всплывающих эффектов, вы просто размещаете два кода в конец тега <body>.
Заключение.
В данной заметке, предоставлен простой и рабочий способ, добавления всплывающих эффектов в виде фото, при наведении на выбранные слова. При этом, у вас есть возможность улучшать, менять и добавлять свои фишки. Моя цель, подкинуть идею, а за вами, реализация своих идей в виде прекрасных проектов. Успехов.
Не забывайте чистить кэш браузера, после редактирования сайта и перед очередным просмотром изменений через браузер.Если будут вопросы, поправки и дополнения – оставляйте комментарии.