Как это будет выглядеть? Приведу несколько примеров (просто щёлкните по мини-эскизу).

   Понравилось? Хотите создать на Вашем сайте подобную галерею с возможнсотью увеличения изображения?

Инструкция по созданию:

  1. Идём на страницу загрузки галереи highslide, выбираем последнюю версию, нажимаем скачать (download), одобряем лицензионное соглашение (если Ваш сайт не коммерческий).
  2. Создаём на Вашем сайте директорию js, копируем в неё файлы из папки highslide
  3. В секцию head вашей страницы включаем:
    • HTML:
          <link href="/js/highslide.css" rel="stylesheet" type="text/css" />
          
    • JS:
          <script language="javascript" type="text/javascript" src="/js/highslide-full.js"></script>
          <script language="javascript" type="text/javascript" src="/js/language/ru.js"></script>
          
  4. Загружаем на сайт в папку /images/ необходимые изображения

    Совет: для мини эскизов создайте подпапку /images/mini,заливайте изображения в одинаковом формате, и давайте мини-эскизу и оригинальному изображению одинаковые имена, это упростит задачу размещения изображений в материалах.

    Теперь в размещаемом материале вставляем ссылку a с атрибутом href и регистрацией события onclick, которое сработает при щелчке по ссылке. Присваиваем ссылке класс highslide. А внутри ссылки размещаем тег img указывающий на мини эскиз.

   Пример внедрения галереи со всплывающими изображениями:

<a href="/images/original.jpg" class="highslide" onclick="return hs.expand(this)">
	<img src="/images/mini/original.jpg" width="400" alt="Some Image"/>
</a>

   Другой вариант размещения галереи со всплывающими изображениями:

Также можно использовать с разными размерами одну и ту же фотографию. Допустим: для мини-эскиза задать длину 300 пикселей, а оригинал в длине не ограничивать.

<a href="/images/original.jpg" class="highslide" onclick="return hs.expand(this)">
	<img src="/images/original.jpg" width="300" alt="Some Image"/>
</a>

   Примечание: не забываем указывать (если мини-эскиз заранее не был подготовлен определённой длинны и ширины) атрибут width (или же height) для тега img.

   Примечание: формат записи: onclick="return hs.expand(this)" обязателен. Дело в том, что, возвращая значение (false в случае удачной инициализации объекта highslide) мы отменяем событие по умолчанию (переход по ссылке).

   Напоминание: width и height (целые числа), указанные в теге img имеют высший приоритет перед теми же параметрами, заданными в css через класс или id.

Добавляем заголовок во всплывающем окне для галереи с мини-эскизами.

   Для этого требуется функции hs.expand передать дополнительные опции.

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

   Как же добавить заголовок. Для этого нам стоит для тега a задать атрибут title и передать его функции hs.expand:

<a href="/images/original.jpg" class="highslide" title="Это заголовок для всплывающего окна" onclick="return hs.expand(this,{captionText: this.title})">
	<img src="/images/mini/original.jpg" width="400" alt="Some Image"/>
