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

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

HIT

20.10.2015

8173

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

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

  • Похожие записи
  • Комментарии
  • Вложения
Одинаковая высота блоков

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

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

Галерея изображений в виде карусели

Галерея изображений в виде карусели

Нужно переделать стандартное представление галереи изображений в карточке товара. Сделаем данный функционал более похожим на привычный в виде карусели. Для этого подключаем функционал карусели slick, и создать скрипт инициализации Рекомендуемые Читать далее »

/
Верстка типовых блоков

Верстка типовых блоков

Находим оптимальные решения верстки типовых блоков, т.е. конструкций которыми на различных сайтах приходиться пользоваться часто. Изображение текст Очень часто используется связка «изображение + текст»: списки статей, перечисление преимуществ, опции, достопримечательности Читать далее »

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

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

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