novosibpano@yandex.ru  

Плагин "Галерея фотографий v1.81" для krpano


Возможности.

  • Создание неограниченного количества галерей в туре.
  • Создание галереи из неограниченного количества фотографий.
  • Не нужно прописывать все фотографии, укажите только имя и количество фотографий.
  • Включение в галерею видеролика и открытие YouTube.
  • Индивидуальный подбор размера, цвета, прозрачности фона и рамок и многое другое.
  • Индивидуальные настройки для каждой галереи.
  • Установка кнопок с необходимым дизайном.
  • Использование режима зуммирования колесом мыши, кнопками (на мобильных устройствах двумя пальцами). Перемещение фотографий (для просмотра при зуммировании). Слайд-шоу.
  • Создание подписей к фотографиям.
  • Присвоение действия по щелчку на фотографии (открыть ссылку, открыть документ, сцену и т.д.).



Примеры.

Пример YouTube



Пример в 3D туре





Описание.

Галерея фотографий состоит из двух частей.

1. Окно с миниатюрами фотографий.

Рамка с миниатюрами фотографий. Прокрутка колесом мыши и перемещение c зажатой левой клавишей мыши. Бегунок слева пропорционально показывает позицию миниатюр в окне. При нажатии на бегунок возможно перемещение миниатюр. Миниатюра увеличивается при наведении курсора мыши. При щелчке по миниатюре открывается соответствующая фотография, на миниатюре появляется метка "картинка" просмотренной фотографии. При пролистывании фотографий или в режиме слайд-шоу по соответствующим миниатюрам перемещается рамка (цвет меняется в настройках). Справа от окна кнопка "свернуть миниатюры", миниатюры скрываются, смещаясь влево. При вызове галереи настраивается состояние панели миниатюр – открыто или закрыто. В настройках можно включить функцию "автопрокрутка при наведении курсора".

2. Окно просмотра фоторафий.

Окно просмотра имеет настраиваемую по размеру, цвету, прозрачности рамку. Окно просмотра автоматически масштабируется. При сворачивании рамки миниатюр окно фотографии смещается в центр.

Интерфейс:
  • Кнопки пролистывания фотографий расположены внутри окна по левой и правой сторонамs.
  • Кнопка слайд-шоу расположена справа внизу внутри окна.
  • Показ номера просматриваемой фотографии/количество фотографий в галерее справа внизу.
  • Cлева снизу подписи фотографий. Стили текста подписей и счетчика настраиваются.
  • Кнопка "закрыть фото". При щелчке на фоне так же происходит закрытие.
  • Кнопка "перевернуть фотографию" на фоне в правом нижнем углу.
  • Кнопки зуммирования «+» «-» на фоне в нижнем правом углу. Нажатие и удержание соответственно увеличивает или уменьшает фотографию. Зуммирование колесом мыши, если курсор на фотографии; листание колесом мыши, если курсор вне фотографии.
  • Фотография перемещается левой клавишей мыши. На тачпаде – нажать и двигать.
Интерфейс окна с видео:

При наведении курсора на окно с видео внизу появляется панель с кнопками.
  • Кнопка плей-пауза расположена слева внизу внутри окна.
  • Рядом кнопка громкости по щелчку отключает звук. При наведении курсора появляется бегунок регулировки громкости.
  • Правее расположена временнАя линия.


Как подключить.

Поместите папку "Gallery_photoSM" в корневой папке с туром.
Пример подключения плагина в основном xml:


    <krpano .... >
    <include url="Gallery_photoSM/Gallery_M.xml" />
    .
    .
    </krpano>
	



Подготовка фотографий и миниатюр для галереи.

Для каждой галереи необходимо подготовить фотографии с одним именем и нумерацией от 1 и выше (например - cats1.jpg,cats2.jpg...cats№.jpg). Сформировать из них миниатюры для окна миниатюр (уменьшить размер) и поместить в отдельную папку.
Фотографии должны быть только с расширением ".jpg".
В настройках вводится только имя и количество фотографий, номер фотографий и расширение добавляется к имени автоматически. Фотографии для миниатюр автоматически подстраиваются по ширине и по высоте, в настройках нужно выставить шаг между ними.



Как создавать и открывать галереи.

Например, есть 12 фотографий - cats1.jpg,cats2.jpg...cats12.jpg)
  • путь до фотографий (%HTMLPATH%/photo/cats)
  • путь до миниатюр фотографий (%HTMLPATH%/photo/m/cats)
  • количество фотографий (12).
Создадим галерею под именем "cats".
В файле "Setting_gallery.xml" нужно записать это так:
 
	<cats   photo="%HTMLPATH%/photo/cats"
		miniature_photo="%HTMLPATH%/photo/m/cats"
		number_thumbnails="12"
	   />
	

Создайте событие, или несколько событий, при исполнении которых будут открываться галереи. Например - onclick="Galereya(cats);" где "cats" - это имя галереи.

Если используются параметры по умолчанию, то достаточно указать путь до фотографий и миниатюр и количество фотографий.
Параметры галерей по умолчанию прописаны в файле "Setting_gallery.xml" под именем "Default_Galery" . Эти параметры можно менять.
Для изменения параметров в отдельной галерее пропишите дополнительно изменяемые параметры. Например, в галерее "Thailand" выставлены настройки ширины бара миниатюр 150 пикс., высота бара миниатюр 100%:

 <Thailand photo="%HTMLPATH%/photo/IMG_"
	   miniature_photo="%HTMLPATH%/photo/m/IMG_"
	   number_thumbnails="8"
	   thumbbar_width="150"
	   thumbbar_height="100%"
	/>



