Плагин для фотогалереи на джумла. Simple Image Gallery - Плагин фотогалереи для Joomla

От автора: очень часто на страницах сайта необходимо публиковать различный медиа контент, а именно изображения или фотографии. При этом очень удобно если изображения будут сгруппированы в одну галерею. Поэтому в данном уроке мы с Вами рассмотрим очень полезное расширение для CMS Joomla — JoomGallery, при помощи которого можно быстро организовать галерею изображений на сайте.

Установка компонента

Расширение которое мы рассмотрим в данном уроке называется JoomGalery – это очень мощное расширение, с огромным количеством различных настроек и множеством различных дополнений.

Первым делом давайте установим данное расширение, для этого переходим на официальный сайт Joomla в раздел расширений: http://extensions.joomla.org/ . Далее переходим в категорию Photos & Images, и в разделе Popular находим расширение JoomGalery. Кликнув по кнопке Download, нас перенаправляют на сайт разработчика данного расширения.

В разделе Component скачиваем компонент JoomGalery, в разделе Languages скачиваем требуемую локализацию данного расширения. В разделе Modules скачаем модуль вывода изображений галереи JoomImages 3.0, и в разделе Plugins скачиваем плагин отображения изображений в контенте Content-Plugin JoomPlu а также Editorbutton JoomBu (кнопка вставки изображений). Затем устанавливаем скачанные расширения.

Добавление категорий

Расширение JoomGalery поддерживает разбиение изображений на отдельные категории. Поэтому давайте перейдем в ассистент категорий и создадим две категории галерея 1 и галерея 2.

Доступ – доступ групп пользователей к данной категории;

Exclude from toplists – исключить категорию их верхних списков?;

Exclude from search – исключить категорию из поиска?

Владелец – выбор владельца;

Размещение мини-эскизов – порядок размещения миниатюр.

Основные настройки

Переходим в ассистент настроек и как Вы видите настроек очень много и они все сгруппированы по отдельным вкладкам.

Вкладка Основные настройки.Пути и каталоги .

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

Оригинальное изображение – изображение которое загрузил пользователь с неизменными размерами.

Изображение детальный вид – уменьшенная копия изображения, которая просматривается на странице детального вида изображения. Обычно ограничивается шириной 400px;

Миниатюра загруженного изображений – очень маленькая копия загруженного изображения.

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

Обработка фото — Настройки связанные с обработкой фотографий при их загрузке в галерею. Параметры которые представляют интерес:

Изменение размера – нужно ли изменять размеры изображений при загрузке;

Максимальный размер фотографий – ограничения размера изображения для детального просмотра;

Качество – качество, с которым будут обрабатываться изображений (100 – без потери качества);

Ширина мини-эскизов, Высота мини-эскизов – размеры для миниатюр.

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

Сообщения — Настройки различных системных сообщений и сообщений о ошибках.

Дополнительные функции — Различные дополнительные функции.

Добавление изображений

Изображения в галерею можно загрузить пятью различными способами:

Drag’n"Drop Upload – загрузка большого количества изображений одновременно (более правильно добавление в очередь, так как загрузка в любом случае выполняется поочередно);

Мне больше всего нравится метод Drag’n"Drop Upload, поэтому его и использую. Добавим несколько изображений в категорию Галерея 1.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

Далее в настройках уменьшим размеры для миниатюр, и еще загрузим дополнительно изображения в Галерея 2, таким образом миниатюры категории Галерея 2, будут меньшего размера, чем категории Галерея 1. Теперь когда изображения добавлены, можно просмотреть их — перейдя в ассистент фотографий.

Вывод галереи на экран

Для вывода галереи на экран – создадим новый пункт главного меню. При выборе типа пункта меню выбираем JoomGalery:

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

Настройки галереи (часть 2)

Теперь давайте посмотрим, какие еще настройки доступны нам.

Вкладка Права пользователей .

Загрузка пользователем через «Моя галерея» – JoomGalery поддерживает загрузку изображений через пользовательскую часть Вашего сайта и на данной под-вкладке настраиваются параметры работы данного механизма.

Скачать – настройки параметров скачивания изображений галереи.

Оценки – настройки возможности оставлять оценки элементам галереи.

Комментарии – параметры системы комментариев галереи JoomGalery.

Reports - настройки отправки жалоб от пользователей.

Вкладка Настройки пользовательского интерфейса .

Здесь собраны настройки по основному виду галереи. Опять же настроек достаточно много, но я бы остановился на под-вкладке Верхний и нижний разделы. Как Вы наверное заметили, при просмотре галереи, она состоит из трех блоков. Верхний блок (шапка), центральный блок, где выводятся изображения и нижний блок. Так вот под-вкладка Верхний и нижний разделы позволяет настроить отображение шапки галереи и ее футера. На данной под-вкладке я отключаю вывод всех элементов. При этом на странице просмотра нашей галереи мы увидим следующее:

На мой взгляд так смотрится симпатичнее.

