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

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

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

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

Начнем с первой задачи. Решить ее довольно просто. Сейчас функция scandir() получаем массив содержимого папки с картинками. Мы можем пройтись в цикле по этому массиву и исключать из него те элементы, которые нам не подходят. Сделать это можно используя возможности регулярных выражений. Составим несложный шаблон регулярного выражения:

#\.(jpe?g|png|gif)$#i

Этот шаблон пропустит только графические файлы с расширениями jpg, jpeg, png и gif. Флаг i делает наш шаблон регистронезависимым. Теперь используем составленный шаблон, и наша функция станет такой:

function get_images($dir){
	@$files = scandir($dir);
	$pattern = "#\.(jpe?g|png|gif)$#i";
	foreach($files as $key => $file){
		if(!preg_match($pattern, $file)){
			unset($files[$key]);
		}
	}
	return $files;
}

Вторая задача по трансформации картинок потребует некоторой правки разметки и добавления правил нескольких свойств CSS. В разметку добавим span после картинки:

<div class="gallery">

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

</div>

И далее я приведу итоговый файл стилей (без стилей сброса). В видео версии урока вы найдете подробное объяснение каждого из добавленных свойств.

.wrapper{
	width: 555px;
	margin: 20px auto;
	background: #f0f0f0;
	padding: 20px 10px 20px 20px;
	box-shadow: 0 0 5px rgba(0, 0, 0, .3);
	overflow: hidden;
}
.item{
	background: #fff;
	width: 170px;
	height: 150px;
	float: left;
	text-align: center;
	box-shadow: 0 0 5px rgba(0, 0, 0, .4);
	margin: 0 15px 15px 0;
}
.item > div{
	position: relative;
	top: 50%;
	-ms-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	cursor: pointer;
}
.front{
	transition: all .5s;
	position: absolute;
	/*-webkit-backface-visibility: hidden;
	backface-visibility: hidden;*/
}
.front:hover{
	box-shadow: 0 0 10px #000;
}

.back{
	width: 130px;
	height: 80px;
	display: inline-block;
	-webkit-transform: rotateX(180deg);
	transform: rotateX(180deg);
	/*-webkit-backface-visibility: hidden;
	backface-visibility: hidden;*/
	background: #ccc;
	color: #000;
	transition: all .5s;
	padding: 10px;
	text-align: left;
	opacity: 0;
}

.item > div:hover .front{
	-webkit-transform: rotateX(180deg);
	transform: rotateX(180deg);
}
.item > div:hover .back{
	-webkit-transform: rotateX(0deg);
	transform: rotateX(0deg);
	opacity: 1;
}

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

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

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

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

Метки:

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

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

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

  1. Юрий

    Здравствуйте, а под ie8 можно как-то адаптировать?
    Я добавил фильтр, картинка только переворачивается, не прячется

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

      Здравствуйте. На сайте http://caniuse.com/ можно проверить, поддерживается ли то или иное свойство CSS и даже по версиям браузеров.

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

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