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

Дата публикации: 2014-03-31

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

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

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

Итак, создадим файл функций – functions.php – и напишем в нем несложную функцию:

function get_images($dir){
	@$files = scandir($dir);
	unset($files[0], $files[1]);
	return $files;
}

function get_images($dir){

@$files = scandir($dir);

unset($files[0], $files[1]);

return $files;

}

Всего тремя строками кода мы получим все картинки нужной папки в массив. Функция scandir() получает содержимое каталога в массив. Знак собаки мы поставили для того, чтобы не сыпать ошибками, если произойдет обращение к несуществующему каталогу.

Функция unset() во второй строке удалит из массива два первых элемента, которые будут представлять собой указатели на текущий и родительский каталоги. Ну и последней строкой мы вернем полученный массив.

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

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

<?php

include 'functions.php';

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

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

$images = get_images($dir);

Здесь мы подключили файл функций. Далее определяем 2 переменных, в которых указали путь к папке с большими и маленькими картинками. Папки big и small при этом я перенес в папку с номером 1. Это будет первая галерея сайта. В дальнейшем достаточно в папке img создавать дополнительные папки для новых галерей. Ну и наконец вызываем функцию get_images(), которая вернет массив картинок в переменную $images.

Удаляем старый вывод картинок и вместо него пропишем цикл:

<?php if($images): ?>
<?php foreach($images as $image): ?>
	<div class="item">
		<div>
			<a data-lightbox="lightbox" href="<?=$bdir . $image?>">
				<img class="front" src="<?=$dir . $image?>" alt="">
			</a>
		</div>
	</div>
<?php endforeach; ?>
<?php else: ?>
	<p>В данной галерее нет картинок</p>
<?php endif; ?>

<?php if($images): ?>

<?php foreach($images as $image): ?>

<div>

</a>

</div>

<?php endforeach; ?>

<?php else: ?>

<p>В данной галерее нет картинок</p>

<?php endif; ?>

Если все сделано верно, то мы должны увидеть на странице все картинки галереи. Теперь достаточно просто закинуть новые картинки в соответствующие папки, и они сразу же появятся на странице галереи.

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

Метки: галерея