Вкладка Обзор Галереи – содержит всего одну под-вкладку, и позволяет настроить вид главной страницы галереи. Это страница, которая соответствует типу меню Главная страница: стандартный вид. На данной странице выводятся все категории, добавленные в галерею изображений.

Вкладка Показ категории – на данной вкладке собраны настройки страницы, которую мы с Вами уже создали для просмотра галереи на нашем сайте, то есть это страница просмотра изображений конкретной категории. Здесь мы выполним следующие настройки:

Show feed icon – отключаем показ иконки RSS новостей;

Расположение мини-эскизов / Деталей – по центру;

Show number of Downloads – показывать ли количество скачиваний – нет;

Показ числа комментариев – нет;

Показать владельца – нет;

Показ числа оценок – нет.

Теперь сохраняем изменения и посмотрим, что у нас получилось.

Вкладка Детальный Вид – на данной вкладке собраны настройки по странице детального просмотра изображения. На эту страницу мы можем попасть, если кликнем по миниатюре изображения галереи. Вот данная страница:

Вкладка Настройки ТОП-списков – настройки топ списков. Топ-списки – это строка ссылок в верхней и нижней части галереи:

TOP 12: Лучшие оценки — Самые новые — Последние комментарии — Самые популярные

Я их предлагаю так же отключить, для этого используем настройку Показ ТОП-списков и ее значение Не показывать .

Вкладка Поиск – настройки отображения поиска по галереи. Так как у нас достаточно мало изображений в галереи, поиск я так же отключаю, используя параметр Показать поиск .

Сохраняем изменения и посмотрим, что получилось:

Модули и плагины JoomGalery

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

Установленные плагины нужно активировать, причем плагины работают в паре, так как JoomPlu отображает изображения в контенте страницы, а JoomBU — отображает кнопку добавления изображения к материалу.

Вот собственно я создал тестовый материал “Тест галереи” в котором отображаются изображения из галереи JoomGalery.

На этом данный урок можно завершать. Всего Вам доброго и удачного кодирования!!!

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

Для вывода галереи внутри материала используется не компонент, а плагин 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 изображения, которое будет показано.

сайт: 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 – последнюю.

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.

Simple image gallery pro v 3.0.8 - это полная версия шикарного компонента галереи для joomla, скачать которую можно бесплатно. C помощью данного расширения вы можете вставлять галереи в любые статьи стандартного компонента контентом джумла, k2, Virtuemart и так далее.

Настройки Simple image gallery pro

Для того чтобы ваша галерея на сайте joomla работала и украшала контент или любую страницу, достаточно сделать всего несколько простых шагов:

• первое что нужно сделать это скачать компонент по ссылке ниже;
• затем устанавливаем через обычный менеджер расширений;
• заходим в компонент Simple image gallery pro и настроим его под свои нужды;

• Корневая папка для галереи - сдесь нужно указать путь и название папки, в которой будут храниться папки с картинками для галерей joomla, например если вы укажите images/simple, то ваши галереи будут храниться в папке simple;
• Макет шаблона галереи - выберите какой из шаблонов галерей вам больше всего подходит по дизайну;
• Ширина и высота эскиза - это размеры уменьшенной копии изображений, кликая на которые пользователь получит полную версию картинки;
• Умные изменения размера - изображения подстраиваются под разрешение монитора пользователя, иными словами становятся адаптивными;
• Качество эскиза - чем ниже качество тем меньше будет нагрузка на сервер. Подберите оптимальное соотношение, как правило оно равно 70-80;
• Порядок - в каком порядке ваши изображения галереи Simple image gallery pro будут выводиться;
• Подпись и лимит слов - это текст, который будет присутствовать на изображениях галереи joomla;
• Загрузить модульную позицию во всплывающее окно - этот пункт настроек говорит сам за себя.

Как добавлять галерею

Для того чтобы добавить галерею в Simple image gallery pro достаточно сделать несколько простых шагов.

Первым делом конечно нужно будет скачать и установить расширение.

После установки компонента и плагинов, заходим в любую статью на сайте, щелкаем мышкой на нужном месте и нажимаем на кнопку Simple image gallery pro. Перед вами откроется окно, в котором можно создать новую галерею или отредактировать старую.

Чтобы у нас появилась новая галерея в joomla, нажимаем на одноименную кнопку. Далее вводим название папки с изображениями будущей галереи латинскими буквами и цифрами (желательно называть её так, чтобы вы патом могли разобраться какая папка какой принадлежит статье).

При наведении на галерею Simple image gallery pro появиться кнопка "Вставить", на которую и нужно нажать. Теперь сохраняем статью и любуемся красивой галереей на сайте.

Мы прошлись по основным настройкам Simple image gallery и посмотрели как создавать красивое представление картинок и изображений в joomla. Для того чтобы скачать расширение не нужно регистрироваться и покупать его но помните, что компонент распространяется на платной основе, и скать его с официального сайта можно только в случает оплаты 28 евро.

Для установки русского языка скопируйте файлы архива в папку administrator\language\ru-RU на вашем сервере.