Simple Pop-up - всплывающие модальные окна в Joomla
Опубликовано: 11.10.2016
Думаю, вы не раз лицезрели красиво всплывающее окно с картинкой после клика по малеханькой картинке-превьюшке. Эти всплывающие окна на затемненном фоне, заполняющие часть экрана, и являются модальными окнами. В Вебе модальные окна служат для показа картинок либо веб-контента в деталях.
Техника, применяемая для отображения различного веб-контента при помощи модальных окон, получила наименования lightbox. Это заглавие вышло от первого JavaScript плагина написанного Lokesh Dhakar. В апреле 2012 плагин был переписан для JQuery.
Simple Pop-up - всплывающие модальные окна в Joomla
Как вы могли увидеть, в административном разделе Joomla в категории медиафайлов изображения открываются в лайтбоксе. Означает в Joomla техника lightbox есть. Как воплотить таковой же эффект на веб-сайте? Вы, естественно, для этих целей сможете пользоваться плагинами посторониих разработчиков (ImageSizer, JoomSlide и др.), но, для решений обычных задач можно пользоваться и лайтбоксом в Joomla.
Наша задачка, показать гостю превью, т.е. уменьшенную копию рисунки, при клике по которой раскроется изображение в уникальном размере. Означает, для реализации модального окна, нам пригодится файлы рисунки различных размеров. Для начала необходимо приготовить рисунки для веб-сайта. Сделаем в папке веб-сайта images две папки, одну папку для малеханьких картинок, вторую – для огромных.
Сейчас необходимо приготовить графические файлы. К необычным изображениям необходимо сделать превью, т.е. уменьшенные копии этих изображений. Обработать рисунки можно при помощи фотошопа либо хоть какого другого графического редактора. Либо для обработки изображений можно пользоваться онлайн сервисами в Вебе.
Хотелось бы акцентировать ваше внимание на последующем. С превьюшками все ясно, они мелкие, как следует, вес файлов невелик. Главное, непременно обрабатывайте уникальные изображения, добиваясь меньшего веса файлов с сохранением свойства. По другому, из-за долговременной загрузки огромных файлов, вы рискуете утратить гостя, которому наскучит дожидаться, пока картина раскроется и он покинет веб-сайт. Размер уникальных изображений не следует делать более 800 x 600 пикселей (беря во внимание величину экранов старенькых мониторов). Уникальные рисунки вы также сможете обработать онлайн, но, если есть возможность и умение, лучше сделать это самому.
И так, допустим, мы сделали два файла различных размеров 120x90 и 800x600 пикселей – pic120.jpg и pic800.jpg и загрузили в надлежащие папки (либо папку) на веб-сайт.
Как уже упоминалось ранее, в Joomla есть расширенные способности для вывода веб-контента (фото, материала и др.) в отдельном окне - JHTML::_( 'behavior.modal' ). Потому, для того, чтоб на веб-сайте заработал lightbox, довольно воткнуть в файл index.php в меж тегами
и шаблона последующий код:Сейчас мы сможем выводить наш веб-контент в модальных окнах.
Для вывода фото в модальном окне мы непременно указываем класс modal и ссылку на оригинальное изображение