От автора: в этом уроке мы добавим к галерее постраничную навигацию (пагинацию). Пока что это будет классическая постраничная навигация в виде ссылок с номерами страниц, кликая по которым, пользователь переходит на следующую страницу с фотографиями. Текущая навигация будет работать с перезагрузкой страницы, но в следующих уроках мы добавим функционала AJAX, который будет получать картинки следующей страницы без перезагрузки страницы.
В текущем уроке мы будем активно использовать материалы уроков Каталог товаров. Постраничная навигация и Каталог товаров. Постраничная навигация. Урок 2. В указанных уроках разобрано создание функции постраничной навигации, которую мы и возьмем целиком оттуда. Также мы возьмем стилевое оформление. Поэтому для лучшего понимания сути дальнейшей работы я рекомендую вам обратиться к указанным урокам.
Итак, для начала возьмем из исходников предложенных уроков функцию пагинации и добавим ее в наш файл функций. Изменим лишь значение третьего параметра функции по умолчанию с true на false:
|
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 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
/** * Постраничная навигация **/ function pagination($page, $count_pages, $modrew = false){ // << < 3 4 5 6 7 > >> $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 = "<a class='nav-link' href='{$uri}page=" .($page-1). "'><</a>"; } if( $page < $count_pages ){ $forward = "<a class='nav-link' href='{$uri}page=" .($page+1). "'>></a>"; } if( $page > 3 ){ $startpage = "<a class='nav-link' href='{$uri}page=1'>«</a>"; } if( $page < ($count_pages - 2) ){ $endpage = "<a class='nav-link' href='{$uri}page={$count_pages}'>»</a>"; } if( $page - 2 > 0 ){ $page2left = "<a class='nav-link' href='{$uri}page=" .($page-2). "'>" .($page-2). "</a>"; } if( $page - 1 > 0 ){ $page1left = "<a class='nav-link' href='{$uri}page=" .($page-1). "'>" .($page-1). "</a>"; } if( $page + 1 <= $count_pages ){ $page1right = "<a class='nav-link' href='{$uri}page=" .($page+1). "'>" .($page+1). "</a>"; } if( $page + 2 <= $count_pages ){ $page2right = "<a class='nav-link' href='{$uri}page=" .($page+2). "'>" .($page+2). "</a>"; } return $startpage.$back.$page2left.$page1left.'<a class="nav-active">'.$page.'</a>'.$page1right.$page2right.$forward.$endpage; } |
Также возьмем оттуда стилевое оформление будущей пагинации:
|
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 30 31 32 33 |
/* 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; } |
Нам остается лишь получить все необходимые параметры для работы функции пагинации и параметры для цикла, который будет выводить картинки галереи порционно. Здесь я приведу хорошо откомментированный код, который подробно объяснен в видео версии урока.
Этот участок кода добавляем сразу получения массива картинок:
|
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 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<?php if($images): $i = 1; ?> <?php for($j = $start_pos; $j < $end_pos; $j++): ?> <div class="item"> <div> <a data-lightbox="lightbox" href="<?=$bdir . $images[$j]?>"> <img class="front" src="<?=$dir . $images[$j]?>" alt=""> <span class="back">Фото <?=$i?></span> </a> </div> </div> <?php $i++; endfor; ?> <?php else: ?> <p>В данной галерее нет картинок</p> <?php endif; ?> <div class="clear"></div> <?php if( $count_pages > 1 ): ?> <div class="pagination"><?=$pagination?></div> <?php endif; ?> |
Вот, собственно, и все. Если все сделали правильно, то под картинками должны увидеть пагинацию в виде номеров страниц.
На этом мы завершим текущий урок. Удачи и до новых встреч!
Комментарии (2)