Просмотр изображений в виде галереи - Highslide JS

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

Компонент Highslide JS мы устанавливаем и настраиваем по вашему запросу. Стоимость работ зависит от функциональности, которую вы хотите видеть на вашем сайте. Мы также предлагаем дополнительный функционал для автоматического создания уменьшенных изображений и установки водяного знака (для защиты от копирования исходных изображений).

Публикация изображений

Для Joomla версий 1.0.x

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

{mosimage popupTyp=gallery}

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

Для Joomla версий 1.5.x

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

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

<a href="/img/articles/html/gallery/ch1.jpg" class="highslide" onclick="return hs.expand(this)" >
  <img alt="Фотография 1" src="/img/articles/html/gallery/ch1-thumb.jpg" title="Кликните для увеличения" />
</a>

Здесь тег IMG отображает уменьшенную картинку:

...src="/img/articles/html/gallery/ch1-thumb.jpg"...

, а тег A указывает на картинку исходного размера:

...href="/img/articles/html/gallery/ch1.jpg"...

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

...class="highslide" onclick="return hs.expand(this)"...

Пример использования

Одиночные картинки

Фотография 1 Фотография 1 Фотография 1 Фотография 1

Галерея

Фотография 1 Фотография 1 Фотография 1 Фотография 1

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

Дополнительные примеры галерей вы можете посмотреть на сайте http://www.highslide.com

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

Заказ услугПо всем вопросам заказа услуг вы можете обратиться к нам по телефону +7 (495) 506-97-92 или задать вопрос с помощью формы обратной связи.

Будем рады видеть вас в числе наших клиентов!