Как сделать всплывающее окно на сайте joomla

Добавил пользователь Валентин П.
Обновлено: 05.10.2024

Здравствуйте, на связи Федор Васильев. Довольно редко для Joomla можно найти что-то стоящее и бесплатное, как правило все необходимые расширения для сайта стоят денег.

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

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

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

А также есть возможность указать прямо во всплывающем окне произвольную кнопку, для закрытия окна по клику мыши. Ниже я привел необходимую строчку кода.

В этой статье я расскажу о нескольких способах, позволяющих создавать всплывающие изображения с помощью JCE.

Многих читателей интересует вопрос: можно ли с помощью JCE создавать изображения с эффектом lightbox, т.е. такие, которые плавно увеличиваются при клике. Ответ: да, можно, но есть некоторые проблемы и подводные камни. В этой статье я расскажу о нескольких способах, позволяющих создавать всплывающие изображения с помощью JCE.

Для начала небольшое вступление. Способов создания всплывающих изображений существует несколько. В сущности, способ только один – javascript. Но нас, в первую очередь, интересует удобство создания этих изображений. Да, можно подключить к шаблону скрипт и затем в коде к каждой картинке добавлять определенный тег. Все будет работать, но это неудобно, т.к. даже в одной статье изображений может быть достаточно много. Ниже я приведу несколько методов создания всплывающих изображений с помощью JCE, упорядочивая их по удобству, т.е. самый неудобный, на мой взгляд, метод будет первым в списке, самый удобный – последним.

Метод 1. Ручное создание всплывающих изображений.

Начнем с некоторых базовых вещей, которые нужно понимать для того, чтобы создавать всплывающие изображения. Всплывающее изображение – это как бы два изображения в одном: превью(маленькая картинка) и полноразмерная картинка. При чем вторая появляется только после клика по первой. С точки зрения html-кода обычное изображение будет выглядеть так:

Здесь подразумевается, что изображение уменьшенное, т.к. жестко заданы требуемые размеры. Еще раз: само изображение имеет размеры, скажем, 300х224px, но т.к. в коде задана ширина и высота, на странице оно будет отображаться в размере 150х112px.

А вот как будет выглядеть всплывающее изображение:

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

Зная это можно переходить к описанию первого способа. Заключается он в том, что коды изображений в виде, примерно таком, как описано выше, добавляются прямо в основной код. Естественно, сначала нужно подключить к основному шаблону Joomla скрипт, который будет увеличивать изображения и узнать атрибут, который будет указывать скрипту на необходимость увеличения. О том, как подключается скрипт, а также об атрибуте обычно написано в документации к скрипту. Хотя все это имеет мало отношения к JCE. Да и удобство такого способа оставляет желать лучшего.

Метод 2. Создание всплывающих изображений с помощью плагина JCE Mediabox.

Этот метод удобнее предыдущего, но также требует совершения лишних действий. Плагин JCE Mediabox является бесплатным и может быть скачан с оф. сайта разработчиков JCE, по этой ссылке. Устанавливается плагин через менеджер расширений Joomla и после установки должен быть активирован.

Работает JCE Mediabox так:

Если кто-то не понял первые три пункта или хочет посмотреть как будет всплывать окно, то вам сюда.

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

Метод 3. Создание всплывающих изображений с помощью плагина JCE HsExpander.

При клике по ней открывается окно:

Здесь множество всяких настроек, но нас интересуют только некоторые из них. Как мы можем видеть, окно разделено на 2 раздела: Popup Image и Thumbnail Image. В первом задаются настройки изображения, которое будет всплывать, а во втором – настройки мини-изображения. Из всех настроек нужно указать:

Пути к большому и мини – изображениям. Эти пути могут быть выбраны через менеджер файлов(иконка справа от поля ввода) и могут совпадать.
Ширину и высоту мини-изображения. Это актуально, если в предыдущем пункте выбраны одинаковые пути, т.е. мы не имеем двух изображений: большого и маленького, а имеем только большое. В этом случае, задав ширину и высоту, мы превратим его в мини-изображение, а после клика оно будет всплывать в полном размере.
Альтернативный текст для изображения. Этот текст будет появляться в том случае, когда у пользователя отключено отображение картинок браузером, также этот текст индексируется поисковыми системами.

Прочитать подробную инструкцию к плагину и посмотреть демо можно на этой страничке.

Этот метод бесплатен и достаточно удобен, но все же есть еще один, еще удобнее.

Метод 4. Создание всплывающих изображений с помощью плагина JCE Image Manager Extended.

При клике по кнопке плагина в редакторе открывается следующее окно:

На этом сайте я принял для себя максимальную ширину мини-изображений в 500px. При добавлении изображений большего размера к статье, я выставляю в поле Ширина значение в 500px, высота при этом изменяется автоматически. Если изображение в ширину меньше 500px, то я вообще ничего не меняю. После этого все мини-изображения в статье имеют одинаковые размеры и плавно увеличиваются до оригинальных размеров при клике.

Подводя итог, хочу сказать, что лучшим решением оказался плагин JCE Image Manager Extended. Хотя многое зависит от задачи. Если вам необходимо вставить более десяти рисунков, то удобнее первый создать с помощью вышеописанного плагина, а остальные –копированием кода первого, изменяя названия изображений. Если все они названы однотипно, например, img1, img2, img3, и.т.д., то добавить их копированием будет гораздо проще. Да, сначала способы создания всплывающих изображений кажутся достаточно сложными и неудобными, но это дело привычки. Знаю по себе.

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

Если вы подключили к странице несколько разных форм и вам нужно вызывать определенную, то укажите в классе ее айди, как это показано в примерах для кнопки и картинки на скриншоте выше. Для модуля с id 265, класс будет выглядеть следующим образом: class= «contactus-265″.

Simple Pop-Up: плагин для создания всплывающих модальных окон

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

Некоторые особенности плагина:

Читайте также: