Программирование HTML Joomla 1.5: фотогалерея Phoca Gallery Mon, July 24 2017  

Поделиться

нашли опечатку?

Пожалуйста, сообщите об этом - просто выделите ошибочное слово или фразу и нажмите Shift Enter.


Joomla 1.5: фотогалерея Phoca Gallery Печать
Добавил(а) microsin   

Фотогалерея Phoca Gallery бывает двух видов - компонент (component) и плагин (plugin), оба вида устанавливаются отдельно. Однако плагин без компонента работать не может. В статье описана работа с компонентом для версии Joomla 1.5.24.

[Phoca Gallery component]

Компонент позволяет организовать на сайте большой отдельный раздел фотогалереи, доступный через созданный отдельный пункт меню. Фотогалерея потом может быть задействована плагином для того, чтобы вставить галерею, изображение или набор изображений в любое место статьи.

Установка компонента происходит стандартным образом. Пройдите по ссылке [2], скачайте установочный zip-архив компонента (я скачал com_phocagallery_v2.8.0.zip), и в админке Joomla -> Расширения -> Установка и удаление -> Закачка файла пакета -> выберите закачанный файл и нажмите кнопку Закачать файл & установить. После установки появятся две большие кнопки "INSTALL" и "UPGRADE". Для новой установки нужно обязательно нажать INSTALL, иначе компонент Phoca Gallery работать не будет.

Phoca Gallery отлично имеет очень много опций настройки, благодаря чему у пользователя есть большой выбор внешнего вида галереи [1]. Мне больше всего понравился вариант Highslide (Image only) - Highslide Image. Для сгенерированных изображений можно добавлять водяные знаки WaterMark - для защиты изображений от несанкционированного копирования.

Highslide (Image only) - Highslide Image

Фотогалерею Phoca Gallery можно и нужно русифицировать. Для этого по ссылке [3] найдите файл русификации "Russian (Русский) ru-RU.com_phocagallery.zip". Я скачал его по ссылке http://joomlacode.org/gf/download/frsrelease/13470/59620/ru-RU.com_phocagallery.zip. В этом архиве находятся два ini-файла, скопируйте их в папку administrator/language/ru-RU/ вашей установленной Joomla 1.5. После этого в админке компонент Phoca Gallery будет полностью русифицирован.

Добавлять картинки в галерею можно как минимум двумя способами:

1. Можно сначала по FTP закачать картинки прямо в www\images\phocagallery\ и подпапки, созданные там.

2. Встроенными в Phoca Gallery средствами: Компоненты -> Phoca Gallery -> Images -> Multiple Add, три закладки Upload File. Не очень удобный инструмент, но может помочь, если FTP недоступен.

После закачки картинок нужно добавить их в базу Phoca Gallery. Снова перейти в Компоненты -> Phoca Gallery -> Images, и нажать кнопку Multiple Add. В боксе Подробности появится список папок и изображений, которые уже записаны в www\images\phocagallery\. Нужно выбрать категорию, поставить галочки против нужных изображений и нажать кнопку Сохранить. Запустится процесс генерации иконок для изображений. При этом автоматически создадутся категории по названиям папок, имеющихся в папке phocagallery, и подкатегории этих категорий, если в эти папки входят другие папки. Т. е. автоматом получается иерархия хранения изображений, что очень удобно. Понятие категории в фотогалерее Phoca Gallery очень важно, так как именно по категориям распределяются изображения и именно категория отображается в виде галереи.

После окончания генерации иконок оригиналы картинок (с целью экономии места на сервере) можно удалить, однако Вы при этом потеряете возможность перегенерировать иконки (если вдруг захотите поменять их размеры). Иконки (картинки) генерируются для каждой фотографии автоматически в соответствии с установками трех размеров - маленького, среднего и большого. Размеры картинок меняются меню настроек Phoca Gallery Control Panel -> Images and Windows Size Settings. Внимание - меняйте настройки до запуска генерации иконок/изображений, либо после смены настроек заново перегенерируйте изображения.

После того, как картинки сгенерированы, можно галерею добавить как пункт меню, например так: Админка Joomla -> Меню -> Главное меню -> Создать -> в списке выберите тип пункта меню "Phoca Gallery". Новому пункту меню даете заголовок, например "Фотографии". Получите пункт меню, в котором будут все Ваши фотографии. Чтобы поменять внешний вид галереи (цвета), см. Темы. Если надо скрыть все подкатегории, ограничиться одной категорией или сделать что-то еще, поменяйте свойства Phoca Gallery через Компоненты -> Phoca Gallery -> кнопка "Настройки". См. также быстрый старт установки и настройки галереи [4].

