Плагин фотогалереи для joomla. JoomGallery — простая и функциональная галерея для Joomla

Для вывода галереи внутри материала используется не компонент, а плагин Phoca Gallery.

Для этого используется специальный код с параметрами.

Выглядеть он может так:

{phocagallery view=category|categoryid=57| limitstart=0|limitcount=28|detail=5| displayname=0| displaydetail=0|displaydo wnload=0|imageshadow=shad ow1|displaybuttons=0}

Этот код можно вставлять в визуальном редакторе Joomla, не переходя в режим HTML.

Код обязательно должен быть заключён в фигурные скобки.

Параметры пишутся без пробелов, но отделяются друг от друга символом "|".

Полный список параметров приведён на официальном сайте .

• phocagallery


• view - определяет, что именно будет выведено на страницу Joomla со статьёй.


• Возможные варианты: categories | category | switchimage - отображает все категории, определённую картинку из категории или the switch image cудя по проведённому эксперименту - одна любая фотография, назначается по номеру ID. Пример кода - ниже).


• categoryid - число - ID категории, которую вы хотите показать, в случае только одной категории.


• imagecategories - 0|1 - показывает или прячет изображение рядом с названием категории в списке всех категорий Phoca Gallery.


• imagecategoriessize -
  0|1|2|3|4|5|6|7 - означает 0 - маленький | 1 - средний | 2 - маленькая папка | 3 - средняя папка | 4 - маленький с тенью | 5 - средний с тенью | 6 - маленький в виде папки с тенью | 7 - средний в виде папки с тенью - Размер изображения рядом с названием категории


• hidecategories - число - Прячет категорию из обзора категорий. Установите категории (id категорий), которые не должны отображаться в списке категорий. Разделяются запятой (,).

Важно

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

Отображение изображений

• phocagallery - отображает плагин Phoca Gallery.


• view - определяет, что именно будет выведено на страницу Joomla со статьёй. Возможные варианты: categories | category | switchimage.


• categoryid - число - ID категории, в которой сохранено изображение (которое вы хотите отобразить)


• imageid - число - ID изображения, которое вы хотите показать


• imagerandom - 0|1 - Случайное изображение включено (1) или отключено (0)


• imageshadow - none | shadow1 | shadow2 | shadow3 - Выберите изображение, которое будет отображаться в качестве фона


• limitstart - число - если вы хотите отобразить больше, чем одну картинку. От каждого изображения будет отображаться группа картинок.


• limitcount - число - если вы хотите отобразить больше, чем одну картинку. Число изображений, которые должны быть показаны


• fontcolor - цвет в формате html - цвет шрифта


• bgcolor - цвет в формате html - цвет фона


• bgcolorhover - цвет в формате html - цвет фона (эффект при наведении мыши)


• imagebgcolor - цвет в формате html - фоновый цвет картинки


• bordercolor - цвет в формате html - цвет рамки (вы можете использовать bordercolor=transparent , чтобы спрятать рамку)


• bordercolorhover - цвет в формате html - цвет рамки (при наведении мыши)


• detail - 0|1|2|3|4|5|6|7 - 0 - Modal Box | 1 - Standard Popup Window | 2 - Modal Box (only image) | 3 - Shadowbox | 4 - Highslide JS | 5 - Highslide JS (only image) | 6 - JAK lightbox | 7 - No Popup


• displayname - 0|1 - 1 - показать или 0 - спрятать название
  displaydetail - 0|1 показать или спрятать URL ссылки на окно подробностей


• displaydownload - 0|1 - 1 - показать или 0 - спрятать URL ссылки на окно загрузки


• displaybuttons - 0|1 - 1 - показать или 0 - спрятать кнопку детального просмотра (кнопки слайдшоу)


• float - left|right - ваше изображение может быть расположено в тексте (left или right - плавающие позиции CSS)


• namefontsize - число - развмер шрифта названия (название изображения в категории - в пикселях)


• namenumchar - число - число букв, которые будут показаны в названии изображения.


• displaydescription - 0|1 - Если вы установили на 1 в Phoca Gallery и вы хотите отобразить это описание, когда щёлкают по изображению в плагине Phoca Gallery, вы должны установить его на 1.


• descriptionheight - число - Если вы установили Display Description attribute на 1 в Phoca Gallery и вы хотите отобразить это описание, когда щёлкают по изображению в плагине Phoca Gallery, вы должны установить Display Height , потому что открывшееся окно (Modal Popup Box или Standard Popup Window) должно быть изменяемым.


• enableswitch - 0|1 - разрешает switch option (1), нужна только если показывается Switch Image, см. ниже.


• overlib - 0|1|2|3 - разрешает эффект overlib, (1) Only Image, (2) Only Description, (3) Image and Description


• piclens - 0|1|2 - enable PicLens (Cooliris) on
  the site, (1) PicLens, (2) PicLens with start button (for browsers where
  no PicLens support is installed)


• imageordering - устанавливает порядок изображений: 1 - по возрастанию,
  2 - по убыванию, 3 - по названию в возрастающем порядке, 4 - по названию в убывающем, 5 - по дате в возрастающем, 6 -
  по дате в убывающем, 7 - по ID в возрастающем, 8 - по ID в убывающем, 9 - Случайное


• pluginlink - устанавливает тип ссылки: 0 - ссылка на подробное изображение, 1 - ссылка на категорию, 2 - ссылка на все категории.


• type - устанавливает тип изображения: 0 - стандартное среднее изображение, 1 - маленькая картинка (мозаичный эффект), 2 - большое изображение (для отображения единственной картинки)


• paddingmosaic - устанавливает отступы мозаичного типа (в пикселях (px))


• highslidedescription - используйте этот параметр, если вы хотите показать описание в Highslide JS (only image) method - 1 - Название, 2 -
  Описание, 3 - Название и описание

Switch Image displaying

{phocagallery view=switchimage|switchhe ight=360|switchwidth=416| basicimageid=71}
{phocagallery view=category|categoryid= 15|limitstart=0|limitcoun t=2|enableswitch=1}

• phocagallery - отображает плагин Phoca Gallery


• view - categories | category | switchimage - отображает все котегории, определённые изображения из категории или единственную картинку.


• switchheight - число - высота большого изоборажения


• switchwidth - число - ширина большого изображегия


• basicimageid - число - ID изображения, которое будет показано.

Online service by OceanTheme are is a platform where people can unite with each other with mutual interest to purchase premium templates and extensions Joomla! at a bargain price. The target audience of the service are individuals and small and medium businesses, professional web developers to create online stores, community sites or people wishing to have your blog. In our great collection of premium solutions everyone will find what he needs.

Our resource acts as an organizer pooling, specifies the number of people that you want to buy templates and extensions, the cost of goods, as well as the amount and access to these materials. Our website has a lot of opportunities for easy searching of templates and extensions. Intuitive navigation, tagging system, sorting by the filter and the tool "add to bookmarks" will allow you to find the right material you want incredibly fast. In addition You will always find the latest information, so as to update the collection every day.

Access to the entire database of materials is provided for the duration of the club specified in the subscription purse. Subscribers receive unrestricted access to all available archives, news and updates, as well as technical support throughout the subscription period.

All the products you can find on this site are 100% GPL-compatible, which means you can change them as you want and install on unlimited number of sites.

Thanks to our collection you will save a lot of time and money, as the templates and extensions easy to use, easy to install and configure, multi-functional and diverse. That will allow you to create a website of any complexity and orientation, without learning advanced web development technologies.

Main features of our website

A rich set of functions, working out of the box:

Use all opportunities of our resource to get ready-made professional solution for rapid implementation of your business projects or creative ideas.

Use the search tools

Use advanced search and filtering, and easy navigation for quickly finding the desired web solutions in design, functionality and other criteria.

To favorite materials were always at hand, use the unique function "Add to favorites", and they are available in a separate section for the whole year.

Logged into our site, you will be able to leave comments and to participate in promotions, as well as use of a free subscription with permium access.

Join our club membership

Club subscription gives you full access to our entire catalogue of original material. And includes premium templates and extensions for several years.

Download appropriate to your Joomla templates and extensions, both free and subscription for the club without any limits and ogoranicheny speed.

If you liked any material on the site, you can leave your voice, as well as share it with friends via social networks.

сайт: http://сайт

Урок № 4. Как вывести галерею фотографий в материал?

Phoca gallery – галерея для сайта . В прошлом обучающем уроке я вам подробно рассказала, как создать разделы и категории в Phoca Gallery. Для наглядности я все объясняю на примере своей художественной галереи www.art-planets.com

Давайте посмотрим, что из себя будет представлять галерея для фотографий.

Видите, создать галерею на joomla достаточно просто. Главное, не торопиться и во всем сначала разобраться.

Одним из основных пунктов меню будет пункт, который называется «все галереи»

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

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

Как настраивать внешний вид галереи и выбирать картинку, мы рассмотрим в следующих уроках по Phoca Gallery.

В африканском племени спрашивают одного:

Что ты больше всего любишь в женщине?

Глаза.

А мы тебе ножку оставили.

Каким образом можно сделать вложенные категории?

Когда вы создаете новую категорию, то при выборе родительской вы ставите ту, которая вам нужна. Например, у меня категория «декоративное искусство» является родительской. В нее входят другие категории: «гобелен», «батик», «авторская кукла», «керамика» и другие.

При создании новой категории надо выбрать в выпадающем окне нужную и сделать ее родительской.

Тогда на сайте в разделе родительской Phoca gallery будет выводить на одной странице все вложенные категории. В каждой их них будет картинка и количество фотографий. Это получится в пункте меню слева.

В разделе «Все галереи» вложенные категории выводятся по отдельности.

Выводим галерею в материал

Теперь поговорим о том, каким же образом вывести нужные нам фотографии в материал?

Сразу напишу, что этот непонятный код, который есть на сайте самой Phoca Gallery, запоминать вам не нужно.

phocagallery view=category|categoryid=28|
limitstart=2|limitcount=3|detail=56|displayname=1|
displaydetail=1|imageshadow=shadow1

Зачем ломать голову, если создатели галереи сделали все очень удобно для пользователей?

Все на самом деле очень просто.

Давайте посмотрим последовательность, которую нужно соблюдать, если галерея фотографий должна появиться у вас на конкретной странице сайта.

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

Этот материал будет находиться в определенной категории и в разделе. Поэтому продумайте сначала всю структуру, а после этого создавайте новую страницу.

Если материал вы захотите разместить в одном из пунктов меню, значит, создайте этот пункт меню.

У вас на сайте joomla должны быть подготовлены для вашей галереи, которая появится в материале, - раздел, категория и сам материал.

Для того, чтобы галерея появилась в материале, создадим отдельную категорию.

Предположим, у вас страница о природе. Идем в «компоненты» - «Phoca gallery»-«категории». И выбираем «создать».

После этого пишем название новой категории «Природа» (русскими буквами), псевдоним priroda (английскими), выбираем из выпадающего окна родительскую категорию и сохраняем.

Заходим в «изображения» - «создать». Потом выбираем конкретное изображение из папки, как я рассказывала в прошлом уроке. Если нужно описание, заполняем форму внизу. И после этого сохраняем.

Точно таким же образом заполняем эту категорию «Природа» остальными фотографиями.

Итак, у нас есть страница материала и категория фотографий, которую вы создали для этого материала.

Выходим из галереи и заходим на страницу материала. Предположим, у вас уже есть текст. Вы можете вставить фотографии в любое место статьи. Можно вывести одни фотографии без текста на этой странице.

Ставите в этом месте курсор и опускаетесь вниз.

Находите кнопку «Phoca Gallery Image» и нажимаете.

Открывается несколько форм.

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

В верхнем окне предлагается выбрать категорию, которая нам нужна. Выбираем «природа».

Что такое limit start и limit count?

Это номера фотографий, которые есть в этой конкретной категории. Если вам нужны все картинки, ставите в limit start цифру 1 или 0, а в окошке limit count – последнюю.

Галерея включает в себя плагин для вывода в материал и компонент. Она позволяет выводить автоматом все фото из выбранной вами папки(-ок) и множество настроек по отображению как самой галереи, так и увеличинной фотографии.

Скриншоты:

Приступим к установке
1. Скачайте компонент
2. Установите его через "Менеджер расширений"
3. Перейдите в "Менеджер плагинов" и активируйте плагин (если он еще не активирован) "Content - Simple Image Gallery Pro (by JoomlaWorks)"
Теперь компонент галерею установлен правильно!

Настройка галереи
Откройте галерею - вы увидите все папки в вашей директории /images. Например, у меня есть папки r1 и r2, в которых есть фото - их можно вывести в виде галерей.

Теперь настроим галерею - нажмите сначала на кнопку в виде списка слева, а затем на кнопку в виде шестеренки - откроется следующее окно:

Чтобы все отображалось как у меня на скриншотах (конечно, многое еще зависит от вашего css сайта) выставите следующие настройки как на скриншоте:

После того, как закончите - нажмите "Save & Close", чтобы сохранить изменения

Вывод галереи в материале
Чтобы вывести галерею - откройте необходимй материал, в нем вы увидите следующую кнопку:

Нажмите на нее - появится окно, в котором нажмите "Insert" для той папки, которую надо вывести в виде галереи. В редакторе сразу появится код галереи:

Иногда на сайте нужна небольшая галерея, например для вывода нескольких фотографий на странице или в статье.

Но ставить целый компонент не хочется.

Во-первых, с ним нужно сначала разобраться, с этим компонентом.
Во-вторых, нужно узнать как обстоят дела с адаптивностью.
В-третих, лишний компонент может замедлить работу сайта.

Поэтому рассмотрим как не тратя лишнее время, сделать простую галерею в Joomla.
Есть хороший плагин - Simple Image Gallery , он бесплатный.

Установка обычная.

Настройка галереи

После установки плагина, переходим Менеджер расширений - Плагины.

Находим плагин Simple Image Gallery в списке и переходим к настройкам.

Их не много.

Root folder for image - здесь указывается корневая папка для хранения изображений галереи.
По-умолчанию это папка images, можно так и оставить.

Thumbnail width и height - это ширина и высота превьшек для фото, в пикселях.

Здесь можно подобрать размеры опытным путём.
Но если по правильному, то нужно узнать сколько примерно пикселей занимает у вас главная колонка.

К примеру у меня это 791px.
Я хочу чтобы выводилось по 3 фото в ряду.
Значит 791 делим на 3, получается ~ 263px.
Это максимальная ширина для превью, при которой они будут выстраиваться по 3 в ряду.

Надо по 4 в ряду? Значит делим ширину главной колонки на 4.

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

Thumbnail image quality - качество превьюшек. Можно осатвить 80.

Thumbnail cache expiration time - это время кэширования превьюшек в минутах.
Т.е. сколько хранить изображению для превью в кэш-памяти.

0 - отключает кэширование, это подходит, если у вас мало фотографий в галерее или когда вы подбираете размеры для превью опытным путём.
Я всегда оставляю значение по-умолчанию, оно подходит для большинства проектов.

Memory Limit - это ограничение на использование оперативной памяти сервера.
На обычных виртуальных хостингах может не работать.
Это нужно если у вас очень много фотографий, и вы не хотите чтобы галерея тратила все ресурсы сервера.
В этом случае можно ограничить расход памяти.

Это опция для опытных пользователей.

Подготовка изображений для галереи

Выберите нужные вам изображения на своём компьютере.

Создайте папку на вашем сайте, в папке images, например myfoto
Значит у вас получиться такой путь:

Ваш_сайт/images/myfoto

И загрузите туда ваши изображения с компьютера.
Лучше всего по FTP, также можно загрузить через панель хостинга.

1. Не делайте фотографии больше чем экран ноутбука. Т.е. ширины 1600px и высоты около 900px вполне достаточно для просомтра изображений пользователями.
2. Сжимайте подготовленные фото. В этом вам поможет сервис TinyPNG, про него написано
   Он может сжать картинку без потери качества. Так вы улучшите скорость загрузки.
3. Чтобы галерея выглядела красиво и ровно, желательно (но необязательно) чтобы все изображения имели одинаковое соотношение сторон.
   Не размеры в пикселях, а именно соотношение сторон. Например, картинка 320 * 240px - это такое же соотношение что 480 * 640.
   Такое соотношение сторон 4 к 3.
   Что такое соотношение сторон посмотрите

Вывод изображений на сайте

Теперь изображения загружены в папку, для примера это была папка myfoto, которая находится в папке images.

Сейчас в любой статье или материале K2, достаточно указать такой тег:

{gallery}myfoto{/gallery}

Теперь в статье, вместо этого тега, будут выводится фотографии из папки images/myfoto

При клике по превью, будет открываться оригинальное фото с эффектом lightbox, и фотографии можно перелистывать.
При наведении появляется иконка лупы.

Если потребуется сделать ещё одну галерею, то также создайте новую папку для неё, подготовьте и загрузите туда фото и вставьте тег с именем этой папки в любом месте статьи Joomla или материала K2.

Адаптивность галереи

При сужении экрана превьюшки тоже будут выстраиваться в доступной им ширине.

В итоге:

1. Устанавливаем плагин
2. Выбираем изображения на своём компьютере, при необходимости сжимаем и обрабатываем.
3. Создаём папку для галереи и загружаем в неё ваши фото
4. Вставляем в статью тег для вывода галереи.

Вот так, всё просто, легко и без лишних заморочек.

Спасибо за внимание)