Lightbox в joomla

У даній статті мова піде про техніку lightbox з використанням модальних вікон в Joomla.

Думаю, ви не раз бачили ефектно спливаюче вікно з картинкою після кліка по маленькій картинці-прев'юшки. Ці спливаючі вікна на затемненому фоні, що заповнюють частину екрану, і є модальними вікнами. В Інтернеті модальні вікна служать для показу картинок або веб-контенту в деталях.

Створення модальних вікон в Joomla

Хотілося б акцентувати вашу увагу на наступному. З прев'юшки все ясно, вони маленькі, отже, вага файлів невеликий. Головне, обов'язково обробляйте оригінальні зображення, домагаючись найменшої ваги файлів зі збереженням якості. Інакше, через тривалу завантаження великих файлів, ви ризикуєте втратити відвідувача, якому набридне чекати, поки картинка відкриється і він покине сайт. Розмір оригінальних зображень не слід робити більш 800 x 600 пікселів (з огляду на величину екранів старих моніторів). Оригінальні картинки ви також можете обробити онлайн, однак, якщо є можливість і вміння, краще зробити це самому.

І так, припустимо, ми створили два файли різних розмірів 120x90 і 800x600 пікселів - pic120.jpg і pic800.jpg і завантажили в відповідні папки (або папку) на сайт.

Як уже згадувалося раніше, в Joomla існують розширені можливості для виведення веб-контенту (фото, матеріалу та ін.) В окремому вікні - JHTML :: _ ( 'behavior.modal'). Тому, для того, щоб на сайті заробив lightbox, досить вставити в файл index.php в між тегами і шаблону наступний код:

Тепер ми зможемо виводити наш веб-контент в модальних вікнах.

Модальне вікно в Joomla для однієї картинки

Для виведення фото в модальному вікні ми обов'язково вказуємо клас modal і посилання на оригінальне зображення

Модальне вікно в Joomla для контенту

Для виведення в лайтбоксі матеріалу ми також вказуємо клас modal, посилання на потрібну сторінку і розмір модального вікна

Потім до заслання, які ви хочете відкрити в модальному вікні, додати код: