Галерея для сайта. Урок 8. БД

Дата публикации: 2014-06-13

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

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

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

Далее нам нужно в файле pagination_ajax.php вместо прежнего получения картинок функцией get_images(), использовать новую функцию — get_images_db(). Также нам потребуется подключение к БД. Для этого просто скопируем шапку индексного файла и заменим ею весь код файла pagination_ajax.php до формирования вывода:

require_once 'config.php'; 
include 'functions.php';

$gallery = isset($_GET['gallery']) ? (int)$_GET['gallery'] : 1;
if($gallery < 1) $gallery = 1;

require_once 'pagination.php';

$dir = 'img/1/small/';
$bdir = 'img/1/big/';

$images = get_images_db($gallery, $start_pos, $perpage);

require_once 'config.php';

include 'functions.php';

$gallery = isset($_GET['gallery']) ? (int)$_GET['gallery'] : 1;

if($gallery < 1) $gallery = 1;

require_once 'pagination.php';

$dir = 'img/1/small/';

$bdir = 'img/1/big/';

$images = get_images_db($gallery, $start_pos, $perpage);

Следующим шагом нам нужно передавать номер галереи асинхронно, точно так же, как и номер страницы. Для этого определим перед подключением скрипта переменную gallery, которую и будем использовать в самом скрипте. Добавим переменную перед подключением файла script.js:

<script>var gallery = <?=$gallery?>;</script>

1	<script>var gallery = <?=$gallery?>;</script>

И передадим переменную в запросе, добавив ее к переменной page:

data: {page: page, gallery: gallery},

1	data: {page: page, gallery: gallery},

Осталось изменить формирование вывода в файле pagination_ajax.php. Заменим его на следующий:

// формирование + вывод
if($images): $output = null;
	foreach($images as $image):
		$output .= '<div class="item">';
		$output .= '<div>';
		$output .= '<a data-lightbox="lightbox" href="' .$bdir . $image['img']. '">';
		$output .= '<img class="front" src="' .$dir . $image['img']. '" alt="">';
		$output .= '<span class="back">' .$image['description']. '</span>';
		$output .= '</a>';
		$output .= '</div>';
		$output .= '</div>';
	endforeach;
endif;