От автора: итак, в прошлом уроке мы автоматизировали процесс вывода картинок на страницу галереи. Но может так статься, что в папке с картинками, кроме самих картинок, могут оказаться посторонние (не графические) файлы или какие-либо папки. В таком случае мы увидим на странице пустые места под данные файлы и функционирование галереи будет нарушено. Давайте попробуем исправить этот момент. Также добавим к галерее эффект поворота картинки при наведении на нее.
Начнем с первой задачи. Решить ее довольно просто. Сейчас функция scandir() получаем массив содержимого папки с картинками. Мы можем пройтись в цикле по этому массиву и исключать из него те элементы, которые нам не подходят. Сделать это можно используя возможности регулярных выражений. Составим несложный шаблон регулярного выражения:
|
1 |
#\.(jpe?g|png|gif)$#i |
Этот шаблон пропустит только графические файлы с расширениями jpg, jpeg, png и gif. Флаг i делает наш шаблон регистронезависимым. Теперь используем составленный шаблон, и наша функция станет такой:
|
1 2 3 4 5 6 7 8 9 10 |
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 после картинки:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<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> |
И далее я приведу итоговый файл стилей (без стилей сброса). В видео версии урока вы найдете подробное объяснение каждого из добавленных свойств.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
.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; } |
На этом мы завершим текущий урок. Удачи и до новых встреч!
Комментарии (2)