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

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

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

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

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

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

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

Фреймворк YII2. Быстрая разработка с современным PHP фреймворком

Узнай тонкости современной веб-разработки с помощью фреймворка YII2

Узнать подробнее
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;
}

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

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

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

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

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

Метки:

Похожие статьи:

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

Комментарии 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