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

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

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

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

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

Бесплатный курс по PHP программированию

Освойте курс и создайте динамичный сайт на PHP и MySQL с полного нуля, используя модель MVC

В курсе 39 уроков | 15 часов видео | исходники для каждого урока

Получить курс сейчас!

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

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

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

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

Бесплатный курс по PHP программированию

Освойте курс и создайте динамичный сайт на PHP и MySQL с полного нуля, используя модель MVC

В курсе 39 уроков | 15 часов видео | исходники для каждого урока

Получить курс сейчас!

Разработка веб-приложения на PHP

Создайте веб-приложение на PHP на примере приема платежей на сайте

Получить

Метки:

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

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

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

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

  1. Юрий

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

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

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree