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

327

Від автора: у цьому уроці ми додамо до галереї посторінкову навігацію (пагінацію). Поки що це буде класична посторінкова навігація у вигляді посилань з номерами сторінок, клікаючи по яких, користувач переходить на наступну сторінку з фотографіями. Поточна навігація буде працювати з перезавантаженням сторінки, але в наступних уроках ми додамо функціоналу AJAX, який буде отримувати картинки наступної сторінки без перезавантаження сторінки.

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

У поточному уроці ми будемо активно використовувати матеріали уроків Каталог товарів. Посторінкова навігація і Каталог товарів. Посторінкова навігація. Урок 2. У зазначених уроках розібрано створення функції посторінкової навігації, яку ми і візьмемо цілком звідти. Також ми візьмемо стильове оформлення. Тому для кращого розуміння суті подальшої роботи я рекомендую вам звернутися до зазначених уроків.

Отже, для початку візьмемо з исходников запропонованих уроків функцію пагинации і додамо її в наш файл функцій. Змінимо значення третього параметра функції за умовчанням true на false:

/**
* Посторінкова навігація
function pagination($page, $count_pages, $modrew = false){
// << >>
$back = null; // посилання НАЗАД
$forward = null; // посилання ВПЕРЕД
$startpage = null; // посилання НА ПОЧАТОК
$endpage = null; // посилання НА КІНЕЦЬ
$page2left = null; // друга сторінка зліва
$page1left = null; // перша сторінка зліва
$page2right = null; // друга сторінка праворуч
$page1right = null; // перша сторінка праворуч
$uri = “?”;
if(!$modrew){
// якщо є параметри у запиті
if( $_SERVER[‘QUERY_STRING’] ){
foreach ($_GET as $key => $value) {
if( $key != ‘page’ ) $uri .= “{$key}=$value&”;
}
}
}else{
$url = $_SERVER[‘REQUEST_URI’];
$url = explode(“?”, $url);
if(isset($url[1]) && $url[1] != “){
$params = explode(“&”, $url[1]);
foreach($params as $param){
if(!preg_match(“#page=#”, $param)) $uri .= “{$param}&”;
}
}
}
if( $page > 1 ){
$back = “<”;
}
if( $page < $count_pages ){
$forward = “>”;
}
if( $page > 3 ){
$startpage = “«”;
}
if( $page < ($count_pages – 2) ){
$endpage = “»”;
}
if( $page – 2 > 0 ){
$page2left = “” .($page-2). “”;
}
if( $page – 1 > 0 ){
$page1left = “” .($page-1). “”;
}
if( $page + 1 <= $count_pages ){
$page1right = “” .($page+1). “”;
}
if( $page + 2 <= $count_pages ){
$page2right = “” .($page+2). “”;
}
return $startpage.$back.$page2left.$page1left.”.$page.”.$page1right.$page2right.$forward.$endpage;
}

Також візьмемо звідти стильове оформлення майбутньої пагинации:

/* Pagination */
.pagination{
margin: 20px;
text-align: center;
}
.pagination a{
border: 1px solid #ddd;
padding: 6px 12px;
text-decoration: none;
background: #fff;
color: #428bca;
}
.pagination a:nth-child(even){
border-left: none;
border-right: none;
}
.pagination a:first-child{
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.pagination a:last-child{
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-right: 1px solid #ddd;
}
.pagination a:hover{
background: #eee;
}
.pagination > a.nav-active{
background: #428bca;
color: #fff;
border-color: #428bca;
}

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

Цю ділянку коду додаємо відразу отримання масиву картинок:

/*
——————-пагинация———————*/
// кількість фото на сторінку
$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);

І перепишемо цикл виводу картинок, а також додамо висновок пагинации:

В даній галереї картинок немає

1 ): ?>

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

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