Оказывается, что эффекты с изображениями в JoomGallery можно использовать в других материалах сайта. Настройка сайта для такой возможности показана в уроке «Использование функционала JoomGallery в других объектах Joomla».

Сейчас рассмотрим добавление фотографий на сайт и придание им эффектов увеличения по клику и слайд-шоу. Это делается в несколько этапов. При этом у Вас на сайте должна быть установлена и настроена фото-галереия  JoomGallery, а также функционал этой галереи должен быть добавлен к всему сайту (это описано здесь: http://joomla-master.com/lessons/joomla-components/6-joomgallery2.html). Также в нас должна быть подготовлена статья на сайте, в которую мы хотим добавить изображения.

1. Загружаем фотографии в соответствующую категорию JoomGallery

Загрузка и настройка фотографий в фото-галерею JoomGallery подробно описана в следующих уроках:

• «Накладка одних изображений поверх других»
• «Добавление фотографий в фото-галерею JoomGallery»

2. Подготовка и настройка скриптов с изображениями

В этом уроке мы будем использовать фотографии для раздела «Инфраструктура» на странице отеля «Медвежий Двор», которые мы добавили в галерею. В сам раздел «Инфраструктура» галерее находится по адресу: http://ezdimsami.com.ua/ru/gallery.html?func=viewcategory&catid=367.

Поэтому, сначала мы должны достать все ссылки изображений и миниатюр из этой категории галереи. Сами ссылки мы будем сохранять в блокноте. Чтобы сделать это быстро, то удобно сам сайт поставить сверху экрана, а текстовый редактор для ссылок – снизу (рис. 1). Сначала копируем ссылки на изображения миниатюр. Если Вы пользуетесь браузером Internet Exployer, то для получения ссылок миниатюр кликаем правой кнопкой мыши на миниатюру, выбираем пункт «Свойства», откуда копируем адрес. Для получения адреса самого оригинала изображения в браузере Internet Exployer кликаем правой мышей по миниатюре изображения и выбираем «Копировать ярлык». Такие действия делаем для всех фотографий в категории и заносим ссылки в блокнот (рис. 1).

В конечном итоге мы должны получить следующие ссылки для миниатюр и изображений:

http://ezdimsami.com.ua/components/com_joomgallery/img_thumbnails/___366/____367/____20100219_1234738726.jpg
http://ezdimsami.com.ua/components/com_joomgallery/img_thumbnails/___366/____367/____20100219_1117495600.jpg
http://ezdimsami.com.ua/components/com_joomgallery/img_thumbnails/___366/____367/____20100219_1791014558.jpg
http://ezdimsami.com.ua/components/com_joomgallery/img_thumbnails/___366/____367/____20100219_1416796993.jpg

http://ezdimsami.com.ua/components/com_joomgallery/img_originals/___366/____367/____20100219_1234738726.jpg
http://ezdimsami.com.ua/components/com_joomgallery/img_originals/___366/____367/____20100219_1117495600.jpg
http://ezdimsami.com.ua/components/com_joomgallery/img_originals/___366/____367/____20100219_1791014558.jpg
http://ezdimsami.com.ua/components/com_joomgallery/img_originals/___366/____367/____20100219_1416796993.jpg

Теперь мы должны вставить эти ссылки в код, который будет воспроизводить эффекты над изображениями. Процесс установки этого кода на примере двух фотографий уже подробно описан в уроке «Добавление эффекта слайд-шоу из JoomGallery в статью» .

Но для лучшего понимания мы еще раз более подробно остановимся на этом.

Код для одного изображения имеет следующий вид:

<a href="/original_photo_url" rel="lightbox[SLIDE_SHOW_ID]" title="photo_description">
<img src="/thumbnail_photo_url" alt="photo_description" border="0"/>
</a>

В этом коде SLIDE_SHOW_ID – это фраза или цифра, которая означает что фотографии, которые ее содержат, будут принадлежать к определенному слайд-шоу или категории.
original_photo_url – это адрес оригинала изображения (большого изображения).
thumbnail_photo_url – это адрес миниатюры изображения (маленького изображения).
photo_description – это подпись, которая будет под изображением.

В нашем случае мы задействуем этот скрипт для 4-х фотографий галереи. Поэтому вместо SLIDE_SHOW_ID укажем «infr». Установим соответствующие ссылки в скрипт. А также дадим подпись к изображениям title="Отель «Медвежий Двор». Инфраструктура" (Для простоты, мы дали одинаковую подпись к всем изображениям. Но можно назвать каждое изображение по разному).

В итоге наш код получится таковым:

<a href="http://ezdimsami.com.ua/components/com_joomgallery/img_originals/___366/____367/____20100219_1234738726.jpg" rel="lightbox[infr]" title="Отель «Медвежий Двор». Инфраструктура">
<img src="http://ezdimsami.com.ua/components/com_joomgallery/img_thumbnails/___366/____367/____20100219_1234738726.jpg" alt="Отель «Медвежий Двор». Инфраструктура" border="0"/>
</a>
<a href="http://ezdimsami.com.ua/components/com_joomgallery/img_originals/___366/____367/____20100219_1117495600.jpg" rel="lightbox[infr]" title="Отель «Медвежий Двор». Инфраструктура">
<img src="http://ezdimsami.com.ua/components/com_joomgallery/img_thumbnails/___366/____367/____20100219_1117495600.jpg" alt="Отель «Медвежий Двор». Инфраструктура" border="0"/>
</a>
<a href="http://ezdimsami.com.ua/components/com_joomgallery/img_originals/___366/____367/____20100219_1791014558.jpg" rel="lightbox[infr]" title="Отель «Медвежий Двор». Инфраструктура">
<img src="http://ezdimsami.com.ua/components/com_joomgallery/img_thumbnails/___366/____367/____20100219_1791014558.jpg" alt="Отель «Медвежий Двор». Инфраструктура" border="0"/>
</a>
<a href="http://ezdimsami.com.ua/components/com_joomgallery/img_originals/___366/____367/____20100219_1416796993.jpg" rel="lightbox[infr]" title="Отель «Медвежий Двор». Инфраструктура">
<img src="http://ezdimsami.com.ua/components/com_joomgallery/img_thumbnails/___366/____367/____20100219_1416796993.jpg" alt="Отель «Медвежий Двор». Инфраструктура" border="0"/>
</a>

3. Установка скриптов с изображениями на страницу сайта

Теперь остается вставить этот код в соответствующее место на странице. Но прямо в визуальном редакторе это делать нельзя. Нужно отключить визуальный редактор или воспользоваться html-вставкою.

Если у Вас установлен визуальный редактор ICE, то добавить код можно следующим образом (рис. 2):
1)    в панели администратора открываем статью;
2)    в редакторе находим кнопочку «Edit Code» и нажимаем ее;
3)    откроется окно с html-кодом в котором добавляем наш код слайд-шоу в соответствующее место;
4)    нажимаем кнопку «Update»;
5)    сохраняем документ (кнопка «Сохранить»).

В редакторе TinyMCE код добавляется аналогичным способом, который более подробно описан снизу в статье «Добавление эффекта слайд-шоу из JoomGallery в статью».