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

17

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

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

Для початку для спрощення подальшої роботи давайте трохи допишемо функцію пагинации, додавши для кожної посилання на сторінку новий атрибут – 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 .= ‘Галерея сайту. Урок 5‘;
$output .= ‘Фото ‘ .$i. ‘‘;
$output .= «;
$output .= ‘

‘;
$output .= ‘

‘;
$i++; endfor;
endif;
echo $output . ‘

‘.$pagination. ‘

‘;

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

На цьому ми завершимо поточний урок. Удачі і до нових зустрічей!