Скрипт «Perfect Float Window»

Теги: Библиотеки, Веб-разработка, JavaScript

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

Использовать данный скрипт очень легко. Нужно подключить к странице jQuery, сам скрипт всплывающего окна и его стандартные стили (файл plFloatWindow.css).

Спойлер: «К слову о стилизации» Открыть спойлер

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

  • #plFW_background - фоновая заливка
  • #plFW_fullimage - окно для вывода оригинала изображения
  • #plFW_window - окно для вывода произвольной разметки
  • #plFW_closebtn - кнопка закрытия окна
  • .plFW_slidebutton, #plFW_slideleft, #plFW_slideright - кнопки пролистывания изображения галереи
  • #plFW_imgnum - индикатор номера текущего изображения
  • #plFW_textwrapper - область вывода текста при отображении окна с сообщением
  • #plFW_caption - заголовок окна

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

  • Окно с произвольной разметкой
  • Окно с текстовым сообщением
  • Окно с изображением
  • Окно с галереей изображений

Изображения

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

В коде страницы располагается элемент img, атрибут src которого указывает на изображение-миниатюру. Кроме этого, у него имеется атрибут data-fullimage, который указывает на изображение в оригинальном размере. Alt-атрибут этого элемента используется как заголовок для всплывающего окна с изображением. Элементу присваивается класс plFW_image. Более никаких действий не требуется, всю остальную работу выполняет скрипт.


Галереи

Для того, чтобы воспользоваться функцией галереи, необходимо в разметке страницы объединить изображения в группу посредством присвоения класса plFW_gallery_group для родительского элемента, и класса plFW_gallery для изображений. Атрибут alt у изображений используется в качестве их названий при выводе в галерее. Так же как и для одиночного изображения, для всех изображений в галерее необходимо указать специальный атрибут data-fullimage, в котором написать путь к изображению-оригиналу, а в атрибуте src - путь к изображению-миниатюре.

Для инициализации галереи нужно вызвать функцию plFWGallery.init() после загрузки страницы.


Функции и события

Вывод окна с произвольной разметкой:

Код на языке javascript:
plFW.showHtml("Разметка", "CSS-класс окна");

Вывод текстового окна с сообщением:

Код на языке javascript:
plFW.showMessage("Текст сообщения", "CSS-класс окна");

Вывод окна с изображением:

Код на языке javascript:
plFW.showImage("Адрес изображения", "Текст заголовка");

Вывод окна с галереей:

Код на языке javascript:
plFW.showGallery("Адрес изображения", parent);
//parent - Родительский DOM-элемент всех изображений галереи

Закрытие окна:

Код на языке javascript:
plFW.close();

Событие при смене изображения: plFW.onChangeImg();

Свойства для настройки скрипта:

  • closeByBackground - возможность закрыть окно нажатием на фон
  • maxImgWidth - максимальная ширина изображения
  • minImgWidth - минимальная ширина изображения
  • maxImgHeight - максимальная высота изображения
  • minImgHeight - минимальная высота изображения
  • fixScrollBars - возможность исправить смещение выровненного по центру окна при скрытии полосы прокрутки

Скачать скрипт

plFloatWindow.js (~10kb) Последняя версия скрипта.
plFloatWindow.css (~3kb) Стандартные стили оформления всплывающего окна и галереи.
Пример использования (~ 3kb) Пример использования скрипта, демонстрация возможностей.

История изменений

  • Версия 1.3
    • Все функции всплывающего окна переведены в объект plFW
    • Добавлена возможность отключить закрытие при нажатии на фон (closeByBackground)
    • Добавлена возможность избежать сдвиг центрированных блоков при открытии окна (fixScrollBars)
    • Максимальные и минимальные размеры изображений вынесены в свойства объекта plFW
    • Добавлена функция определения ширины полосы прокрутки getSbWidth()
    • Добавлено событие onChangeImg
  • Версия 1.2
    • Исправлено повторное открытие окна при уже имеющемся
    • Изменены и добавлены некоторые стандартные стили элементов управления
Автор: SpectreZ Работа над проектом: 2015 - 2017 (2 года)
+
Фильтрация по тегам
Выбранные теги отобразятся в этой области...
Найти
Программирование 38, Игры 16, Программы 12, Delphi 29, Библиотеки 15 Веб-разработка 23, Сайты под ключ 7, Дизайн 22, JavaScript 5, PHP 0, Laravel 0, Joomla 2 Графика 30, Обработка фото 6, Логотипы 2, Иллюстрации 7, Рисунки 3, Печатная продукция 2 Видео 11, Трейлеры 1, Анимация 3 Музыка 3, Персонажи 8, Статьи 7, Литература 5, Рассказы 4, Стихи 1, 2D 5, 3D 20, На заказ 10
Используйте среднюю кнопку для быстрого фильтра по тегу...
Календарь проектов
2015 7 , 2016 6 , 2014 3 , 2010 5 , 2011 1 , 2013 2 , 2012 1 , 2009 3 , 2017 3 , 2018 1