Как сделать всплывающее окно на сайте joomla 3 с помощью плагина или вставки кода?

Всплывающая форма на сайте.Приветствую Вас дорогие читатели моего блога. В последнее время активно занимаюсь раскруткой своего бренда в сети и улучшениями поведенческих факторов на сайте. Как говорит наш любимый Яша: «Делайте сайты для людей, и они к Вам потянутся». Среди положительных моментов, для удобства пользователей, я решил все видео ролики малых размеров, которые вставляю на блог через html код, полученный на YouTube, сделать во всплывающих окнах на сайте, что более удобно при просмотре со всех устройств.

Ранее в сайдбаре мне приходилось делать вставки полезного видео, которым я хочу поделиться, но столкнулся с рядом проблем, а именно:

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

Мои советы помогут многим блоггерам, да и просто вебмастерам, которые планируют создать такие окна на своем сайте. Для реализации поставленной задачи давайте рассмотрим подробнее все способы.

Создание всплывающего окна на сайте joomla со вставкой видео из Youtube

Лично я свой блог сделал на Джумла, многие ее не любят, но это те, кто привык делать дневники на вордпрессе все под один дизайн. Для Джумла я использую интересный текстовый редактор JCE Editor, который зарекомендовал себе не только как удобный в использовании плагин, но и как наиболее безопасный в отличие от TinyMCE, благодаря уязвимости в котором неоднократно ломали сайты. Так вот. Если вы используете данный редактор, то нам необходимо скачать на официальном сайте для него расширение под названием JCE MediaBox. Это делается для дальнейшей связки редактора с последующей настройки окон.

Как сделать всплывающее окно на сайте joomla 3 с помощью плагина или вставки кода?

Давайте покажу на своем примере как я вставляю видео, распложенное в правой колонке моего блога. Тут нам понадобится картинка, любого формата, но желательно, чтобы она была подогнана по ширине и высоте модуля. Нарисовать ее можно в фотошопе или же просто вставить скриншот, так как границы модуля в любом случае ее обрежут. Я выбрал скриншот одного из своих видео по созданию гиф анимации картинки и вставит в произвольный модуль html. Отлично, наша картинка подогнана и вставлена по размеру.

Далее нам необходимо зайти на страницу самого видео в YouTube и скопировать его адрес из адресной строки браузера.

Теперь в открытом текстовом редакторе щелкаем по нашей картинке и переходим в раздел создания ссылки, где нам необходимо вставить наш url видео и выставить следующие настройки как указано ниже:

Вставляем ссылки с канала ютюб в материал.

Вставка класса для отображения окна.

Поля для настройки окон.

Из практики наличие модальных «всплывающих» окон на сайте всегда ведет к раздражению пользователей и многие боятся их закрывать и просто уходят с сайта тем самым увеличивая показатели отказа и портя статистику.

Данный плагин работает только на Джумла всех версий и очень сильно помогает сэкономить время и упростить работу.

Вот такое прикольный эффект должен получиться в окне при нажатии после вставке видео (кликаем на картинку):

Как сделать всплывающее окно на сайте joomla 3 с помощью плагина или вставки кода?

Создание всплывающего окна с помощью стороннего скрипта

Тут нам предстоит поковыряться в нашем коде и подключить новую таблицу стилей, которую нам дадут при скачивание самого файла (скачать скрипт окна). Наша задача сделать, чтобы через определенный промежуток времени на сайте всплыло окно с нужной информацией.

После того как вы скачали архив со скриптом можно более подробнее ознакомиться с примерами запустив в любой из папок Example, через наш браузер, файл index.html где при нажатии на ссылки мы сможем посмотреть примеры.

Итак, приступим к установке данного скрипта поэтапно:

  • распаковываем архив на компьютер;
  • выбираем нужный нам вариант example1 – example 5 и копируем на хостинг таблицу стилей окна colorbox.css и папку images;
  • закачиваем в папку со скриптами файл jquery.colorbox.js;
  • подключаем к сайту сам скрипт путем вставки в файл index.html строчки

Код html для подключения стилей.

Теперь между тегами /body вставляем следующий код:

 <script src=”/scripts/jquery.colorbox.js”></script>

 <script>

 function openColorBox()  {

$.colorbox  ({html:”<h2>Здравствуйте уважаемые пользователи</h2>”});

}

 setTimeout(openColorBox, 5000);   </script>   (числовое значение данной строки задает в миллисекундах время появления данного окна).

