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

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

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

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

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

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

Бесплатный курс по PHP программированию

Освойте курс и создайте динамичный сайт на PHP и MySQL с полного нуля, используя модель MVC

В курсе 39 уроков | 15 часов видео | исходники для каждого урока

Получить курс сейчас!

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

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

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

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

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

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

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

Бесплатный курс по PHP программированию

Освойте курс и создайте динамичный сайт на PHP и MySQL с полного нуля, используя модель MVC

В курсе 39 уроков | 15 часов видео | исходники для каждого урока

Получить курс сейчас!

Разработка веб-приложения на PHP

Создайте веб-приложение на PHP на примере приема платежей на сайте

Получить

Метки:

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

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree