Нескінченна галерея з прокруткою

23

Від автора: При роботі з веб-галереями мене дратує те, що доводиться переходити зі сторінки на сторінку; так що в сьогоднішньому уроці ми вивчимо, як створити автоматично генерується односторінкової нескінченну веб-галерею з прокруткою за допомогою PHP і AJAX. Давайте почнемо!

завантажте вихідні коди собі на комп’ютер!

Крок 1: Ескіз проекту нескінченної галереї

Ми почнемо з звичайної сторінки з галереєю, у якої є контейнер для зображень, і далі будемо відстежувати позицію прокрутки, протягом коротких інтервалів періодично викликаючи функцію JavaScript. Кожен раз, коли смуга прокрутки нашої нескінченної галереї буде досягати нижньої межі, ми будемо робити запит AJAX до зовнішнього файлу PHP, який повертає список назв зображень. Після цього, все, що потрібно зробити – додати ці зображення в контейнер, модифікуючи, таким чином, висоту сторінки і пересуваючи позицію прокручування вище.

Нескінченна галерея з прокруткою

Крок 2: Розмітка HTML

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

Нескінченна галерея з прокруткою
Нескінченна галерея з прокруткою
Нескінченна галерея з прокруткою

9 Images Displayed | top

Нескінченна галерея з прокруткою

Крок 3: CSS

CSS теж досить стандартний. По-перше, ми визначаємо кольору сторінки і місце розташування заголовка і абзаців.

body{
background:#222;
color:#666;
}
#header{
font-family:Arial, Helvetica, sans-serif;
font-size:24px;
font-weight:bold;
text-align:left;
text-indent:35px;
margin: 0 auto;
width:800px;
margin-bottom:10px;
}
hr{
margin: 20px;
border:none;
border-top: 1px solid #111;
border-bottom: 1px solid #333;
}
p{
color:#444;
text-align:left;
font-size:10px;
margin-left: 20px;
margin-bottom: -10px;
}
a{
color:#444;
}

Нескінченна галерея з прокруткою

Крок 4

Далі для контейнера і зображень я використовував трохи CSS3 для додавання закруглених кутів і тіней. Не забувайте, «-moz-box-shadow»і «-moz-border-radius» використовуються в Firefox, а «-webkit-box-shadow» і «-webkit-border-radius» — Chrome та Safari.

Нескінченна галерея з прокруткою

#container{
margin: 0 auto;
width:800px;
border:1px solid #333;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
font-family:Verdana, Geneva, sans-serif;
text-align:center;
}
img{
border:10px solid #444;
-moz-border-radius: 5px;
-webkit-border-radius: 10px;
margin: 15px;
}
img:hover{
border-color:#555;
-moz-box-shadow: 0px 0px 15px #111;
-webkit-box-shadow: 0px 0px 15px #111;
}

Крок 5: Скрипт PHP

Це дуже короткий дію. Нам потрібно викликати скрипт PHP індексом наступного зображення, який нам потрібен в якості параметра. Насамперед, ми повинні витягти всі доступні імена зображень з каталогу і зберегти їх в масив. Я систематизував свої зображення в дві папки: «thumb» та «img», які містять відповідно зменшені та повнорозмірні. Зверніть увагу, що зменшені зображення повинні мати точно такі ж імена, як відповідні їм зображення.

Нескінченна галерея з прокруткою

Тут ми визначаємо змінну для каталогу, з якого нам потрібно отримувати зображення, перевіряємо, чи існує він і є доступним для читання і зчитуємо всі імена файлів з нього. При читанні повного вмісту папки, ми обов’язково отримаємо два додаткових елементи, які нам не потрібні: «.» – це означає поточний каталог, і «..» – означає посилання на батьківський каталог. Щоб врахувати це, нам потрібно перевіряти, чи відрізняється читається елемент від зазначених двох, щоб потім безпечно додати його в свій масив.

$files[] = $f;

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

Крок 6

Тепер потрібно побудувати текст відповіді. Ми відішлемо назад в JavaScript один рядок, який містить всі необхідні імена файлів, розділених крапкою з комою.

$n = $_GET [n];
$response = «»;

Тут ми отримуємо в якості параметра в URL індекс наступного потрібного нам зображення і ініціалізуємо рядок відповіді.

for($i = $n; $i

Як я вже говорив, картинки будуть згруповані в набори з трьох рядів, де кожен ряд буде містити три зображення, так що нам потрібно всього дев’ять зображень, щоб повернути всі імена файлів в групі. Починаємо з індексу, отриманого в якості параметра, $n, і рухаємося до $n+9. При кожному збільшенні додаємо ім’я зображення, за яким слід «;», в текст відповіді. Тут відбувається невеликий фокус. У нас немає нескінченного кількості зображень; так що для створення ефекту «нескінченної», ніколи не закінчується галереї, ми повинні скидати в початок поточний індекс кожен раз, коли він ставати більше загальної кількості зображень. Це зроблено з застосуванням функції «modulo» або «%» між індексом і загальною кількістю зображень.

$i%count($files)

В результаті цієї операції ми отримуємо залишок від ділення цих двох елементів. Наприклад, якщо індекс «$i» дорівнює «50», а кількість зображень «count($files)» одно «45», результат буде дорівнює «5». Таким же чином, якщо «$i» — «50», а «count($files)» — «65», результат буде «50». Нарешті, нам необхідно відправити назад текст відповіді.

Крок 7

Ось остаточний варіант скрипта для PHP. Просто помістіть цей код у новий файл .php.

Крок 8: JavaScript

Як звичайно, спочатку ми визначаємо змінні, які нам знадобляться.

var contentHeight = 800;
var pageHeight = document.documentElement.clientHeight;
var scrollPosition;
var n = 10;
var xmlhttp;

Нескінченна галерея з прокруткою

Щоб визначити, чи знаходиться смуга прокрутки поблизу низу сторінки, нам потрібні три змінні:

«contentHeight» – висота вихідної галереї

«pageHeight» – висота видимої в браузері сторінки

«scrollPosition» – позиція смуги прокрутки, я відміряв від верху

Нарешті, нам потрібна змінна для індексу наступної сторінки (яку ми збираємося надіслати в PHP-скрипт) і змінна для об’єкта запиту Ajax.

Крок 9

Тут нам потрібно визначити функцію, яка додасть зображення в контейнер HTML.

function putImages(){
if (xmlhttp.readyState==4){
if(xmlhttp.responseText){

Об’єкт запиту проходить різні стани після того, як запит зроблено, і у кожного стану є своє числове позначення. Нас цікавить тільки одне значення — «4», яке означає фінальну стадію, коли запит закінчено. Спочатку перевіряємо, чи є запит у цьому стані, а потім перевіряємо, чи ми отримали відгук.

Крок 10

Якщо виконані обидві умови, тоді нам потрібно розібрати текст відповіді на частини. Це означає, що ми повинні розділити імена файлів в масив. Пам’ятайте, що скрипт PHP повертає один рядок з іменами, розділеними крапкою з комою. Ось приклад: Achievements.jpg;Bw.jpg;Camera.jpg;Cat-Dog.jpg;CREATIV.jpg;creativ2.jpg;Earth.jpg;Endless.jpg;EndlesSlights.jpg;

var resp = xmlhttp.responseText.replace(«\r\n», «»);
var files = resp.split(«;»);

Є невелика проблемка, з якою ми повинні впоратися в першу чергу; текст відповіді може починатися з символу перекладу рядка, який нам не потрібен. Це легко виправити за допомогою функції «replace», яка приймає два параметри: \r\n» – символ перекладу рядка і «» – порожній рядок, яка повинна замінити всі входження першого параметра. Тепер все, що потрібно зробити – це розбити рядок за роздільником «;».

Крок 11

Далі ми повинні додати зображення в свій контейнер.

var j = 0;
for(i=0; iНескінченна галерея з прокруткою‘;
j++;
if(j == 3 || j == 6)
document.getElementById(«container»).innerHTML += «;
else if(j == 9){
document.getElementById(«container»).innerHTML += ‘

‘+(n-1)+» Images Displayed | top

«;
j = 0;
}
}
}

Для кожного елемента масиву ми робимо перевірку, не порожня чи це рядок, і додаємо зменшене зображення і посилання на нього. Також нам потрібно використовувати лічильник «j» для розподілу зображень по рядах. Після кожного третього і шостого доданого зображення ми створюємо новий рядок, а після дев’яти доданих зображень вставляємо текст, що відображає загальне число показаних зображень і посилання до верху сторінки.

Крок 12

Ось функція в завершеному вигляді.

function putImages(){
if (xmlhttp.readyState==4){
if(xmlhttp.responseText){
var resp = xmlhttp.responseText.replace(«\r\n», «»);
var files = resp.split(«;»);
var j = 0;
for(i=0; iНескінченна галерея з прокруткою‘;
j++;
if(j == 3 || j == 6)
document.getElementById(«container»).innerHTML += «;
else if(j == 9){
document.getElementById(«container»).innerHTML += ‘

‘+(n-1)+» Images Displayed | top

«;
j = 0;
}
}
}
}
}
}

Крок 13

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

function scroll(){
if(navigator.appName == «Microsoft Internet Explorer»)
scrollPosition = document.documentElement.scrollTop;
else
scrollPosition = window.pageYOffset;

По-перше, нам потрібно визначити місце розташування смуги прокручування. Для Internet Explorer це робиться трохи по-іншому, тому нам потрібно перевірити, яким браузером користується клієнт, і потім просто зберегти це значення в змінну, яку ми раніше передбачили.

Крок 14

if((contentHeight — pageHeight — scrollPosition) < 500){

Нескінченна галерея з прокруткою

Тепер перевіряємо, наскільки далеко ми знаходимося від кінця нашої галереї, тобто не досягла видима в браузері частина сторінки відстані в 500px від низу сторінки. Це — не точна величина, і можна використовувати будь-яке інше значення, яке порахуєте потрібним. До тих пір, поки ця умова вірно, можна продовжувати додати нові фотографії.

Крок 15: Створення об’єкта XMLHttpRequest

Ми готові створити об’єкт XMLHttpRequest і відіслати дані за допомогою нього. Знову повторюю, для Internet Explorer визначення трохи інші, так що ми також повинні це враховувати.

if(window.XMLHttpRequest)
//Firefox, Opera, Safari
xmlhttp = new XMLHttpRequest();
else
if(window.ActiveXObject)
//Internet Explorer
xmlhttp = new ActiveXObject(«Microsoft.XMLHTTP»);
else
alert («Bummer! Your browser does not support XMLHTTP!»);

Крок 16

Перед відправкою запиту нам потрібно задати ім’я PHP-скрипта на сервері і додати параметри, які потрібно йому надати.

var url=»getImages.php?n=»+n;

Це – проста текстова змінна, яка представляє URL сторінки.

Крок 17

Настав час відправити запит.

xmlhttp.open(«GET»,url,true);
xmlhttp.send();

URL визначається викликом методу «open». Другий параметр є єдино важливим для нас, оскільки він позначає URL скрипта. Після цього все, що нам потрібно, – це відправити запит за допомогою send(). Це запустить PHP-скрипт, а результат його роботи буде перебувати в «xmlhttp.responseText».

Крок 18

Останній крок – розмістити новий контент на сторінці, викликавши певну раніше функцію «putImages», і підготувати змінні для наступного запиту.

Нескінченна галерея з прокруткою

n += 9;
contentHeight += 800;
xmlhttp.onreadystatechange = putImages;
}
}

У нас в галереї дев’ять нових зображень, таким чином, ми збільшуємо «n» на 9. Ще нам потрібно змінити висоту сторінки; тому збільшуємо «contentHeight» на 800.

Крок 19

Ось використаний нами JavaScript цілком.

var contentHeight = 800;
var pageHeight = document.documentElement.clientHeight;
var scrollPosition;
var n = 10;
var xmlhttp;
function putImages(){
if (xmlhttp.readyState==4)
{
if(xmlhttp.responseText){
var resp = xmlhttp.responseText.replace(«\r\n», «»);
var files = resp.split(«;»);
var j = 0;
for(i=0; iНескінченна галерея з прокруткою‘;
j++;
if(j == 3 || j == 6)
document.getElementById(«container»).innerHTML += «;
else if(j == 9){
document.getElementById(«container»).innerHTML += ‘

‘+(n-1)+» Images Displayed | top

«;
j = 0;
}
}
}
}
}
}
function scroll(){
if(navigator.appName == «Microsoft Internet Explorer»)
scrollPosition = document.documentElement.scrollTop;
else
scrollPosition = window.pageYOffset;
if((contentHeight — pageHeight — scrollPosition) < 500){
if(window.XMLHttpRequest)
xmlhttp = new XMLHttpRequest();
else
if(window.ActiveXObject)
xmlhttp = new ActiveXObject(«Microsoft.XMLHTTP»);
else
alert («Bummer! Your browser does not support XMLHTTP!»);
var url=»getImages.php?n=»+n;
xmlhttp.open(«GET»,url,true);
xmlhttp.send();
n += 9;
xmlhttp.onreadystatechange=putImages;
contentHeight += 800;
}
}

Крок 20

Останнє, що ми повинні зробити, це запускати JavaScript періодично з заданим інтервалом часу.

Просто визначте властивість «onload» тега «body» і встановіть його значення на функцію «setInterval». Це буде запускати «scroll» кожну чверть секунди. Крім того, ви можете змінити це значення часу, але я виявив, що воно оптимально для того, що нам потрібно.

Кінець!

Ми закінчили створення галереї з нескінченною прокруткою! Сподіваюся, ви знайшли цей підручник корисним. Будь ласка, залиште повідомлення внизу у відділі коментарів, якщо вам знадобиться допомога або порада.

Переклад і редакція: Ріг Віктор і Андрій Бернацький. Команда webformyself.

E-mail: [email protected]

Проект webformyself.com — Як створити свій сайт. Основи самостійного сайтобудування

P. S. Хочете опублікувати цікавий тематичний матеріал і заробити? Якщо відповідь «Так», то тисніть сюди.