Настройки "по умолчанию".

В файле Setting_galereya.xml функцией "Default_Galery" прописываются настройки параметров галереи по умолчанию.
Не используйте во вносимых числах запятую вместо точки кроме параметра frame_color_photo.

Default_Galery - настройки по умолчанию:

  • step_miniature="5" - расстояние между миниатюрами (в пикс).
  • photo_height="90%" - максимальная высота фотографии в процентах от высоты окна просмотра. Если равна 100% то будет полное заполнение по высоте, если позволяет ширина.
  • thumbbar_position="left" - три значения привязки к окну просмотра контейнера под миниатюры: "left", "lefttop", "leftbotton.
  • thumbbar_y="0" - смещение контейнера под миниатюры по оси у (пикс. или % ширины экрана).
  • thumbbar_x="0" - смещение контейнера под миниатюры по оси х (пикс. или % высоты ).
  • thumbbar_width="130" - ширина контейнера под миниатюры (пикс. или % ширины экрана).
  • photo_max_height="0.8 - Максимальная высота фотографии отосительно экрана(значения от 0 до 1, например 0-0%, 1-100%, 0.7-70%).
  • thumbbar_open="0" - выдвинуть контейнер миниатюр при запуске галереи. 0-нет, 1-да.
  • thumbbar_color="0x2D3E50" - цвет контейнера миниатюр.
  • thumbbar_alpha="0.3" - прозрачность под миниатюры (0-1).
  • thumbbar_color_b="1 0xFFFFFF 1" - рамка контейнера миниатюр "толщина (пикс.)_цвет_прозрачность".
  • frame_color_thumbnail="1 0xFFFFFF 1" - рамка миниатюры текущей фотографии "толщина (пикс.)_цвет_прозрачность".
  • frame_color_photo="10,10,22,10 0x58BA2D 0.8" - рамка показываемой фотографии "толщина рамки (пикс.)верх, правый, нижний, левый_цвет_прозрачность".
  • background_color="0x000000" - установка цвета заднего фона "0x000000".
  • marker_photo="galSM.png" - имя картинки для маркера на миниатюре просмотренной фотографии. Картинка должна находиться в папке «Gallery_photoSM/iconGL».
  • autoscrolling="false" - автопрокрутка при наведении курсора на миниатюры "false", "true".
  • slideshow_interval="3" - интервал слайд шоу в сек.
  • text_open_thumbbar="Показать миниатюры фотографий" - текст при наведении на стрелку развернутого контейнера под миниатюры.
  • text_of_thumbbar ="Свернуть миниатюры" - текст при наведении на стрелку свернутого контейнера под миниатюры.
  • style_text_signature="text1galSM" - стиль текста счетчика фотографийr.
  • style_text_photo_counter="text1galSM" - стиль текста подписи фотографий.
  • titles_№="..." - 1,2...№ номер фотографии = подписи к фотографиям на рамке в нижнем левом углу.
  • onclick_№="..." - 1,2...№ номер фотографии = действие вызываемое при щелчке по фотографии.
  • one_photo="№" - показать одну фотографию из папки под номером №, остальные будут игнорироваться. Если установлен "0", показываются все фотографии из указанной папки.
  • start_photo="№" - открыть галерею с фотографии номер "№".
  • doubleclick_photo - "true"-выполнить действие по двойному клику на фотографии. "false" - выполнить действие по одному клику по фотографии.(по умолчанию "false").
  • video_"№"="" - открыть видео по щелчку на миниатюре под номером "№". "" - прописать путь до видео, например "%HTMLPATH%/photo/9.mp4.
  • youtube_№="" - открыть youtube на миниатюре под номером "№". "YnvOQji6zZ0" - прописать путь до видео ролика youtube, например из ссылки https://youtu.be/YnvOQji6zZ0 нужно вставить в ковычки "YnvOQji6zZ0".


Важно!

Файл Gallery_M2.xml с открытым кодом. В этом файле вы можете менять и создавать свои стили шрифтов, менять расположение и вид кнопок, статус загрузки и многое другое.
Файл Gallery_M.xml с закрытым кодом. В нем находится исполняемый код.
В файле Gallery_M2.xml прописаны два действия:

  • video_gal_on - вызывается когда включен видеоплеер или плеер YouTube.
  • video_gal_off - вызывается когда выключается видеоплеер или плеер YouTube.
Эти действия можно использовать для паузы аудио, например:

	<action name="video_gal_on" >
		   if(soundinterface,pausesound(sound1););	
	     />
        
  • Не используйте в названии галереи дефис - например: используйте «beach_bar» вместо «beach-bar».
  • Имя галереи не должно начинаться с цифры - например: «2beach_bar» - неправильно, «beach_bar2» - правильно.



Скачать фото галерею для krpano.

Демо-версия фотогалереи отличается от рабочей надписью электронной почты на фотографии.
Demo version 11 Mb
Скачать Test_Gallery1.81.rar

Архив включает в себя:
Рабочий пример использования.
В примере папка "Gallery_photoSM" с файлами галереи в которой:

  • Folder iconGL (иконки кнопок управления).
  • Gallery_M.xml (демо версия. закрытый код).
  • Gallery_M2.xml (стили шрифтов, кнопки управления).
  • Setting_gallery.xml (исполняемый файл).


Приобрести плагин.

Стоимость плагина 23 EUR.

Для приобретения плагина напишите на почту novosibpano@ya.ru.
Я вышлю на этот адрес ссылку на скачивание архива с примером и плагином в течение 24 часов после оплаты.
Обновления плагина бесплатно!

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



Примечание.

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





Комментарии.