Модуль JoomImages

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

Эта документация относится к версии модуля 1.5.5. Поэтому, Вам потребуется установить версию JoomGallery 1.5.5 или более позднюю.

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

Если Вы сделали слишком много настроек и при опубликовании модуля на нём не отобразились никакие изображения, то проще будет удалить этот модули и установить его заново. А потом снова проделать все операции шаг за шагом, стараясь не допустить предыдущих ошибок.

Общие настройки

В общих настройках можно настроить отображение изображений или слайд шоу. Кроме этого так же настраивается выбор изображений и их сортировка.

joomimages_1[1]

Суффикс класса модуля

Обычно вывод HTML модуля окружен <div class=»moduletable»>. А для того, чтобы применять здесь свои собственные стили, нужно вставить здесь любой нужный текст, например ‘_jimg’. Теперь это будет выглядеть так: <div class=»moduletable_jimg»>. Теперь можно установить и настроить эти стили в CSS, но сначала можно оставить это поле пустым.

Кэш

При включенной настройке Кэш в Joomla, сайт вместе с модулем будет загружаться быстрее. Но иногда он загружается без включения CSS стилей. Чтобы этого не было нужно отключить это в настройках модуля.

Itemid

Если Вам нужно, то можно выбрать значение для другого Itemid.

Отобразить слайд-шоу или вид по умолчанию

Изначально, в стандартном виде, изображения отображаются в несколько столбцов и строк. Всё это можно настроить более подробно в разделе «Подробные параметры для вида по умолчанию». В слайд шоу с помощью MooTools показывается только одно изображение из заданной категории. А эти дополнительные параметры находятся в разделе «Дополнительные настройки Слайд-шоу».

Количество изображений

Здесь нужно указать максимальное количество изображений, которые будут показаны в модуле JoomImages. Может быть так же, что при неправильной настройке это количество не будет отображаться (а может и вообще не будет показано ни одно изображение).

Сортировка

Выбор сортировки изображений в модуле:

  • Случайные изображения: изображения выбираются из базы данных случайным образом. При каждом обновлении страницы сайта, будут показаны разные изображения. Это будет работать только тогда, когда будет выбор из, например, 20 изображений, а случайно отображаются 4. В другом случае, будут показываться одни и те же изображения каждый раз, только в разной последовательности.
  • По возрастанию или убыванию ID изображений. Каждое загруженное изображение получает новый ID, и этот ID будет выше предыдущего на один пункт. Получается, что при выборе ID по убыванию, будут показываться более новые изображения; а при выборе ID по возрастанию — более старые.
  • Сортировка по заголовку изображения: сортировка по названию изображения.
  • Название файла: сортировка по названию файла, который сохранен на сервере.
  • Дата загрузки изображения: сортировка по дате загруженности изображений.
  • Просмотры: по количеству просмотров изображений в полной новости.
  • Голосование: сортировка по рейтингу.
  • Количество голосов: сортировка по количеству голосов (самый высокий рейтинг и самый низкий).
  • Сортировка по дате тега: по возрастанию или убыванию.
Если выбрать один из этих вариантов сортировки, то другие запросы к базе данных будут нужны только для откоментированных картинок. А вот если отключить комментирование в JoomGallery, то никакие изображения не будут показаны.
  • Произвольные комментарии: случайное отображение изображений, которые были прокомментированы.
  • Дата комментария: сортировка картинок по дате последнего комментария.
  • Количество комментариев: сортировка изображений, зависящая от количества комментариев.

Категории / Включить подкатегории / Отображать или игнорировать категории

В этих параметрах настраивается выбор категорий, из которых модуль будет брать изображения. Для этого нужно вставить ID этих категорий. Так же здесь можно вставить ID категорий, изображения из которых не должны отображаться в модуле. ID можно узнать в менеджере категорий компонента галереи JoomGallery. Разделять ID нужно с помощью символа ‘,’.

К примеру: модуль должен показывать изображения из категории с ID «3» и «4».

Категории: 3,4

Игнорировать или показать категории: Показать

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

Адаптировать модуль к категории

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

В JoomGallery по умолчанию показывается сразу несколько изображений в модуле. Кроме общих настроек, можно так же внести дополнительные изменения в настройки «Вида по умолчанию». Эти параметры так же не рекомендуется изменять все сразу. Лучше сделать это постепенно и аккуратно, дабы потом не пришлось заново переустанавливать модуль JoomImages.

модуль JoomImages

Параметры вида по умолчанию (1)

Количество колонок

В этом параметре устанавливается количество колонок для изображений. Благодаря этому Вы автоматически устанавливаете косвенно и количество строк сразу же. Например, если у Вас в модуле отображается 10 изображений и настроен вывод в 4 колонки, то строк автоматически станет 3. Старайтесь правильно выбрать количество колонок, чтобы картинки не налезали друг на друга.

На скриншоте ниже пример из трех колонок:

joomimages_3[1]

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

Разбиение на страницы

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

Например:
Количество изображений: 9
Количество колонок: 3
Картинок на одной странице: 3
Расположение постраничной навигации: Выше изображений

joomimages_4[1]

Так же обратите внимание, что все картинки загружаются в фоновом режиме. А уже после этого будет отображена первая страница с помощью JavaScript и CSS. При нажатии на следующую страницу, она загорится серым цветом и загрузятся следующие изображения. При перезагрузке всей страницы, в модуле будет всегда отображаться первая страница с картинками.

Ссылка

  • Нет: нет ссылок, есть только изображения без возможности перехода к подробностям картинки.
  • Стандартный вид ссылок JoomGallery: при нажатии на ссылку откроется стандартный вид полной новости или изображение откроется в режиме Slimbox.
  • Категория: открыть категорию, в которой находится это изображение.
  • Новое окно: изображение открывается в новом окне.
  • Javascript окно: окно открывается при помощи JavaScript.
  • DHTML/Thickbox/Slimbox: Вам необходимо прочесть пояснение к этому параметру в менеджере настроек по пути: JoomGallery -> подробный вид изображения.
  • Плагин: если у Вас есть установленные и активированные плагины Shadowbox или Highslide JS (а так же другие аналоги), то можно открывать изображения с их помощью.

Сообщение при отсутствии изображений

Если модуль не сможет найти нужное изображение по какой-либо причине, он покажет о нем всю информацию.

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

Здесь настраивается отображение картинок относительно текста.
Дополнительное примечание: Если установлено положение «Left» или «Right» и для текста не хватает места, то текст будет показан под изображениями

Динамическая обрезка / по ширине / по высоте

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

Количество изображений: 10
Количество столбцов: 5
Динамическая обрезка: Да, включить
Ширина: 60
Высота: 60

joomimages_5[1]

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

Настраиваемый размер CSS и максимальный размер CSS

Бывает такое, что изображения отображаются в разных форматах и стилях (пейзаж или портрет, разные пропорции 2:3 / 3:4 и т.д.) и из-за этого не подходят для отображения в модуле. С помощью этой настройки можно, не теряя пропорций, изменить размеры изображений.

Пример: Вы имеете изображение с максимальными параметрами по ширине и высоте 133px и Вам нужно урезать его по этим же параметрам до 100px. Включите Настраиваемый размер CSS и установите максимальный размер CSS на 100px. Настройка этого параметра изменит размер всех изображений в модуле.

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

Высота и ширина картинок

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

Примеры:

  • Ширина всех картинок -> 100px
    Высота картинок: 100
    Высота картинок: <не задано>
  • Height of all pictures -> 100px
    Width of pictures: <не задано>
    Height of pictures: 100
  • Width and height of all pictures -> 100px (square thumbnails)
    Width of pictures: 100Height of pictures: 100

С включенной Динамической обрезкой и обрезкой при помощи CSS, эти параметры не учитываются.

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

joomimages_6[1]

Параметры вида по умолчанию (2)

Показать текст

Если установить «Нет», то текстовая информация не будет отображаться. Останутся только изображения.

Заголовок изображения

Этот параметр позволяет отображать заголовок изображения.

Перенос заголовка

Количество символов в названии картинки. Если установить «0», то даже длинное название будет отображаться в одну строку.

Описание изображений

Отображение описаний изображений в модуле.

Максимальная длина описаний

Максимальное количество символов в описании изображений для отображения в модуле.

Перенос текста

Количество символов, через которое строка переносится на новую.

Количество комментариев пользователей сайта

Отображение комментариев к изображениям.

С активированными элементами комментариев (текст, дата или число) картинки без комментариев не будут отображаться в модуле.

Максимальная длина комментариев в строке

