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

11.12.2021

285

Від автора: отже, у минулому уроці ми автоматизували процес виведення зображень на сторінку галереї. Але може так статися, що в папці з картинками, крім самих картинок, можуть виявитися сторонні (не графічні файли або папки. В такому випадку ми побачимо на сторінці порожні місця під дані файли і функціонування галереї буде порушено. Давайте спробуємо виправити цей момент. Також додамо до галереї ефект повороту зображення при наведенні на неї.

Почнемо з першої проблеми. Вирішити її досить просто. Зараз функція scandir() отримуємо масив вмісту папки з картинками. Ми можемо пройтися в циклі з цього масиву і виключати з нього ті елементи, які нам не підходять. Зробити це можна використовуючи можливості регулярних виразів. Складемо нескладний шаблон регулярного виразу:

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

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

@$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 після картинки:

Фото

В даній галереї картинок немає

І далі я наведу підсумковий файл стилів (без стилів скидання). У відео версії уроку ви знайдете докладний пояснення кожного з доданих властивостей.

.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;
}