После обновления страницы должно появиться окно с надписью, которую мы заключили в тег <h2>.

Создание галереи изображений на странице материала или в модуле плагином SigPlus

Теперь давайте рассмотрим интересный плагин, который создаем классные эффекты при просмотре галереи. Тут нам необходимо будет установить плагин, создать папку с изображениями и прописать путь к ним.

Данный плагин имеет массу возможностей и очень полезен при создании любого сайта и решения ряда проблем. Вот некоторые особенности:

  • оптимизация при загрузке картинок на сайт;
  • вставка в любое место материала или в модуль с помощью простого тега;
  • регулируется отображение по размеру, высоте и количеству изображений на странице в строке;
  • можно сделать карусель изображений и отобразить описание и заголовки каждого фото;
  • поддерживается всеми браузерами и качественно отображается;
  • настраиваемые эффекты затухания и отображения окон.

Итак, у нас есть группа фотографий, которые мы хотим вставить в галерею и для этого создаем для них папку и называем ее “fotki”. Загружаем в нее все фотографии (обратите внимание, что все фото должны иметь названия на латинице или же цифры).

Далее идем в корень нашего сайта в папку с изображениями Imagesи создаем там новую папку куда и будем закидывать все галереи своего сайта, к примеру, назовем ее “myphoto” и закинем нашу галерею в папке “fotki”.

Итак, плагин включен, фотки в нужной директории, теперь необходимо в самом плагине прописать путь к нашей корневой папке категорий “myphoto”, делаем как указано на скриншоте ниже.

Как сделать всплывающее окно на сайте joomla 3 с помощью плагина или вставки кода?

Вот и все практически, остается только в наш материал с интересной статьей вставить нужный тег, в нашем случае он будет выглядеть следующим образом:

{ gallery} fotki { /gallery}  – суть в том, что корневую папку указывать не надо в самом теге, а вставляем папку которая находится в не и получаем красивую галерею.

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

{gallery width=240 height=150 crop=1}fotki{/gallery}

Таким же способом вставляем данные галереи в материалы и отдельные модули на сайте. Также не обязательно выводить группу фотографий, а достаточно вставить одну картинку, лично я использую данный метод для показа лицензии организаций и сертификатов на сайтах клиентов.

Модальные окна на сайте Joomla с помощью плагина RokBox

Наткнулся на очень интересный плагин, который тоже может быть полезен при оформлении материалов на сайте. Весит совсем немного и устанавливается в 2 секунды. С его помощью можно реализовать следующие решения:

  • вывести видео YouTube при нажатии на ссылку в тексте;
  • вывод материалов в окно с активными кнопками;
  • сделать окно при нажатии  на картинку или группу картинок (галерея);
  • можно в окно вставить форму подписки на рассылку сайта.

Скачав плагин просто устанавливаем его через менеджер приложений и идем в панель управления, где и настраиваем нужные нам параметры

После тонкой настройки плагина, нам остается только в нужном месте материала или модуля вставить одну из следующих команд с демо страницы  самого плагина вот тут: http://demo.rockettheme.com/joomla-extensions/rokbox/  

К примеру нам надо вывести картинку в окне и тут мы берем с демо страницы нужный нам синтаксис и вставляем в статью, выбрав нужный кусок текста в качестве анкора и выглядит это так  (ниже в окне увидите код которые я вставил в сслыку).

<<пример всплывающего окна>>

Подведем итог положительных моментов использования всплывающих окон на сайте:

  • Акцентирование внимания на важных акциях и полезной информации посетителей сайта;
  • Возможность возврата клиентов с помощью специальных форм с поощрениями при подписке;
  • Компактное отображение большого числа картинок не нагружаю сервер при работе больших компонентов CMS;
  • Удержание пользователей на страницах своего сайта при просмотре видео с различных устройств;
  • Улучшение поведенческих факторов при удобном использовании элементов сайта;
  • Сбор базы подписчиков с использованием всплывающих форм при заходе на сайт или при уходе с сайта.

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

С уважением, Галиулин Руслан.

Рейтинг
( Пока оценок нет )
Руслан Галиулин/ автор статьи
Если вы решили чему-то научиться и познать что-то новое в сфере заработка в интернете и построении бизнеса, то вы на правильном пути, и мой блог — Вам в помощь.
Понравилась статья? Поделиться с друзьями:
FIRELINKS.RU
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: