Галерея из плиток заполняющая всю ширину

Галерея из плиток заполняющая всю ширину

Сделать галерею которая заполнит все пространство фотографиями разного размера можно с помощью jQuery плагина montage.js, также понадобится fancybox.

Подключение библиотек:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="/js/montage.js"></script>
<link rel="stylesheet" href="/js/fancybox/jquery.fancybox.min.css">
<script src="/js/fancybox/jquery.fancybox.min.js"></script>
HTML

Фото не нужно подгонять под один размер, для примера используется следующий набор изображений:

Для примера используется следующий набор изображений

HTML разметка:

<div class="am-container">
	<a data-fancybox="gallery" href="/img/space-1.jpg">
	   	<img src="/img/space-1.jpg" alt="">
	</a>
	<a data-fancybox="gallery" href="/img/space-2.jpg">
	   	<img src="/img/space-2.jpg" alt="">
	</a>
	<a data-fancybox="gallery" href="/img/space-3.jpg">
	   	<img src="/img/space-3.jpg" alt="">
	</a>
	...
</div>
HTML

Немного стилей:

.am-wrapper{
	float:left;
	position:relative;
	overflow:hidden;
}
.am-wrapper img{
	position:absolute;
	outline:none;
}
CSS

Запуск плагина:

$(function() {
	$('.am-container').montage({
		liquid: false, 
		fillLastRow: true,
		margin: 4,
		fixedHeight: 160
	});
});		
JS

Результат:

// Если true, то добавляется overflow-y к <body>.
liquid: false,

// Расстояние между изображениями.
margin: 1,

// Минимальная ширина изображения.
minw: 70,	

// Минимальная высота изображения.
minh: 20,	

// Максимальная высота изображения.
maxh: 250,	

// Чередование высот у строк.
alternateHeight: false,

// Случайная высота от min до max.
alternateHeightRange: {
	min: 100,
	max: 300
},

// Фиксированная высота для всех изображений.
fixedHeight: null,	

// Если true, то не учитываются minw, minh.
// Высота берется по самому маленькому изображению.
minsize: false,

// Если не будет хватать изображений для полного заполнения, 
// растянет последнее изображение на всю ширину.
fillLastRow: false
JS
04.04.2019, обновлено 09.10.2020
10287

Комментарии

, чтобы добавить комментарий.

Другие публикации

Наложение градиента на изображение
Еще один способ сделать эффект смешивания градиента и изображения, основан на свойстве background-blend-mode. Минус...
8434
-1
Адаптивное выравнивание изображений на всю ширину браузера
Простой пример как адаптивно выстроить несколько изображений на всю ширину окна браузера.
14656
-2
Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
43164
+34
Слайдеры изображений на плагине bxSlider
BxSlider отличный jquery плагин слайдеров и каруселей, адаптивный, легко настраивается, поддерживает любой тип...
19216
-1
Печать HTML страниц
Очень часто разработчики забывают про печатную версию сайта, поэтому можно встретить такой результат на бумаге...
60086
+7
Как изменить Favicon сайта из JavaScript
Для замены Favicon во вкладке браузера достаточно у элемента link rel="icon" в атрибуте href указать путь до нового...
12292
+2