Скачайте плагін JCE Mediabox. Встановіть його через менеджер розширень Joomla, а потім активуйте. Після цього відкрийте менеджер зображень JCE і додайте на сторінку фотографію, яка і буде виступати в ролі превью, тобто, міні-зображення. Потім виділіть доданий фото і клікніть по інструменту додавання гіперпосилання. Слідом за цим, за допомогою браузера файлів JCE вкажіть шлях до зображення, яке повинно з`явитися після натискання на превью. Потім відкрийте вкладку «Додатково» і в розділі «Список класів» виберіть «jcepopup».

Створіть спливаюче зображення за допомогою візуального редактора, який вбудований в систему управління сайтом Ural CMS. Таке зображення при кліці на превью збільшується до великих розмірів. З цією метою використовуйте функцію «Вставити», розташованої на панелі інструментів, після чого у вікні, встановіть галочку навпроти поля «Створити превью» і завантажте фотографію. Коли зображення завантажиться на сайт, виберіть його в «списку завантажених» і клацніть по ньому.

Після цього у вікні вставки виберіть «Зовнішній вигляд» і змініть розміри фото: в ідеалі вони повинні бути 150-250 пікселів в ширину, адже саме таких розмірів превью. Після внесення всіх змін натисніть «Вставити». В результаті вийде клікабельно зображення.

Скачайте плагін JCE HsExpander. Встановіть його через менеджер розширень. Після установки в JCE в радіаторі з`явиться особлива кнопка: клікніть по ній і вікно відкриється. Що з`явилося на екрані вікно складається з двох частин: Popup Image і Thumbnail Image. У першому задайте параметри спливаючого зображення, а в другому вкажіть розміри і альтернативний текст для превью. Після того як внесете всі необхідні зміни, натисніть «Вставити зображення», а потім «Зберегти».

Створення спливаючих сторінок може проводитися на основі javascript. Проте, є більш простий варіант - використання мови розмітки гіпертексту HTML і мови таблиць CSS. Зручність полягає в тому, що створені таким чином вікна будуть підтримуватися більшістю браузерів незалежно від того, чи підтримують вони javascript.

Подібний код розміщується в два терміни, в першому рядку міститься посилання, яка відповідає за відкриття віконця, другий рядок - по суті, і є спливаючих вікном, атрибут onmouseover говорить про те, що буде відображатися стандартний при наведенні на рядок посилання тип курсора, onclick вказує на те, що після клацання приховане вікно стане видимим:

Натиснути тут!

Вам буде потрібно вказати розміри вікна, колір і розмір тексту, фон і рамки. Всі ці параметри ви можете вказати в атрибуті style. Цветa вказується по кодової табліцe rgb. У стандартному інструменті Paint в вікні «Зміна кольорів», в можете знайти код потрібного відтінку, де R - червоний, G - зелений, В - синій (блакитний). Так чорний колір має код rgb (0,0,0), білий rgb (255,255,255), сірий rgb (126,126,126).

Тепер вам потрібно розмістити дві ці рядки між тегами вашої сторінки і . Після цього спливаюче вікно готове до роботи.

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

Ймовірно, ви захочете зробити вікно, спливаюче не по клацанню, як описано вище, а при наведенні курсору. Тоді перший рядок повинна бути записана так:

Таким чином, HTML-код спливаючого вікна ви отримали, і знайомі зі структурою його складання. Все що залишилося - оформити зовнішній вигляд і вміст, що, природно, буде залежати від ваших умінь, мети і фантазії. Але треба пам`ятати, що це найпростіший варіант створення спливаючого вікна. Якщо ви володієте достатнім досвідом програмування в javascript (MooTools, jQuery, Prototype та ін.), Ви можете створити більш красиву і цікаву сторінку.