Галерея сайту. Урок 5

29.10.2021

294

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

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

Далі в папці /js/ створимо файл scripts.js для нового скрипта і підключимо файл на сторінці:

У цьому файлі заборонимо перехід за посиланнями, отримаємо номер запитаної сторінки і напишемо асинхронний запит:

$(document).ready(function(){
e.preventDefault();
var page = $(this).data(‘page’);
$.ajax({
url: ‘pagination_ajax.php’,
type: ‘GET’,
data: {page: page},
success: function(res){
$(‘.gallery’).empty();
$(‘.gallery’).hide().fadeIn(500).html(res);
},
error: function(){
alert(‘Error’);
}
});
});
});

Після отримання відповіді від сервера (відповідь буде представляти із себе нове вміст блоку gallery) ми очистимо блок gallery і додамо в нього html-код, отриманий у відповіді від серверної частини.

Далі створимо файл pagination.php, який перенесемо з індексного файлу блок коду, що відповідає за підготовку даних для пагинации та отримання пагинации, тобто даний код:

/*
——————-пагинация———————*/
// кількість фото на сторінку
$perpage = 9;
// загальна кількість фото
$count_img = count($images);
// необхідну кількість сторінок
$count_pages = ceil($count_img / $perpage);
// якщо число сторінок одно 0
if(!$count_pages) $count_pages = 1;
// отримуємо номер сторінки
if( isset($_GET[‘page’]) ){
$page = (int)$_GET[‘page’];
if( $page $count_pages ) $page = $count_pages;
// перша картинка на сторінку
$start_pos = ($page – 1) * $perpage;
// остання картинка на сторінку
$end_pos = $start_pos + $perpage;
// якщо остання картинка більше максимуму картинок
if( $end_pos > $count_img ) $end_pos = $count_img;
// отримуємо пагінацію
$pagination = pagination($page, $count_pages);

В індексному файлі, відповідно, підключимо новий файл:

require_once ‘pagination.php’;

Тепер створимо файл pagination_ajax.php, який буде приймати асинхронний запит. У відео версії уроку ви знайдете докладний пояснення коду даного файлу, тут же я просто наведу цей код:

include ‘functions.php’;
$dir = ‘img/1/small/’;
$bdir = ‘img/1/big/’;
$images = get_images($dir);
require_once ‘pagination.php’;
// формування + висновок
if($images): $i = $start_pos+1; $output = null;
for($j = $start_pos; $j < $end_pos; $j++):
$output .= ‘

‘;
$output .= ‘

‘;
$output .= “;
$output .= ‘