franzose / galya

Galya the Aunt

Galya the Aunt.

Galya is a diminutive form of the Russian name Galina. I chose this name because of the funny consonance with the word ‘gallery’.

Galya is an extremely simple inline JavaScript gallery made as a jQuery plugin.

It's easy to involve Galya into your fun. In the head section, put the following:

<link rel="stylesheet" href="/path/to/galya.css">
<script src="/path/to/galya.min.js"></script>
<script>
  jQuery(function(){
    $('.your-gallery').galya();
  });
</script>

In the body section, place your photos in the order you want and wrap them with a block element:

<div class="your-gallery">
  <img src="/1.jpg" alt="Photo 1">
  <img src="/2.jpg" alt="Photo 2">
  <img src="/3.jpg" alt="Photo 3">
  <img src="/4.jpg" alt="Photo 4">
  <img src="/5.jpg" alt="Photo 5">
</div>

Settings

Key	Description	Default value
autoplay	slideshow (automatic slides switching)	false
duration	delay of the slides switching when autoplay is on, msec	3000
pauseOnHover	pausing the slideshow when mouse enters the slide	false
fadeSpeed	speed of fade effect, msec	500
scrollSpeed	speed of the thumbnails scroll, msec	250
slideWidth	the large image width, px	725
showCaptions	show/bypass description of the slides	false
headingLevel	heading for the description of the slide (h1-h6)	4
captionContentTag	caption content wrapper tag	p
thumbnailWidth	thumbnail width, px	110

Being simple, Galya does not impose the rules, it offers a base configuration. So, look and feel of your gallery is in your hands. In the future, there will be feature of applying custom effects on slides changing and thumbnails scrollings.

Slides captions

By default, caption is generated from alt attribute of an img tag. So, if you want your description to differ from alt attribute, you just add data-content attribute to the img tag with the description you want:

<div class="your-gallery">
  <img src="/1.jpg" alt="Photo 1" data-content="Long photo description 1">
  <img src="/2.jpg" alt="Photo 2" data-content="Long photo description 2">
  <img src="/3.jpg" alt="Photo 3" data-content="Long photo description 3">
  <img src="/4.jpg" alt="Photo 4" data-content="Long photo description 4">
  <img src="/5.jpg" alt="Photo 5" data-content="Long photo description 5">
</div>

Also you can add heading to your caption doing as following:

<div class="your-gallery">
  <img src="/1.jpg" alt="Photo 1" data-title="Title 1" data-content="Long photo description 1">
  <img src="/2.jpg" alt="Photo 2" data-title="Title 2" data-content="Long photo description 2">
  <img src="/3.jpg" alt="Photo 3" data-title="Title 3" data-content="Long photo description 3">
  <img src="/4.jpg" alt="Photo 4" data-title="Title 4" data-content="Long photo description 4">
  <img src="/5.jpg" alt="Photo 5" data-title="Title 5" data-content="Long photo description 5">
</div>

Notice that, by default, caption rendering is disabled by showCaptions: false.

---

# Тётя Галя. Простая, как три рубля.

Тётя Галя — это сверхпростая встраиваемая фотогалерея, написанная на JavaScript и выполненная в виде плагина для jQuery.

Подключить Тётю Галю к процессу очень легко. В шапку HTML-документа добавьте следующее:

<link rel="stylesheet" href="/path/to/galya.css">
<script src="/path/to/galya.min.js"></script>
<script>
  jQuery(function(){
    $('.your-gallery').galya();
  });
</script>

В теле документа расположите фотографии в необходимом порядке, обрамив их блочным элементом:

<div class="your-gallery">
  <img src="/1.jpg" alt="Фото 1">
  <img src="/2.jpg" alt="Фото 2">
  <img src="/3.jpg" alt="Фото 3">
  <img src="/4.jpg" alt="Фото 4">
  <img src="/5.jpg" alt="Фото 5">
</div>

Настройки

Ключ	Назначение	Значение по умолчанию
autoplay	слайдшоу (автоматическое переключение между слайдами)	false
duration	время перехода между слайдами в режиме слайдшоу, мсек	3000
pauseOnHover	остановка слайдшоу при наведении мыши на слайд	false
fadeSpeed	скорость затухания и появления слайдов, мсек	500
scrollSpeed	скорость прокрутки превьюшек, мсек	250
slideWidth	ширина слайда (большого изображения), пикс	725
showCaptions	показывать/не показывать описание слайдов	false
headingLevel	уровень заголовка (h1-h6) в подписи к слайду	4
captionContentTag	тег, обрамляющий текст подписи к слайду	p
thumbnailWidth	ширина превьюшки, пикс	110

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

Подписи к слайдам

По умолчанию подпись к слайду берется из атрибута alt у тега img. Если вы хотите оставить атрибут alt нетронутым, но при этом добавить отличное от его содержимого описание фотографии, добавьте в тег img атрибут data-content:

<div class="your-gallery">
  <img src="/1.jpg" alt="Фото 1" data-content="Длинное описание фото 1">
  <img src="/2.jpg" alt="Фото 2" data-content="Длинное описание фото 2">
  <img src="/3.jpg" alt="Фото 3" data-content="Длинное описание фото 3">
  <img src="/4.jpg" alt="Фото 4" data-content="Длинное описание фото 4">
  <img src="/5.jpg" alt="Фото 5" data-content="Длинное описание фото 5">
</div>

К подписи также можно добавить заголовок:

<div class="your-gallery">
  <img src="/1.jpg" alt="Фото 1" data-title="Заголовок фото 1" data-content="Длинное описание фото 1">
  <img src="/2.jpg" alt="Фото 2" data-title="Заголовок фото 2" data-content="Длинное описание фото 2">
  <img src="/3.jpg" alt="Фото 3" data-title="Заголовок фото 3" data-content="Длинное описание фото 3">
  <img src="/4.jpg" alt="Фото 4" data-title="Заголовок фото 4" data-content="Длинное описание фото 4">
  <img src="/5.jpg" alt="Фото 5" data-title="Заголовок фото 5" data-content="Длинное описание фото 5">
</div>

Обратите внимание, что по умолчанию вывод описания фотографии выключен: showCaptions: false.