Как добавить всплывающее фото при наведении на слово в Mobirise?

В прошлой заметке, мы выяснили, что можно создать всплывающие подсказки для ссылок и слов в конструкторе 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>. 

Заключение.

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

Не забывайте чистить кэш браузера, после редактирования сайта и перед очередным просмотром изменений через браузер.

Если будут вопросы, поправки и дополнения – оставляйте комментарии.

Отправить комментарий

Новые Старые