Среда, 10 Сентябрь 2014 09:52

Создание галереи изображений на joomla 3 с помощью компонента Simple Image Gallery Pro

Всем привет! Галерея изображений это ещё один очень важный элемент сайта, я уж не говорю про проекты, где основным контентом, являются изображения. В этой статье я покажу, как сделать галерею изображений на сайте под управлением joomla 3, с помощью компонента simple image gallery pro.

Сразу хочется сказать что компонент платный, купить его можно на сайте производителя JoomlaWorks. Так же, можете посмотреть его DEMO версию, где можно увидеть галереи созданные с помощью simple image gallery pro.

Компонент очень удобный, адаптирован под joomla 1.5 2.5 и 3 версии. Работает с популярными расширениями такими как: K2, Virtuemart и.т.д. Совместим с популярными редакторами, лёгок в настройке и.т.д. Посмотреть подробную информацию, о simple image gallery pro, можно так же на сайте производителя. От себя скажу, что это один из лучших компонентов, для создания галереи на joomla 3 и более ранних версий.

Первым делом необходимо установить компонент, о том как это сделать, я написал в статье "Установка расширений joomla 3". Далее необходимо его настроить.

Настройка компонента Simple Image Gallery Pro

После того как вы установили компонент, зайдите в него. Для этого нажмите на кнопку "Компоненты" и в выпавшем списке выберите Simple Image Gallery Pro. 

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

В открывшемся окне, необходимо нажать на шестерёнку. 

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

  • Root folder for image galleries - директория (папка), в которой будут хранится ваши изображения.
  • Popup engine for image galleries - этот пункт отвечает за внешний вид галереи, при просмотре изображений (имеется 10 вариантов). 
  • jQuery library handling - библиотека для работы с JQuery.
  • Layout template for image galleries - внешний вид галерей, имеется шесть вариаций.
  • Thumbnail viewport width - ширина окна(уменьшенного изображения), в пикселях.
  • Thumbnail viewport height - высота окна(уменьшенного изображения), в пикселях.
  • Smart thumbnail resize based on above dimensions - в этом пункте вы можете указать, подгонять маленькие изображения под ширину окна галереи или нет. "Enabled" - подгонять.
  • Thumbnail image quality - качество уменьшенного изображения. По умолчанию стоит 80, можно указать от 0 до 100.
  • Display Mode - "Normal" галерея отображается в обычном режиме. "Single Thumbnail" отображается одна миниатюра.
  • Ordering - способ показа изображений. Здесь можно указать как будут показываться изображения (по алфавиту, случайно и.т.д.)
  • Default caption (label) handling - тип подписи.
  • Caption word limit - лимит символов в описании.
  • Enable original image download link in the popup - выводить или нет ссылку на скачивание изображения.
  • Load a module position in the popup - добавление модульной позиции.

Добавление галереи в статью

1. Заходим в папку images, находящуюся в корне сайта. Создаём в ней отдельную папку и копируем туда подготовленные изображения.

2. Откройте материал, в который хотите вставить галерею.

3. После того как вы установили данный компонент, в нижней части окна редактора, должна появится вот такая кнопка "simple image gallery pro". Нажмите на неё. 

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

4. Произведя общие настройки компонента simple image gallery pro, мы сделали их по умолчанию. Так же, имеется возможность произвести настройки 4 пунктов для отдельной галереи(в низу страницы). Если есть такая необходимость, меняйте. Если ни чего не указывать, то галерея примет настройки по умолчанию. 

5. Наведите курсор на необходимую папку, в открывшемся окне нажмите кнопку "VIEW". 

При необходимости, заполняйте поля Title и Description. Далее сохранитесь и закройте это окно нажав кнопку "Save & Close"(Сохранить и Закрыть).

6. Наведите курсор на выбранную папку, и нажать кнопку "INSERT". 

7. В редакторе должен появится, примерно такой код. 

8. Остаётся сохранить изменения материала. Нажав на кнопку "Сохранить". 

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

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


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