</a>

   Совет: для красивого вида сайта всегда подготавливайте мини эскизы и всплывающие фотографии одинаковых размеров. (Или заключайте мини эскизы в контейнер с одинаковыми размерами).

   Напоминание: не забываем задавать alt атрибут для изображений Img. Подсказываем поисковыми системам тематику изображения (Привлекаем посетителей с поиска по картинкам.

Группируем изображения в галереи с возможностью слайдшоу и элементами навигации в highslide.

В секцию head добавляем следующие строчки:

      <script type="text/javascript">
      //<!--
       var galleryOptions = {
		slideshowGroup: "mysite",
		dimmingOpacity: "0.8",
               captionEval: "this.a.title"
	};
	hs.addSlideshow({
	    slideshowGroup: "mysite",
	    dimmingOpacity: "0.8",
	    interval: 3000,
	    repeat: false,
	    useControls: true,
	    fixedControls: true,
	    overlayOptions: {
		position: "top center"
	    }
	});
 	//-->
	</script>

   А ссылки для галереи с мини-эскизами и фотографиями для увеличения приводим к такому виду.

<a href="/images/original.jpg" class="highslide" onclick="return hs.expand(this, galleryOptions)" title="Это заголовок для всплывающего окна 1" >
	<img src="/images/mini/original.jpg" width="400" alt="Some Image"/>
</a>
<a href="/images/original.jpg1" class="highslide" onclick="return hs.expand(this, galleryOptions)" title="Это заголовок для всплывающего окна 2" >
	<img src="/images/mini/original.jpg1" width="400" alt="Some Image"/>
</a>

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

   Разберём настройки галереи изображений с возможностью увеличения:

  • var galleryOptions = {} - настраиваем опции группы изображений группы "mysite"
  • slideshowGroup: "mysite" - определяем группу изображений mysite
  • dimmingOpacity: "0.8" – задаём прозрачность для фона в lightbox эффекте
  • captionEval: "this.a.title" – ещё один способ озаглавить всплывающее окно с помощью атрибута title тега а
  • hs.addSlideshow({ }) - добавляем слайдшоу для группы "mysite"
  • slideshowGroup: "mysite" - присваиваем группу изображений
  • dimmingOpacity: "0.8" - задаём прозрачность для фона в lightbox эффекте
  • interval: 3000 - указываем интервал для слайд шоу
  • repeat: false - бесконечное слайд шоу (true) или слайд шоу только один раз –(false)
  • useControls: true - задействовать панель навигации (кнопки: на одно изображение вперёд, на одно назад, оригинальный размер, включить слайд шоу)
  •    overlayOptions: {
    		position: "top center"
       }
    
    указываем, где расположить заголовок окна highslide и элементы навигации (в данном случае сверху по центру)

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

   А в следующих статьях мы рассмотрим:

  • Хитрости по настройке highslide js
  • Предопределённые стили галереи
  • Встраиваемая галерея изображений средствами highslide js
  • И ещё приведу пример скрипта автоматического добавления highslide js ко всем картинкам с заданным классом.
  • А так же в обозримом будущем будет сделан обзор другой, не менее занимательной, галереи imageflow и её совмещение с highslide js

Больше информации о веб технологиях можно узнать из нашего перечня всех статей на сайте:

Комментарии   

 
0 #4 Administrator 20.02.2013 20:15
Цитирую Руслан:
Здравствуйте сделал на сайте галерею с увеличением изображений, все ок., но мне нужно чтоб на одной страничке было несколько отдельных галерей, сделал, проблема в том что картинки при увеличении пересчитываются как в одной галереи, например у меня четыре галереи па 5 картинок, при увеличении они должны пересчитываются 1/5,2/5,3/5,4/5,5/5 и в обратную сторону а они пересчитываются 1/20, 2/20... Подскажите какое решение, может надо у файле highslide-with-gallery.js поменять что то в етом коде number: 'Foto %1/%2', спасибо, жду ответа.

Для разных галерей c фотографиями задайте разный атрибут rel: rel="gallery1" rel="gallery2" и т.п. у каждого набора из пяти ссылок (прямо в теге a)
Цитировать
 
 
0 #3 Руслан 20.02.2013 16:07
Здравствуйте сделал на сайте галерею с увеличением изображений, все ок., но мне нужно чтоб на одной страничке было несколько отдельных галерей, сделал, проблема в том что картинки при увеличении пересчитываются как в одной галереи, например у меня четыре галереи па 5 картинок, при увеличении они должны пересчитываются 1/5,2/5,3/5,4/5 ,5/5 и в обратную сторону а они пересчитываются 1/20, 2/20... Подскажите какое решение, может надо у файле highslide-with- gallery.js поменять что то в етом коде number: 'Foto %1/%2', спасибо, жду ответа.
Цитировать
 
 
-1 #2 Administrator 05.03.2012 16:02
Здравствуйте, дайте, пожалуйста, ссылку на Ваш сайт. Вы могли удалить плагин или же у Вас на странице происходит какая-то ошибка, которая не дает инициализироват ься галереи.
Цитировать
 
 
+1 #1 Марина 05.03.2012 14:21
Здравствуйте.
Помогите, пожалуйста, разобраться.
Сегодня удаляла "ненужные" плагины. Ближе к вечеру, случайно, обратила внимание, что все мои "не галерейные", а одиночные фотографии, которые есть на страницах и в записях - изменили способ изображения при нажатии на них мышью.
Раньше - картинка увеличивалась (как бы выплывая вперед во весь размер) до своего исходного размера в пределах той страницы/записи , где он помещена. Кликнув на увеличенное изображение повторно, картинка опять уменьшалась.
Теперь - кликнув на картинку, чтобы рассмотреть ее поближе - она ОТКРЫВАЕТСЯ НА ВСЕ ОКНО и Пропадает весь остальной сайт.

1. я удалила какой-то плагин, отвечающий за "всплывание" изображения?
2. или где-то в настройках WP сбилось что-то - отвечающее за то, каким образом будет увеличена картинка?

Спасибо.
Марина.
Цитировать
 

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


Яндекс.Метрика