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

Галерея для сайта

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

скачать исходникискачать урок

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

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

Фреймворк YII2. Быстрая разработка с современным PHP фреймворком

Узнай тонкости современной веб-разработки с помощью фреймворка YII2

Узнать подробнее
/**
* Постраничная навигация
**/
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&amp;";
 }
  }
 }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}&amp;";
 }
  }
 }

 if( $page > 1 ){
  $back = "<a class='nav-link' href='{$uri}page=" .($page-1). "'>&lt;</a>";
 }
 if( $page < $count_pages ){
  $forward = "<a class='nav-link' href='{$uri}page=" .($page+1). "'>&gt;</a>";
 }
 if( $page > 3 ){
  $startpage = "<a class='nav-link' href='{$uri}page=1'>&laquo;</a>";
 }
 if( $page < ($count_pages - 2) ){
  $endpage = "<a class='nav-link' href='{$uri}page={$count_pages}'>&raquo;</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;
}

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

/* 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 < 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);

И перепишем цикл вывода картинок, а также добавим вывод пагинации:

<?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; ?>

Вот, собственно, и все. Если все сделали правильно, то под картинками должны увидеть пагинацию в виде номеров страниц.

На этом мы завершим текущий урок. Удачи и до новых встреч!

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Хотите научиться делать фотогалереи как Вконтакте?

Прямо сейчас изучите курс по созданию красивой фотогалареи как Вконтакте!

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (2)

  1. Алик

    Зачем так много php тэгов в index.php? Можно всё подвести под 1 тэг php?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree