От автора: в этом уроке мы добавим определенной современности нашей галерее, сделав переход по страницам пагинации асинхронным, т.е. без перезагрузки всей страницы. Это довольно удобно по нескольким причинам: снижается нагрузка для сервера, поскольку теперь сервер будет обрабатывать только один целевой запрос, соответственно, сайт будет работать быстрее. Ну и теперь можно будет легко добавить симпатичных эффектов при переходе к картинкам новой страницы.
Для начала для упрощения дальнейшей работы давайте немного допишем функцию пагинации, добавив для каждой ссылки на страницу новый атрибут – data-page с номером страницы. Это нам потребуется для того, чтобы легко получить номер запрошенной страницы.
Далее в папке /js/ создадим файл scripts.js для нового скрипта и подключим файл к странице:
|
1 |
<script src="js/scripts.js"></script> |
В этом файле запретим переход по ссылкам, получим номер запрошенной страницы и напишем асинхронный запрос:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
$(document).ready(function(){ $('.gallery').on('click', 'a.nav-link', function(e){ 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, в который перенесем из индексного файла блок кода, отвечающий за подготовку данных для пагинации и получение пагинации, т.е. данный код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
/* -------------------пагинация---------------------*/ // кол-во фото на страницу $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 < 0 ) $page = 1; }else{ $page = 1; } // если запрошенная страница больше максимума 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); |
В индексном файле, соответственно, подключим новый файл:
|
1 |
require_once 'pagination.php'; |
Теперь создадим файл pagination_ajax.php, который будет принимать асинхронный запрос. В видео версии урока вы найдете подробное объяснение кода данного файла, здесь же я просто приведу этот код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
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 .= '<div class="item">'; $output .= '<div>'; $output .= '<a data-lightbox="lightbox" href="' .$bdir . $images[$j]. '">'; $output .= '<img class="front" src="' .$dir . $images[$j]. '" alt="">'; $output .= '<span class="back">Фото ' .$i. '</span>'; $output .= '</a>'; $output .= '</div>'; $output .= '</div>'; $i++; endfor; endif; echo $output . '<div class="clear"></div><div class="pagination">' .$pagination. '</div>'; |
Вот, собственно, и все. Если вы нигде не ошиблись, то теперь пагинация галереи будет работать без перезагрузки страницы.
На этом мы завершим текущий урок. Удачи и до новых встреч!
