Ninja Shadowbox – вывод контента в красивом всплывающем окне - 2.0 out of 5 based on 2 votes

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

Ninja Shadowbox работает совместно с компонентом Shadowbox который является очень хорошим кросс-браузрным и кросс-платформенным написанным на JavaScript jQuery плагином jQuery, предназначенным для показа медиа контента.

Внимание: Примеры работы модуля приведенные в данной статье не уже не работают.

Этот модуль я использую на данном сайте. Поэтому чтобы понять как он работает кликните по изображению коробки расположенной ниже:

box_ninja_shadowbox_sml

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

Функционал модуля

#1. Возможность выбора JS библиотеки для работы Shadowbox;

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

#2. Изображения различных форматов, включая самые распространенные jpg, gif, png;

#3. Ролики в формате SWF;

#4. Ролики в формате FLV;

#5. Выводить ролики с популярных видеохостингов YouTube и ему подобным;

#6. Показывать простые веб страницы.

nas1_m nas2_mМодуль имеет множество настроек разобраться в которых не составит труда. Он имеет русский интерфейс с краткими объяснениями по настройке каждого параметра. Смотрите скриншоты интерфейса настроек модуля.

Использование модуля.

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

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

rel="shadowbox"

Если вы не знаете как делать ссылки на страницы изображения и т. д. то смотрите урок Как сделать ссылку в HTML- виды ссылок - изображение ссылка.

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

 <a href= "путь к изображению.jpg" title="надпись над окном с изображением" rel="shadowbox">Посмотреть изображение</a>

Кликните по ссылке расположенной ниже, чтобы посмотреть, как это будет работать на практике: Посмотреть изображение.

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

<a href= "путь к большому изображению.jpg" title="надпись над окном с изображением" rel="shadowbox"><img src= "путь к мини эскизу.jpg" /></a>

Кликните по мини эскизу для открытия изображения.

pr

Кроме этого при помощи модуля можно сделать целую галерею. Например, вам необходимо показать не одно изображение, а несколько изображений подряд и проматывать их не выходя из шадовбокса. Для этого в ссылке идущей на каждое из изображений необходимо указать следующее: rel="shadowbox[mygallery]"

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

<a href= "путь к изображению.jpg" title="надпись над окном с изображением" rel="shadowbox[mygallery]">Первое изображение</a>
<a href= "путь к изображению.jpg" title ="надпись над окном с изображением" rel="shadowbox[mygallery]">Второе изображение</a> 
<a href= "путь к изображению.jpg" title="надпись над окном с изображением" rel="shadowbox[mygallery]" >Третье изображение </a>

Естественно в виде ссылок может быть не только текст но и мини эскизы изображений.

Пример использования галереи:

Первое изображение | Второе изображение | Третье изображение

Код для открытия какой либо веб страницы в шадовбоксе будет следующий:

<a href= "путь к странице.html" title="надпись над окном со страницей" rel="shadowbox">Открыть страницу</a>

Пример открытия страницы: Открыть страницу

Код для проигрывания видео из YouTube в шадовбоксе будет следующий:

<a href= "http://www.youtube.com/embed/tzpbMyxwYxU" title="Надпись над окном с видео" rel="shadowbox;width=600;height=400">Видеоролик на YouTube</a>

Смотреть видео

Параметры ;width=600;height=400 необходимы для указания высоты и ширины окна в котором буде проигрываться видео, если не указать то окно будет почти на весь монитор. Вот основные варианты использования данного модуля.

В модуле предусмотрена возможность выбора JS библиотеки необходимой для работы Shadowbox. Обратите внимание, что по умолчанию в joomla и так загружается библиотека mootools поэтому если вы не блокировали вывод этой библиотеки то в настройках модуля на против параметра "Загружать JS библиотеку" отметьте пункт "Не загружать". jsb

Библиотека mootools и так весит около 70 кб, а если вы подключите еще одну из библиотек то этим очень сильно нагрузите страницы сайта. Если вы не знаете, загружается ли у вас библиотека mootools или нет, достаточно просто сохранить любую страницу вашего сайта как html с изображениями. Затем зайти в папку, которая создастся при сохранении страницы. Если там будет файл mootools.js значит, библиотека загружается и вам необходимо сделать то, о чем сказано выше.

Файлы для скачивания

Материал подготовлен порталом: webmastermix.ru

 
Рекомендуем ознакомиться:
1 1 1 1 1 1 1 1 1 1 Рейтинг 2.00 (2 Голосов)