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

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

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

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

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

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

/**
* Постраничная навигация
**/
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; ?>

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

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

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

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

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

Метки:

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

Комментарии 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