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>
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.
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
.