Галереї для сайту з допомогою Highslide JS

56

Продовжимо планомірно і без зайвої суєти опис нових можливостей при використанні скрипта Highslide JS

У попередньому огляді я розповів про ефектному збільшення окремих зображень за допомогою цієї технології, хто пропустив, чи просто забув, можете освіжити свою пам’ять: Тынц »».
Так, пам’ять освіжили, голова працює ясно, можна продовжувати.
Highslide відрізняється від інших скриптів даної спрямованості своєю функціональністю. Звернемо свою увагу на використання цієї технології при створенні галерей для сайту. Щоб було зрозуміло, як все це працює, просто подивіться невеликі приклади, а вже потім детально розглянемо, що куди і навіщо.

Приклади галерей з використанням Highslide JS:

  • Приклад галереї в білому дизайні
  • Приклад галереї в темному дизайні
  • Міні галерея з затемненим фоном сторінки (одна мініатюра показується спочатку)
  • Дві міні галереї на одній сторінці
  • Галерея з керуючими стрілками нагорі
  • Галерея без рамки, підпис під картинкою
  • Галерея без підгонки розміру боксу під розмір картинки
  • Галерея з автопрокруткой і вертикальним розташуванням мініатюр
  • Галерея з автопрокруткой, горизонтальним розташуванням мініатюр, з білою рамкою і округленими кутами
  • Галерея в темному стилі з розташуванням мініатюр поверх основного зображення
  • Галерея з фіксованою областю перегляду, мініатюри праворуч
  • Галерея відкривається в окремій сторінці, область перегляду фіксована, мініатюри зверху

Подивилися приклади і якщо воно вам треба, то сміливо можете забрати скрипт з офіційного сайту: Завантажити Highslide JS »».

Скрипт з прикладами і невеликим описом російською можна скачати тут:

Завантажити

C прикладами ми розібралися, тепер давайте подивимося, що і куди потрібно прописати, щоб завести нашу галерею.

Крок 1. HTML

Розглянемо на прикладі галереї виконаної в білому дизайні.
Підключимо скрипт до нашого документу, прописавши наступний код між тегами …:

 

Крок 2.

Наступний код скрипта вписуємо відразу після першого, там же меду тегами …:

<script type="text/javascript">
hs.graphicsDir = '../highslide/graphics/';
hs.transitions = ['expand', 'crossfade'];
hs.restoreCursor = null;
hs.lang.restoreTitle = 'Натисніть для переходу на наступне зображення';
// Додати слайд-шоу панель управління і превью
hs.addSlideshow({
//slideshowGroup: 'group1',
interval: 5000,
repeat: true,
useControls: true,
overlayOptions: {
position: 'bottom right',
offsetY: 50
},
thumbstrip: {
position: 'above',
mode: 'horizontal',
relativeTo: 'expander'
}
});
// Опції для елементів сторінки
var inPageOptions = {
//slideshowGroup: 'group1',
outlineType: null,
allowSizeReduction: false,
wrapperClassName: 'in-page controls-in-heading',
useBox: true,
width: 600px,
height: 400px,
targetX: 'gallery-area 10px',
targetY: 'gallery-area',
captionEval: 'this.thumb.alt',
numberPosition: "caption"
}
// Відкриття першої мініатюри при завантаженні сторінки
hs.addEventListener.(window, 'load', function() {
document.getElementById('thumb1').onclick();
});
hs.Expander.prototype.onImageClick = function() {
if (/in-page/.test(this.wrapper.className)) return hs.next();
}
// Under no circumstances should the static popup be closed
hs.Expander.prototype.onBeforeClose = function() {
if (/in-page/.test(this.wrapper.className)) return false;
}
// ... nor dragged
hs.Expander.prototype.onDrag = function() {
if (/in-page/.test(this.wrapper.className)) return false;
}
// позиція після зміни розміру вікна
hs.addEventListener.(window, 'resize', function() {
var i, exp;
hs.page = hs.getPageSize();
for (i = 0; i < hs.expanders.length; i++) {
exp = hs.expanders[i];
if (exp) {
var x = exp.x,
y = exp.y;
// get new thumb positions
exp.tpos = hs.getPosition(exp.el);
x.calcThumb();
y.calcThumb();
// calculate new popup position
x.pos = x.tpos - x.cb + x.tb;
x.scroll = hs.page.scrollLeft;
x.clientSize = hs.page.width;
y.pos = y.tpos - y.cb + y.tb;
y.scroll = hs.page.scrollTop;
y.clientSize = hs.page.height;
exp.justify(x, true);
exp.justify(y, true);
// set new left and top to wrapper and outline
exp.moveTo(x.pos, y.pos);
}
}
});
</script>

