От автора: одним из неотъемлемых элементов практически любого сайта, наверное, является галерея. Ее обязательно можно видеть на сайте-портфолио и даже во множестве экземпляров. Она часто необходима для блога, интернет-магазина, корпоративного сайта и т.д.
В цикле из нескольких уроков мы с вами будем создавать несложную, но вместе с тем привлекательную галерею.
Итак, давайте начнем с разметки. У нас будет обертка (wrapper), в которой может быть как галерея, так и другой контент. Сама галерея будет находиться в блоке с классом gallery. Разметка каждой картинки галереи будет следующей:
1 2 3 4 5 6 7 |
<div class="item"> <div> <a href="img/big/01.jpg"> <img class="front" src="img/small/01.jpg" alt=""> </a> </div> </div> |
Дополнительный div я ввел для более простого возможного расширения функционала галереи. Однако, по большому счету, можно обойтись и без него.
Для оставшихся картинок необходимо добавить точно такую разметку, изменяя лишь названия картинок. Пока это рутинный процесс и все картинки мы вынуждены добавлять вручную. Но в последующем мы напишем для галереи функционал на PHP, который сделает добавление картинок простой процедурой.
Теперь добавим стилей нашей галерее:
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 |
.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%); } .front{ transition: all .5s; } .front:hover{ box-shadow: 0 0 10px #000; } |
На что здесь можно обратить внимание? Интересен вариант центрирования картинок по вертикали. Способ, который мы использовали (для .item > div) не требует от нас знания высоты элемента для его центрирования по вертикали, т.е. фактически мы можем использовать для галереи картинки различных размеров и все будет смотреться ровно и аккуратно.
Разметка и оформление галереи, в общем, готовы. Осталось добавить функционал а-ля lightbox для красивого показа большой картинки при клике по ее маленькой копии. Я для этой цели выберу Lightbox 2. Корректно подключим его стили и сам плагин и добавим для ссылок галереи необходимый атрибут:
1 2 3 4 5 6 7 |
<div class="item"> <div> <a data-lightbox="lightbox" href="img/big/02.jpg"> <img class="front" src="img/small/02.jpg" alt=""> </a> </div> </div> |
На этом мы завершим текущий урок. Удачи и до новых встреч!
Комментарии (2)