Презентація зображень на веб-сторінці

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

Цікаво, як створити такий ефект на основі зображення? Читайте далі!

Для програмування такої взаємодії використовується мова програмування JavaScript та її різновид JQuery. Інструменти цієї мови доступні для будь-якого користувача, якщо він має доступ до перегляду вихідного коду своєї веб-сторінки. Наприклад, на платформі Moodle цей режим вмикається послідовним клацанням виділених кнопок у режимі редагування написів.

На платформі https://www.blogger.com/— існує перемикач у режим HTML.

На більшості інших веб-платформ можна знайти аналогічні перемикачі. Переконавшись, що таке редагування є доступним, можна починати створення інтерактивної графічної презентації.
 
Для початку потрібно створити зображення, у якому будуть «склеєні» усі кадри, котрі потрібно показати. У даному випадку — це слайди презентації, скопійовані у графічний редактор. У результаті отримуємо файл, достатньо довгий по горизонталі, а по вертикалі — такого розміру, який ми би хотіли бачити його на сторінці.

Цей файл потрібно розмістити на будь-якому хостингу зображень, котрий забезпечує незмінність розмірів завантаженого зображення. На платформі Moodle можна скористатись вбудованими можливостями. Так, обравши вставку зображення у напис, у режимі вихідного коду копіюємо отриману адресу цього зображення:
<img src=»http://dystosvita.mdl2.com/draftfile.php/13/user/draft/190703779/DystOsvita.png» alt=»» width=»500″ height=»100″ role=»presentation» style=»vertical-align:text-bottom; margin: 0 .5em;» class=»img-responsive»>
 
На інших платформах блогів та форумів доцільно скористатись зовнішніми інструментами, наприклад http://postimage.org/

Далі потрібно дізнатись адресу, за якою розміщене повнорозмірне зображення.

Для цього може бути необхідним вдатись до копіювання із контекстного меню зображення, наприклад http://s9.postimg.org/p1jn57lzh/Dyst_Osvita.png

 Маючи цю адресу, далі залишається скористатись наведеним нижче кодом:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
<script>
$(document).ready(function(){
var clip = 1;
$("#slider").click(function(){
if (clip < 9){
$("#slider").animate({left:"-=480px"},500);
clip+=1;
}
else{
$("#slider").animate({left:"0px"},500);
clip = 1;
}
});
});

<div id="pic_box" style="position:relative; left:50px; width:480px; overflow: hidden;">
<img id="slider" src="http://s9.postimg.org/p1jn57lzh/Dyst_Osvita.png"
style="position:relative; max-width: none; height: 360px;"> </div>

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

9 — це кількість кадрів зображення. Спочатку ми перебуваємо на першому кадрі, і коли доходимо до дев’ятого, знову повертаємось до першого.
480px -ширина одного кадру зображення у пікселях
http://s9.postimg.org/p1jn57lzh/Dyst_Osvita.png — адреса зображення
360px — висота зображення

Як бачимо, ці налаштування не надто складні, тож доступні для більшості користувачів, які не бояться експериментувати з HTML-кодом.

Для тих, хто хоче знати більше, розберемо код докладніше.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
Перший рядок передбачає підключення бібліотеки мови JQuery. Вона може зберігатись як у файлі на власному комп’ютері чи хостингу, так і використовуватись із хмарного сервісу Google, як у наведеному прикладі.
Далі починається безпосередньо скрипт. Він запуститься на виконання після завершення завантаження документа, на що вказує рядок $(document).ready(function().
Оголошена змінна clip зберігає номер кадру, котрий показано у певний момент часу. На початку — це перший кадр.
Далі слідує обробник події клацання по об’єкту із назвою slider (далі у коді можна побачити, що так буде названо зображення) — $(«#slider»).click(function()
Конструкція умови перевіряє значення змінної clip. Якщо це значення менше 9, то до об’єкту slider (тобто зображення) застосовується функція анімації $(«#slider»).animate ліворуч на 480 пікселів зі швидкістю 500 (мілісекунд), як зазначено у параметрах цієї функції {left:»-=480px»},500. Також при цьому відбувається зміна номеру поточного кадру, збільшуючись на одиницю.
Якщо ж номер кадру рівний 9, то відбувається перехід на перший кадр. Для цього задано анімований перехід до координати 0 пікселів, а номер кадру стає рівним одиниці.
На цьому функція обробки документа і весь скрипт завершуються (відповідні фігурні дужки).

Решта коду стосується змістового та стильового наповнення документа.
Спочатку створюється рамка, у якій буде показане зображення. Це фрагмент div з назвою pic_box, із наступними властивостями стилю:
position:relative; — відносне розташування (від початкового — по краю сторінки, це уможливлює подальше зміщення блоку із зображенням)
left:50px; — зміщення на 50 пікселів від краю сторінки
width:480px; — ширина 480 пікселів
overflow: hidden; — якщо вміст виходитиме за межі блоку, його слід приховувати.

До тегу вставки зображення з ідентифікатором slider додано такий стиль:
position:relative; — відносне розташування (від початкового — по краю блоку, це уможливлює подальше зміщення зображення)
max-width: none; — незмінна ширина зображення
height: 360px; — задана висота зображення
Останні два параметри потрібні для тих веб-служб, котрі намагаються змінити початкові розміри зображення, припасовуючи їх до розмірів сторінки.