hs.graphicsDir = ‘../highslide/graphics/’;
hs.transitions = [‘expand’, ‘crossfade’];
hs.restoreCursor = null;
hs.lang.restoreTitle = ‘Натисніть для переходу на наступне зображення’;// Додати слайд-шоу панель управління і превью
hs.addSlideshow({
//slideshowGroup: ‘group1’,
interval: 5000,
repeat: true,
useControls: true,
overlayOptions: {
position: ‘bottom right’,
offsetY: 50
},
thumbstrip: {
position: ‘above’,
mode: ‘horizontal’,
relativeTo: ‘expander’
}
});// Опції для елементів сторінки
var inPageOptions = {
//slideshowGroup: ‘group1’,
outlineType: null,
allowSizeReduction: false,
wrapperClassName: ‘in-page controls-in-heading’,
useBox: true,
width: 600px,
height: 400px,
targetX: ‘gallery-area 10px’,
targetY: ‘gallery-area’,
captionEval: ‘this.thumb.alt’,
numberPosition: “caption”
}// Відкриття першої мініатюри при завантаженні сторінки
hs.addEventListener. (window, ‘load’, function() {
document.getElementById(‘thumb1’).onclick();
});
hs.Expander.prototype.onImageClick = function() {
if (/in-page/.test(this.wrapper.className)) return hs.next();
}// Under no circumstances should the static popup be closed
hs.Expander.prototype.onBeforeClose = function() {
if (/in-page/.test(this.wrapper.className)) return false;
}
// … nor dragged
hs.Expander.prototype.onDrag = function() {
if (/in-page/.test(this.wrapper.className)) return false;
}// позиція після зміни розміру вікна
hs.addEventListener. (window, ‘resize’, function() {
var i, exp;
hs.page = hs.getPageSize();for (i = 0; i < hs.expanders.length; i++) {
exp = hs.expanders[i];
if (exp) {
var x = exp.x,
y = exp.y;// get new thumb positions
exp.tpos = hs.getPosition(exp.el);
x.calcThumb();
y.calcThumb();// calculate new popup position
x.pos = x.tpos – x.cb + x.tb;
x.scroll = hs.page.scrollLeft;
x.clientSize = hs.page.width;
y.pos = y.tpos – y.cb + y.tb;
y.scroll = hs.page.scrollTop;
y.clientSize = hs.page.height;
exp.justify(x, true);
exp.justify(y, true);// set new left and top to wrapper and outline
exp.moveTo(x.pos, y.pos);
}
}
});

Як бачимо, скрипт має настроюються параметри, тобто interval відповідає за тривалість показу зображення в режимі слайд-шоу, щоб прискорити або сповільнити показ, просто змініть значення на будь-своє. Параметр repeat відповідає за повтор показу, в нашому випадку виставлений false, значить відключений, міняєте на true, і отримуєте нескінченне слайд шоу.
У загальному і цілому експериментуючи з налаштуваннями, побачите наскільки широкі можливості даного скрипта.

Крок 3. HTML (знову)

У тому місці, де повинна за Вашим задумом виводитися галерея, пропишемо наступний код:

Highslide JS

Highslide JS

Атрибут href визначає адресу повнорозмірного зображення. Відповідно слід прописувати свій шлях до файлів зображень.
На зображеннях присутній підпис, для її відображення Вам необхідно відразу після коду на файл картинки, прописати текст підпису та укласти його в наступний блок:

Напис на перше зображення. Підпис можна офрмить за допомогою CSS.

Напис на перше зображення. Підпис можна офрмить за допомогою CSS.

І так далі, з кожним додаються зображенням в галерею. Для більшої наочності наведу приклад коду для галереї з трьох картинок, а що змінити у себе на сайті, думаю розберетеся без праці.

<div class="highslide-gallery">
<a class="highslide" onclick="return hs.expand(this)" href="../images/gallery1.jpg">
<img title="Збільшити" src="images/gallery1.thumb.jpg" alt="Highslide JS" /></a>
<div class="highslide-caption">
Підпис на першому зображенні.</div>
<a class="highslide" onclick="return hs.expand(this)" href="../images/gallery2.jpg">
<img title="Збільшити" src="images/gallery2.thumb.jpg" alt="Highslide JS" />
</a>
<div class="highslide-caption">
Підпис на другому зображенні.</div>
<a class="highslide" onclick="return hs.expand(this)" href="../images/gallery3.jpg">
<img title="Збільшити" src="images/gallery3.thumb.jpg" alt="Highslide JS" />
</a>
<div class="highslide-caption">
Підпис третього зображення.</div>
</div>

Highslide JS

Підпис на першому зображенні.

Highslide JS

Підпис на другому зображенні.

Highslide JS

Підпис третього зображення.

Всі! Ваша чудова галерея для сайту готова, якщо все зробите правильно, то зможете порадувати своїх користувачів. А я впевнений, що все у вас вийде.
Наступного разу розповім, як використовувати Highslide JS, для виведення текстових та інформаційних блоків з відмінним оформленням.

З Повагою, Андрій .

Буду всім вдячний, якщо підтримайте проект — додавши блог виключення AdBlock та поділіться посиланням на запис в своїх соціальних мережах: