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

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

HIT

20.10.2015

2825

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="https://opttour.ru/wp-content/themes/tester/js/masonry.pkgd.min.js"></script> - на своём сервере

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

<script type="text/javascript">
$(document).ready(function() {

if($("div").is(".grid")) {
  
//Галерея masonry
$('.grid').masonry({
	  //options
    itemSelector: '.grid-item',
    columnWidth: 200
});  

} 

});
</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

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
  • Похожие записи
  • Комментарии
  • Вложения
FlexBlock. Современная верстка

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

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

/
Одинаковая высота блоков

Одинаковая высота блоков

Одинаковая высота блоков является насущной проблемой при разработке дизайна сайта, средствами css это делать не удобно, т.к. требует специальной верстки. Отлично с данной задачей справляется jQuery. Скрипт EqualHeight Скрипт для Читать далее »

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

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

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

/

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

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

Галерея изображений 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 минут.