/ Дизайн / Галерея изображений Masonry

Галерея изображений Masonry

HIT

20.10.2015

8659

Masonry — это принцип построения изображений (блоков) занимая все пространство, по аналогии со строительной кладкой.

Галерея изображений Masonry jquery

Вставляем изображения в общий div с классом grid, каждое изображение в div с классом grid-item, либо grid-item grid-item—width2 для бОльшего размера

<div class="grid">

<div class="grid-item"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item grid-item--height2"></div>

</div>

CSS

/* Галерея Masonry */
.grid-item {width: 200px; height: 200px; overflow: hidden;}
	
.grid-item--width2 { width: 400px; height: 200px;}
.grid-item--height2 { height: 400px; width: 200px;}

.grid-item img {
    height: 100% !important;
    width: auto !important;
    max-width: none !important;
    transition: transform 3s;
    -webkit-transition: transform 2.0s ease 0s;
}

.grid-item--width2 img {height: auto !important; width: 100% !important;}
.grid-item--height2 img {height: 100% !important; width: auto !important;}

.grid-item img:hover {transform: translateX(-100px);}

.grid-item--width2 img:hover {transform: scale(1.4);}
.grid-item--height2 img:hover {transform: scale(1.2) rotate(5deg);}

Подключаем основной скрипт

<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js"></script> - удаленно <script type="text/javascript" src="/wp-content/themes/tester/js/masonry.pkgd.min.js"></script> - на своём сервере

Подключаем дополнительный (настраиваемый) скрипт

Единственный недостаток такой галереи — некорректно растягивается в %

Как сделать растягивание плитки в процентном соотношении — описано в статье Галерея Masonry в процентах.

Пример работы скрипта:

nastol.com.ua-105348
luxfon.com-20974
celeber.ru
look.com.ua-74716
5b2dfda3ee1c-
1324449056-215406-000067_www.nevseoboi.com.ua
rachel_mcadams
h60P9tuFg9gA_1988463_XL
reWalls.com-66550
VJnzvftXp2U
134438
126027
1347122610-398112-0178740_www.nevseoboi.com.ua
big_ba9b43a36a8af53a46a0d44068250d0c82490c4c2
1281550251_1
134485
Devushka750
1414461247145
reWalls.com-13271
1160
692269789
artleo.com-101353
описание слайда №1
Carla-and-Melissa-Howe-3
kareglazaya-dekolte-solnechnyy
1920x1200_nezhnaya-krasotka-v-chulkah
[site-socialshare]
  • Похожие записи
  • Комментарии
  • Вложения
Фоновые линии

Фоновые линии

Добавим линии в верстку сайта. Это разбавит однородный фон, а также придаст стройности разным блокам контента. 6 секторов Разделение фона линиями на 6 секторов. 12 секторов Тот же самый принцип, Читать далее »

/
Легкая верстка блоков

Легкая верстка блоков

Представим, что нам нужно упорядочить записи плиткой, т.е. слева направо сверху вниз. При этом, чтобы записи в каждом ряду были выровнены по левому и правому краям. Сделаем максимально простым способом. Читать далее »

Первая последняя записи в ряду

Первая последняя записи в ряду

Добавляем классы для первых и последних записей в ряду. Вариант 1: Глобально, в файле функций Вставляем в файл functions.php. В данном примере разделение по 4 записи в ряду. add_filter('post_class', 'dobavit_pervii_klass'); Читать далее »

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

Пока нет комментариев. Будь первым!

Галерея изображений Masonry Галерея изображений Masonry Галерея изображений Masonry Галерея изображений Masonry Галерея изображений Masonry Галерея изображений Masonry Галерея изображений Masonry Галерея изображений Masonry Галерея изображений Masonry Галерея изображений Masonry Галерея изображений Masonry Галерея изображений Masonry Галерея изображений Masonry Галерея изображений Masonry Галерея изображений Masonry Галерея изображений Masonry Галерея изображений Masonry Галерея изображений Masonry Галерея изображений Masonry Галерея изображений Masonry Галерея изображений Masonry Галерея изображений Masonry Галерея изображений Masonry Галерея изображений Masonry
Owl Carousel
Рекомендации для васOwl CarouselOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.