407 Организация изображений, особенно на сайтах моды, всегда была сложной задачей, особенно, когда есть определенные ограничения — например, размеры окна в полноэкранном режиме, количество изображений, их размеры, требование заполнить все окно этими изображениями.
Скрипт на jQuery, о котором пойдет речь в этой статье, все это умеет делать! Из определенного набора изображений вы получите высоколассный автоматический монтаж изображений под любое окно (фиксированное или изменяемое по размерам).
Наличие пустого места в конце это стены фотографий можно избежать, если заполнить последней фотографией (растянув ее) пустое место. Все это настраиваемо.
Есть еще вариант построения стены фотографий. Скрипт может сделать все изображения одной высоты, взяв за основу высоту самой маленькой фотографии.
Фотографии, используемые в примере, были взяты у . Карточки находятся под лицензией .
Структура HTML
Просто положите изображения для монтажа в контейнер с классом am-container (ID используется для вызова плагина):
|
1 2 3 4 5 6 |
<div class="am-container" id="am-container"> <a href="#"><img src="images/1.jpg" title="Image 1"></img></a> <a href="#"><img src="images/2.jpg" title="Image 2"></img></a> <a href="#"><img src="images/3.jpg" title="Image 3"></img></a> ... </div> |
По умолчанию прописываются следующие стили для контейнера и изображений в нем:
|
1 2 3 4 5 6 7 8 9 |
.am-wrapper{ float:left; position:relative; overflow:hidden; } .am-wrapper img{ position:absolute; outline:none; } |
Так как мы не определяем ширину контейнера, стена будет строится на весь экран.
Если вам нужен контейнер фиксированной ширины, то просто укажите ее в классах, добавив атрибут width.
В случае, если вам нужен контейнер фиксированной ширины и высоты (с вертикальной полосой прокрутки), то вам необходимо добавить еще одну оболочку-элемент для контейнера:
|
1 2 3 4 5 |
<div style="width:800px;height:300px;overflow-y:scroll; margin:40px auto;"> <div class="am-container" id="am-container"> ... </div> </div> |
Настройка
Существуют несколько настраиваемых опций для этого плагина. Вот следующие из них:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
// Если вы используете проценты (или значения вообще нет) // для определения ширины контейнера, установите на true. // У атрибута overflow значение изменится на 'scroll' liquid : true, // Пространство между изображениями в пикселях margin : 1, // Минимальная ширина, которая должна быть у изображения minw : 70, // Минимальная высота minh : 20, // Максимальная высота maxh : 250, alternateHeight : false, // Случайная высота между 'min' и 'max': alternateHeightRange : { min : 100, max : 300 }, // Если установлено значение у этой переменной, // то у всех изображений будет фиксированная высота: fixedHeight : null, // Если устанавливаете height для самого маленького изображения, // тогда эту переменную нужно поставить на true: minsize : false, // Если true, не будет пустого пространства в конце контейнера. // Последнее изображение заполнит собой все пустое пространство: fillLastRow : false |
Далее вы можете посмотреть на примерах, как работают параметры этого скрипта:
- Полноэкранный пример с нефиксированными высотами изображений, последнее изображение заполняет пустое пространство. Обновите страницу несколько раз, чтобы увидеть различное построение изображений.
- Полноэкранный пример с нефиксированными высотами изображений и без margin, последнее изображение будет заполнять последнюю строку
- Полноэкранный пример с нефиксированными высотами изображений и с большим значением margin, последнее изображение будет заполнять последнюю строку
- Пример с контейнером фиксированной ширины с фиксированной высотой изображений. Кликните на “load more” (в конце страницы), чтобы увидеть, как будут добавляться остальные изображения
- Пример с контейнером фиксированной ширины и высоты с полосой прокрутки, последнее изображение будет заполнять последнюю строку
- Изображения с минимальной шириной с переменной высотой строк и большим значением margin, последнее изображение будет заполнять последнюю строку. Кликните на “load more” (в конце страницы), чтобы увидеть, как будут добавляться остальные изображения
- Контейнер с переменными размерами с изображениями фиксированной высоты. Поизменяйте размеры браузера, чтобы увидеть в действии изменения перестроения изображений
- В этом примере есть гарантия того, что не будет пиксельных изображений, благодаря опции выбора доступной минимальной высоты (последнее изображение не будет заполнять последнюю строку). Кликните на “load more” (в конце страницы), чтобы увидеть, как будут добавляться остальные изображения
Для каждого примера вы можете увидеть, какие опции были использованы при построении стены фотографий.
Надеемся, что статья была вам полезна, поэтому ждем от вас вопросы или комментарии.
Подскажите, а как к нему лайтбокс прикрутить? Когда картинку в ссылку оборачиваешь — скрипт перестаёт работать)
подскажите как решить проблему с ссылками в данном плагине?