Перейти до основного вмісту

Чи не створити нам фотослайдер?

Якщо у вас багато фотографій, які ну дуже вже хочеться показати на своїй веб-сторінці, то для того, щоб не займати місце вставленням багатьох зображень, можна використати фотослайдер, за допомогою якого відвідувач вашого сайту зможе поклікати на кнопках і самостійно погортати усі надані вами зображення.
Про те, як створити простенький фотослайдер своїми руками, й піде мова далі
Перш за все, слід підготувати до публікації наші зображення. Для їх коректного відображення на сайті, бажано, щоб усі вони були однакового розміру. Мається на увазі, що вони повинні мати однакову роздільну здатність, однакові пропорції й однакову кількість пікселів по горизонталі й вертикалі. Інакше гортати наші картинки буде так само незручно, як на цьому сайті. Усе це означає, що починається створення фотослайдера з роботи в одному з редакторів зображень, який дозволяє обробити усі ці фото і встановити потрібні нам властивості. Однією з великої кількості таких програм є, наприклад, FastStone Image Viewer:


Отже, виконуємо обробку наших зображень за якимось єдиним стандартом і складаємо їх усі в традиційну для веб-розробки папку images. Бажано також ще й перейменувати файли, надавши кожному коротке ім'я з порядковим номером відповідно до того, в якому порядку наші зображення будуть виставлені у фотослайдері. Так легше буде їх потім впорядковувати. Ну й, звісно, усі файли повинні бути в одному й тому ж графічному форматі.

Як бачимо, серед файлів є зображення як з горизонтальною, так і з вертикальною орієнтацією. При встановленні їх розмірів довша сторона кожного фото повинна бути однаковою на усіх фотографіях. В даному випадку усі зображення пронумеровані по порядку, мають розширення jpg, пропорції 18×13, роздільну здатність 300 dpi, довжину більшої сторони 2000 px.

Наступним кроком буде створення html-розмітки нашого фотослайдера.
За допомогою будь-якого з веб-редакторів або звичайного Блокнота створюємо собі порожню html-сторінку і вписуємо після <body> такий код:
<div style="display: block; text-align: center;">
        <div style="width: 100%;">
            <img id="currentPhoto" style="height: 400px;" src="images/autumn01.jpg">
        </div>
        <br>
        <div>
            <button onclick="showPreviousPhoto()">&#9668;</button>
            <button onclick="showNextPhoto()">&#9658;</button>
        </div>
</div>
<script type="text/javascript" src="slider.js"></script>
А тепер - те саме, тільки з поясненнями:

Клікніть на зображенні для перегляду в збільшеному вигляді

Якщо на вашій сторінці з'явилось таке:
...значить, усе йде за планом. У нас є місце для фотографій і в нього перша фотка уже вставлена, а під нею - дві кнопки для гортання вперед-назад. От тільки клік на будь-якій з цих кнопок ні до чого не призводить. Воно й не дивно, адже ми ще не виписали скрипт, який запускатиметься по кліку на кожній з цих кнопок.

Тому, переходимо до створення скрипта.

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

Створимо в тій же папці, що й попередні матеріали, файл slider.js, і запишемо туди ось це:
let photos = [
    "autumn01",
    "autumn02",
    "autumn03",
    "autumn04",
    "autumn05",
    "autumn06",
    "autumn07",
    "autumn08",
    "autumn09",
    "autumn10",
    "autumn11",
    "autumn12"
];
let photosCount = photos.length;
let currentPhotoIndex = 1;

function showNextPhoto() {
    currentPhotoIndex++;
    if (currentPhotoIndex > photosCount) {
        currentPhotoIndex = 1;
    }
    let elem = document.getElementById("currentPhoto");
    elem.src = "images/" + photos[currentPhotoIndex - 1] + ".jpg";
}

function showPreviousPhoto() {
    currentPhotoIndex = currentPhotoIndex - 1;
    if (currentPhotoIndex < 1) {
        currentPhotoIndex = photosCount;
    }
    let elem = document.getElementById("currentPhoto");
    elem.src = "images/" + photos[currentPhotoIndex - 1] + ".jpg";
}
І знову той самий код тільки з поясненнями кожного кроку:

Клікніть на зображенні для перегляду в збільшеному вигляді

Те ж, що вийшло в результаті - можна переглянути за посиланням (щоправда, фотографій в слайдер там вставлено тільки 8 - більше файлів додати не дозволяє free-версія CodePen), а використані під час роботи файли можна завантажити тут.
Мітки: