Поточний час:
Сьогодні 27 травня, неділя 2018 рік
Zura-Blog 3 роки 5 місяців 8 днів

Ваш ip адрес:23.20.240.193


Ви обновили сторінку в 0 : 36
Статистика

Кількість публікацій на блозі: 375
Кількість коментарів на блозі: 102
Кількість категорій на блозі: 17
Кількість міток на блозі: 28

Zura – Blog
Яндекс.Метрика UA TOP Bloggers

zura-blog chengingПривіт всім відвідувачам Zura — Blog, сьогоднішня публікація також буде присвячена фотогалереї,  і в сьогоднішніх матеріалах буде говоритись про те, як створити галерею з плавною зміною зображення.

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

Галерея з плавною зміною картинки, як для мене дуже класний варіант, для показу своїх особистих фотографій.

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

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

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

Далі  як створити такий елемент.

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

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

Можливо у більшості з вас сайти зроблені за допомогою CSM (систем управління контентом), і тоді звісно що виникне запитання, як додати такий елемент, саме до сторінки сайту створеного на CSM, в майбутньому приділю увагу такому питанню, “попарюсь” над такими завданням, думаю нічого складного також не може бути щоб розвязати таку задачку, (це  моя початкова думка).

Взагалі  щоб справитись з любим завданням, потрібно обдумувати декілька варіантів, в веб дизайні один з самих простіших варіантів, який можливо застосувати для CSM, це просто додати файл до кореневої папки сайту, і прописати посилання на файл (файл — це ваша сторінка з фотогалереєю) в головній сторінці, щоб підєднати сторінку з галереєю до сайту.

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

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

Ну і власне, що стосується скажем для прикладу “особистого сайту”, який буде складатись всього то з пяти або шести сторінок, ну десяти можливо, то для такого сайту не обовязково залучати одну з систем управління контентом CSM, а можна зробити за допомогою веб програм, таких скажем як Web Page Maker, або дещо складнішу але потужнішу Adobe Muse.

Взагалі додати саме цю галерею до  сайту  простіше простого, в index.html прописуєте посилання на файл, файл створюється в веб редакторі, і зберігається в кореневій папці сайту, в цій же папці створюєте папку, в якій будуть знаходитсь фотографії.

Ну що ж приступаємо, запускаєте редактор, я буду керуватись безкоштовним Notepad++. В верхній панелі підводимо курсор миші до кнопки файл, клацаємо, і з випадаючого списку вибираємо “новий”, а далі копіюємо цей код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Веб галерея з плавною зміною картинок на JQuery</title>
<style>
div#rotator {position:relative; }
div#rotator ul {margin: 0; }
div#rotator ul li { position:absolute; list-style: none;}
div#rotator ul li.show {z-index:-1;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
function theRotator() {
// Встановлюється прозорість всіх картинок в 0
$('div#rotator ul li').css({opacity: 0.0});

// беремо першу картинку і показуємо її (по шляху включаємо повну видимість)
$('div#rotator ul li:first').css({opacity: 1.0});

// викликаємо функцію rotate для запуску слайд шоу, 5000 = зміна картинок відбувається раз в 5 секунд
setInterval('rotate()',5000);
}

function rotate() {
// беремо першу картинку
var current = ($('div#rotator ul li.show')? $('div#rotator ul li.show') : $('div#rotator ul li:first'));

// беремо наступну картинку, коли дійдемо до останньої починаємо з початку
var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div#rotator ul li:first') :current.next()) : $('div#rotator ul li:first'));

// підключаємо ефект розчинення / загасання для показу картинок, css-класс show має більший z-index
next.css({opacity: 0.0})
.addClass('show')
.animate({opacity: 1.0}, 1000);

// ховаємо поточну картинку
current.animate({opacity: 0.0}, 1000)
.removeClass('show');
};

$(document).ready(function() {
// запускаємо слайд шоу
theRotator();
});
</script>
</head>
<body>
<div id="rotator">
<ul>
<li class="show"><img src="images1/зображення-1.jpg" /></a></li>
<li><img src="images1/зображення-2.jpg" /></a></li>
<li><img src="images1/зображення-3.jpg" /></a></li>
<li><img src="images1/зображення-4.jpg" /></a></li>
<li><img src="images1/зображення-5.jpg" /></a></li>
</ul>
</div>
</body>
</html>

вставляємо в редактор, і зберігаємо, файл може бути і з розширенням html, назву файлу даєте любу свою.

Далі розберем код. Зверніть увагу на частинку коду з тегом <ul>. Теги <ul> і <li>  відносяться до списків, в цій частинці виставляється посилання на ваші картинки, а саме щоб на сторінці відображалась картинка, потрібно вказати правильний шлях на папку, в якій знаходяться картинки.

В даному випадку моя папка називається  “images1″  а картнки вказані за номером (1, 2, 3, 4, 5) В цій частинці коду посилання на пять фото, щоб додати ще, копіюєте рядок з тегами <li></li>, і міняєте назву картинки.

Наприклад: щоб додати шосту картинку, копіюємо рядок коду

<li><img src=”images1/5.jpg” /></a></li>

додаємо ще один рядок, вставивши скопійований нижче, і у вас получиться шість рядків в списку, між тегами <ul></ul>, два з них звісно що одинакові, і в доданому скопійованому рядку просто міняєте  число “5” на число “6”. І  шосте фото в папці,  має мати назву “6”.

<ul>
<li class=”show”><img src=”images1/1.jpg” /></a></li>
<li><img src=”images1/2.jpg” /></a></li>
<li><img src=”images1/3.jpg” /></a></li>
<li><img src=”images1/4.jpg” /></a></li>
<li><img src=”images1/5.jpg” /></a></li>
</ul>

В двадцять другому рядку коду який відноситься до JavaScript скрипта, можна виставити інтервал зміни зображення помінявши 5000 (5 секунд) на інший інтервал.

setInterval(‘rotate()’,5000);

В тридцять пятому і тридцять восьмому рядку на сторінці, в коді JavaScript виставляється тривалість затухання картинки, можна виставити іншу помінявши число 1000 на інше, наприкдад 3000.

.animate({opacity: 1.0}, 3000);

current.animate({opacity: 0.0}, 3000)

Ну і все в принципі, цілий блок <div id=”rotator”>, виставляється між тегами <body></body>, в місце де ви хочите щоб відображались картинки, сторінка в мене на  тестовому сайті складається з трьох частин, правої, середньої, лівої.

В принципі даний елемент також можна застосувати і для шапки сайту. Скрипт робочий, перевірив, все працює.

До зустрічі !


Leave a Reply

Your email address will not be published. Required fields are marked *