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

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

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

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

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

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

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);
?>

Здесь мы подключили файл функций. Далее определяем 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; ?>

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

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

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

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

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

Метки:

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

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

Комментарии (8)

  1. Sam

    А где видео?

  2. Игорь

    А как реализовать такой скрипт, что бы картинки из папки, к примеру, gallery_pics_fullsize, сами обрезались в превью и складывались в gallery_pics_thumbs? Это было бы очень удобно же, не пришлось бы в ручную обрезать картинки, когда их за три сотни в галерее. Спасибо.

    • Андрей Кудлай

      Это делается на этапе загрузки картинок, каждая загруженная картинка обрезается скриптом до заданных размеров. Уроки по созданию такого скрипта есть у нас на сайте.

  3. Виктор

    Андрей Кудлай
    можете дать ссылку на этот урок по созданию скрипта,не могу что-то найти…

    • Андрей Кудлай

      Какую ссылку и какого скрипта? Урок записывался более года назад, поэтому я не помню, о каком скрипте мог говорить в нем, напомните.

      • Виктор

        «Это делается на этапе загрузки картинок, каждая загруженная картинка обрезается скриптом до заданных размеров. Уроки по созданию такого скрипта есть у нас на сайте.»

        Вот про этот.

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

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