Смотрите «Максимальная длина описания» и «перенос текста на новую строку» для получения подробностей.

Ссылка на весь список комментариев

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

Настройка прокрутки изображений

Благодаря этому параметру можно реализовать вывод слайд шоу при помощи <marquee> HTML тегов.

Этот тег является частью CSS 3 и он уже внедрен в код модуля. Но из-за этого на некоторых браузерах элементы модуля могут отображаться некорректно, поэтому рекомендуется сначала протестировать работоспособность на всех популярных браузерах.

Направление прокрутки

В этом параметре нужно выбрать направление прокрутки изображений.

Высота / Ширина поля для прокрутки

В этом параметре настраивается ширина и высота поля прокрутки.

Scrollamount и Scrolldelay

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

Настройка при движении мыши

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

Горизонтальное направление и Вертикальное направление

Горизонтальное и вертикальное выравнивание картинок и текстовых элементов в модуле. Разделитель в таблице

Если активировать этот параметр, то строки получают переменные таблицы стилей CSS ‘sectiontableentry1’ и ‘sectiontableentry2’. Таким образом, можно установить в своем шаблоне CSS несколько различных цветов фонов.

Показать границу или отступы от границ изображений

Этот параметр определяет границы для изображений. Вам надо установить правильно цвет границы, например, ‘#000000’ или ‘#000’, не забывая указывать символ ‘#’, иначе цвет не будет активирован.
А при указании ширины или высоты границы, нужно писать, например, ‘2px’ или ‘2em’, а не просто цифру ‘2’.

C помощью mootools в слайд шоу по умолчанию всегда отображается только одно изображение. Чтобы доказать, что это так: в HTML есть две картинки, одна невидимая и изменения между ними происходят с помощью JavaScript, например с эффектом fadig. Возможности JavaScript почти такие же, как у компонента RokSlideShow, но они рассчитаны на работу сразу же с несколькими экземплярами.

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

joomimages_7[1]

Параметры слайд шоу

Ширина / Высота

Здесь нужно ввести размер слайд шоу в пикселях. Введите только цифру без специальных обозначений.

Тип изображений

Источник отображения картинки.

Индикатор загрузки слайд шоу

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

Показывать текст или название заголовка

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

Высота заголовка для цвета описания

Высота, считающаяся в пикселях и цвет текстового поля.

Динамическое изменение размеров картинок

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

Длительность показа изображения

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

Длительность перехода между изображениями

Длительность в миллисекундах перехода между изображениями. Так же нужно указать только число без специальных знаков.

Тип перехода

  • Угасание.
  • Изменение масштаба — смотрите параметр «Процент зуммирования».
  • Панорамировавшие — Движение по горизонтали по изображению. Смотрите параметр «Процент панорамирования».
  • Комбо эффект Кена Бернса — масштабирование и панорамирование в сочетании.
  • Нажатие и стирание — это эффекты для специального перемещения изображения с помощью нажатий. «Нажатие» — первое изображение движется на второе. «Стирание» — второе изображение накладывается на первое. Рекомендуется поэкспериментировать с этими опциями.

Процент панорамирования

Этот параметр настраивает процент панорамирования в модуле при использовании эффекта «Изменение масштаба» или «Комбо эффект Кена Бернса».

Процент зуммирования

Этот параметр работает только при активировании параметра «Зуммирование» или «Комбо эффект Кена Бернса». Область указывается в процентах.

Параметр «Нажать» / «Стереть»

Для этих эффектов так же используется mootools.

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

Примеры ниже:

joomimages_8[1]

joomimages_9[1]

CSS классы (xx= ID модуля):

  • joomimgxx_imgct: определение картинок и текстовых частей модуля.
  • joomimgxx_img: определение только картинок.
  • joomimgxx_txt: определение только текстовых частей модуля.

Вы можете без проблем внести любые изменения во внешнем виде модуля, изменив файл ‘/modules/mod_joomimg/assets/mod_joomimg.css’. Но, не забудьте после внесенных изменений его перезаписать.

На этом данная документация заканчивается. Надеемся, что у Вас не осталось больше вопросов по работе с модулем JoomImages.

4 комментариев на “Модуль JoomImages

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

  2. Модуль joomImages стала недавно использовать и жалею что не знала о нем раньше. сайт преобразился. спасибо

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *