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

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

HIT

20.10.2015

8127

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

Поделиться в соц. сетях:

  • Похожие записи
  • Комментарии
  • Вложения
Галерея изображений товара в категории

Галерея изображений товара в категории

Создадим переключающиеся изображения товара при наведении мыши, либо галерею изображений товара в шаблоне категории. Под галереей изображений (Featured Images) понимаются дополнительные изображения помимо основного изображения. Выводим дополнительные изображения function woocommerce_feature_gallery() Читать далее »

/
Блочная верстка сайта

Блочная верстка сайта

Сайт должен верстаться по сетке блоками. При использовании сетки разметка сайта выглядит гармонично. Предлагаю свой простой вариант верстки блоков. Для добавления блоков, используйте тэги <div class="box"> <div class="block-1">Содержимое</div> — ширина Читать далее »

FlexBlock. Современная верстка

FlexBlock. Современная верстка

Верстка сайтов постоянно эволюционирует: от табличной верстки к верстке div с float (frame), далее промежуточный этап верстка diplay:inline-block. Так или иначе суть верстки — модульная сетка. Современный CSS дает нам Читать далее »

/

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

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

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