Автоматический монтаж изображений на jQuery

Организация изображений, особенно на сайтах моды, всегда была сложной задачей, особенно, когда есть определенные ограничения — например, размеры окна в полноэкранном режиме, количество изображений, их размеры, требование заполнить все окно этими изображениями.

Скрипт на jQuery, о котором пойдет речь в этой статье, все это умеет делать! Из определенного набора изображений вы получите высоколассный автоматический монтаж изображений под любое окно (фиксированное или изменяемое по размерам).

Пример Скачать (.zip, 998 Кб)

Наличие пустого места в конце это стены фотографий можно избежать, если заполнить последней фотографией (растянув ее) пустое место. Все это настраиваемо.

Есть еще вариант построения стены фотографий. Скрипт может сделать все изображения одной высоты, взяв за основу высоту самой маленькой фотографии.

Фотографии, используемые в примере, были взяты у Андрея Яковлева и Лилии Алеевой. Карточки находятся под лицензией Attribution-NonCommercial 3.0 Unported License.

Структура HTML

Просто положите изображения для монтажа в контейнер с классом am-container (ID используется для вызова плагина):

По умолчанию прописываются следующие стили для контейнера и изображений в нем:

Так как мы не определяем ширину контейнера, стена будет строится на весь экран.

Если вам нужен контейнер фиксированной ширины, то просто укажите ее в классах, добавив атрибут width.

В случае, если вам нужен контейнер фиксированной ширины и высоты (с вертикальной полосой прокрутки), то вам необходимо добавить еще одну оболочку-элемент для контейнера:

Настройка

Существуют несколько настраиваемых опций для этого плагина. Вот следующие из них:

Далее вы можете посмотреть на примерах, как работают параметры этого скрипта:

  • Пример 1: Полноэкранный пример с нефиксированными высотами изображений, последнее изображение заполняет пустое пространство. Обновите страницу несколько раз, чтобы увидеть различное построение изображений.
  • Пример 2: Полноэкранный пример с нефиксированными высотами изображений и без margin, последнее изображение будет заполнять последнюю строку
  • Пример 3: Полноэкранный пример с нефиксированными высотами изображений и с большим значением margin, последнее изображение будет заполнять последнюю строку
  • Пример 4: Пример с контейнером фиксированной ширины с фиксированной высотой изображений. Кликните на “load more” (в конце страницы), чтобы увидеть, как будут добавляться остальные изображения
  • Пример 5: Пример с контейнером фиксированной ширины и высоты с полосой прокрутки, последнее изображение будет заполнять последнюю строку
  • Пример 6: Изображения с минимальной шириной с переменной высотой строк и большим значением margin, последнее изображение будет заполнять последнюю строку. Кликните на “load more” (в конце страницы), чтобы увидеть, как будут добавляться остальные изображения
  • Пример 7: Контейнер с переменными размерами с изображениями фиксированной высоты. Поизменяйте размеры браузера, чтобы увидеть в действии изменения перестроения изображений
  • Пример 8: В этом примере есть гарантия того, что не будет пиксельных изображений, благодаря опции выбора доступной минимальной высоты (последнее изображение не будет заполнять последнюю строку). Кликните на “load more” (в конце страницы), чтобы увидеть, как будут добавляться остальные изображения

Для каждого примера вы можете увидеть, какие опции были использованы при построении стены фотографий.

Надеемся, что статья была вам полезна, поэтому ждем от вас вопросы или комментарии.


2 комментарий на “Автоматический монтаж изображений на jQuery

  1. Подскажите, а как к нему лайтбокс прикрутить? Когда картинку в ссылку оборачиваешь — скрипт перестаёт работать)

    Thumb up 0 Thumb down 0

Оставить комментарий