Если не хотите, чтобы при открытии галереи картинки отображались там в случайном порядке (это поведение по умолчанию после установки), то зайдите в Настройки -> Categories View Settings (List of Categories) -> Categories Image Ordering -> выберите тип сортировки. Я обычно выбираю Id Descending, что обеспечивает сортировку картинок в том порядке, в каком они были добавлены.

[Phoca Gallery plugin]

Плагин Phoca Gallery - очень полезная надстройка, которая позволяет разместить в любом месте любой статьи набор фотогалерей, одну фотогалерею, набор картинок, единичную картинку или случайное изображение из фотогалереи. Все это задается через опции плагина (см. далее).

Установка плагина стандартная. По ссылке [6] скачайте plg_content_phocagallery_2.7.7.zip (или аналогичный файл более новой версии) и русский язык для плагина ru-RU.plg_content_phocagallery.zip. Далее в админке Joomla -> Extensions -> Install/Uninstall -> Select the file to install » Upload File & Install. После этого нужно включить (разрешить) плагин через Extensions -> Plugin Manager -> Phoca Gallery Plugin -> Enable Plugin.

Русификация также проста (хотя русифицировать в плагине почти нечего): из файла ru-RU.plg_content_phocagallery.zip возьмите ini-файл и положите его в папку language/ru-RU вашей инсталляции Joomla 1.5.

Как использовать см. [7]. Фотогалерея (или набор картинок) вставляется в статью с помощью тега phocagallery параметры. Далее примеры использования с описанием.

[Практические примеры использования Phoca Gallery Plugin]

1. Чтобы отобразить в статье все имеющиеся категории, тупо вставляем в нужное место статьи:

phocagallery view=categories

Выглядит это например так:

Справа от картинки расположены названия категории и подкатегории, к которой относится галерея. В круглых скобках коричневым цветом показано количество изображений в галерее.

2. Чтобы отобразить только одну категорию, то вставляем:

phocagallery view=category|categoryid=15, где число 15 ID категории, который можно узнать из списка категорий (Компоненты -> Phoca Gallery -> Categories, столбец ID).

3. phocagallery view=switchimage|switchheight=360|switchwidth=416|basicimageid=71 не работает на переключение, просто отображает одну картинку в полный размер.

4. phocagallery view=category|categoryid=15|limitstart=0|limitcount=2|enableswitch=1 отображает две случайные иконки-картинки из категории изображений 15. Параметр limitstart указывает, с какой по счету картинки будет браться случайное изображение, limitcount указывает, сколько картинок отображать.

5. phocagallery view=category|categoryid=7|imageid=0|limitstart=0|limitcount=2|
fontcolor=#B88A00|bgcolor=#FFBF00|bgcolorhover=#BFFF00|imagebgcolor=#FFD24D|
bordercolor=#B88A00|bordercolorhover=#86B300|detail=1|displayname=1|
displaydetail=1|displaydownload=1|float=right

отображает две случайные иконки-картинки из фотогалереи 7, цвет подписей с иконкам серый, есть кнопочка загрузки, лупы, цвет рамки желтый, расположены иконки справа в тексте статьи, причем текст огибает иконки. Параметр bordercolor задает цвет бордюра, а bordercolorhover - цвет бордюра при перемещении мышки по нему. Параметр float задает, что иконки должны быть справа.

6. phocagallery view=category|categoryid=6|imageid=15|detail=0|overlib=1 отображает только иконку только одной картинки 15 из категории 6. Внимание: если картинка с ID=15 не находится в категории с ID=6, то никакая картинка не выведется. Параметр detail:

