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

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

От автора: в этом уроке мы добавим определенной современности нашей галерее, сделав переход по страницам пагинации асинхронным, т.е. без перезагрузки всей страницы. Это довольно удобно по нескольким причинам: снижается нагрузка для сервера, поскольку теперь сервер будет обрабатывать только один целевой запрос, соответственно, сайт будет работать быстрее. Ну и теперь можно будет легко добавить симпатичных эффектов при переходе к картинкам новой страницы.

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

Для начала для упрощения дальнейшей работы давайте немного допишем функцию пагинации, добавив для каждой ссылки на страницу новый атрибут – data-page с номером страницы. Это нам потребуется для того, чтобы легко получить номер запрошенной страницы.

Далее в папке /js/ создадим файл scripts.js для нового скрипта и подключим файл к странице:

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

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

Узнать подробнее
<script src="js/scripts.js"></script>

В этом файле запретим переход по ссылкам, получим номер запрошенной страницы и напишем асинхронный запрос:

$(document).ready(function(){

 $('.gallery').on('click', 'a.nav-link', function(e){
  e.preventDefault();
  var page = $(this).data('page');
  $.ajax({
 url: 'pagination_ajax.php',
 type: 'GET',
 data: {page: page},
 success: function(res){
 $('.gallery').empty();
 $('.gallery').hide().fadeIn(500).html(res);
 },
 error: function(){
 alert('Error');
 }
  });
 });

});

После получения ответа от сервера (ответ будет представлять из себя новое содержимое для блока gallery) мы очистим блок gallery и добавим в него html-код, полученный в ответе от серверной части.

Далее создадим файл pagination.php, в который перенесем из индексного файла блок кода, отвечающий за подготовку данных для пагинации и получение пагинации, т.е. данный код:

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

В индексном файле, соответственно, подключим новый файл:

require_once 'pagination.php';

Теперь создадим файл pagination_ajax.php, который будет принимать асинхронный запрос. В видео версии урока вы найдете подробное объяснение кода данного файла, здесь же я просто приведу этот код:

include 'functions.php';
$dir = 'img/1/small/';
$bdir = 'img/1/big/';
$images = get_images($dir);

require_once 'pagination.php';

// формирование + вывод
if($images): $i = $start_pos+1; $output = null;
 for($j = $start_pos; $j < $end_pos; $j++):
  $output .= '<div class="item">';
  $output .= '<div>';
  $output .= '<a data-lightbox="lightbox" href="' .$bdir . $images[$j]. '">';
  $output .= '<img class="front" src="' .$dir . $images[$j]. '" alt="">';
  $output .= '<span class="back">Фото ' .$i. '</span>';
  $output .= '</a>';
  $output .= '</div>';
  $output .= '</div>';
 $i++; endfor;
endif;

echo $output . '<div class="clear"></div><div class="pagination">' .$pagination. '</div>';

Вот, собственно, и все. Если вы нигде не ошиблись, то теперь пагинация галереи будет работать без перезагрузки страницы.

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

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

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

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

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

Метки:

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

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

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

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

Ваш 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