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

23

Від автора: у цьому уроці ми додамо до галереї посторінкову навігацію (пагінацію). Поки що це буде класична посторінкова навігація у вигляді посилань з номерами сторінок, клікаючи по яких, користувач переходить на наступну сторінку з фотографіями. Поточна навігація буде працювати з перезавантаженням сторінки, але в наступних уроках ми додамо функціоналу 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);

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