0 - обычное модальное окно поверх страницы со всеми кнопками управления показом изображений (предыдущее, следующее, слайд-шоу и проч.).
1 - то же самое, что и 0, только открывается для показа картинки отдельное окно браузера.
2 - Modal Box (only image), простое модальное окно без кнопок управления.
3 - Shadowbox, что и 2, только при открытии красивая анимация, кнопочка закрытия внизу, и вверху есть подпись к картинке.
4 - Highslide JS, то же самое, что и 0, только окошко просмотра можно перемещать и менять его размеры.
5 - Highslide JS (only image), появление предпросмотра с анимацией, также предпросмотр с красивой белой рамочкой, кнопки управления просмотра динамические - появляются только при перемещении курсора мыши по картинке. Мне этот вариант понравился больше всего.
6 - JAK lightbox, оригинальное красивое модальное окно просмотра с черной рамкой.
7 - No Popup, вместо иконки появляется полное изображение с кнопками управления просмотром и зеленой кнопкой перехода в галерею, где эта картинка находится. Не понравилось.
8 - Slimbox - простейшее анимационно появляющееся окно с описанием картинки, рамка белая. Ничего особенного.
9 - показывает только картинку с кнопками навигации. Похоже недоделанный режим. То же самое с числом 10 (дальше не проверял).

Параметр overlib:

0 - не влияет никак.
1 - при перемещении мыши поверх иконки показывает полупрозрачное окошко предпросмотра картинки. Круто!
2 - при перемещении мыши поверх иконки показывает полупрозрачное окошко с описанием картинки.
3 - комбинация вариантов 1 и 2.

Overlib Effect Settings -> Overlib Image Size -> 1/4

7. phocagallery view=category|categoryid=7|imageid=180|detail=5|overlib=1|displayname=0|
displaydetail=0|displaydownload=0

Отобразить картинку ID=180 из категории ID=7, вариант просмотра detail=5, при наводе на картинку появляется полупрозрачный вид картинки, убрать отображение имени картинки (displayname=0), убрать отображение иконки лупы (displaydetail=0), убрать отображение иконки загрузки (displaydownload=0).

8. phocagallery view=category|categoryid=7|imageid=180|detail=5|overlib=1|displayname=0|
displaydownload=0|displaydetail=0|bordercolor=transparent

Убрать бордюр (то же самое, что и 7, только без серого тонкого бордюра). Вообще bordercolor позволяет еще установить цвет бордюра.

Для картинок есть опция переключения Switch (Swap) Image - сверху над иконками галереи отображается картинка предпросмотра. Не очень понравилось, работает довольно медленно, не все картинки загружаются.

Примечания для всех примеров - вместо правой и левой фигурных скобок {} в статье использовались картинки. Все опции тега phocagallery должны быть введены друг за другом без пробелов и переводов строки. Текст тега phocagallery не должен иметь никаких атрибутов (типа Bold или специально заданного шрифта) - просто чистый текст.

[Ссылки]

1. Обзор вариантов фотогалереи Phoca Gallery. В списке слева выберите интересующий Вас тип галереи.
2. Закачка компонента Phoca Gallery.
3. Русификация галереи Phoca Gallery.
4. Phoca Gallery - быстрый старт.
5. Phoca Gallery plugin.
6. Закачка плагина Phoca Gallery.
7. Руководство по использованию Phoca Gallery Plugin.

 

Комментарии  

 
0 #5 алекс 22.02.2015 14:01
Подскажите пожалуйста, а как сделать вывод на всех страницах в Title отображение не заголовка меню а заголовки страниц.
Цитировать
 
 
0 #4 Домовенок 16.02.2013 15:30
И я тоже нашла в вашей статье то, что искала. Почти на всех моих сайтах стоит этот компонент, приходится работать с ним. Хоть и рекомендуют уже непосредственно джумловскую галерею.
Цитировать
 
 
+3 #3 Лущик Милана 17.01.2013 21:05
Скажите пожалуйста, а как вывести список категорий не в один столбик, а в несколько, и не по вертикали, а по горизонтали?
Цитировать
 
 
+1 #2 костя 17.10.2012 17:12
Я 0 в этом деле, простите за вопрос: галерея выводится как отдельный пункт меню, как ее добавить в текст статьи "{phocagallery view=category|catego ryid=1}"? Если у меня текст от руки написан, то просто добавить в любое место, или нужно под html пихать?

microsin: можно просто в текст статьи, а можно и в её html, без разницы.
Цитировать
 
 
+2 #1 Fedr 16.08.2012 00:03
О! Спасибо! Отличный материал! Очень мало толковой инфы о выводе плагина галереи, а у вас все чётко расписано! Буду пробовать!
Цитировать
 

Добавить комментарий


Защитный код
Обновить

Top of Page