Автоматический монтаж изображений
Выравнивание изображений при создании дизайна может оказаться сложной задачей в условиях ограничений (размер окна, количество изображений для заполнения или размер самих картинок). С помощью описываемого скрипта можно автоматически создавать монтаж и для резинового шаблона и для фиксированного (включая окно на весь экран) с заполнением всех интервалов.
Наличие белого пространства в конце контейнера может быть устранено в зависимости от опции. Последнее изображение монтажа может заполнять оставшееся пространство.
Еще одной удобной опцией является возможность устанавливать высоту для всех изображений равной высоте самой маленькой картинки, избегая увеличения и пикселизации. (По умолчанию допускается увеличение маленьких изображений, если в наборе присутствует большое количество картинок с большими размерами.)
Структура HTML
Просто разместите изображения, которые вы планируете использовать в монтаже в контейнер со следующим классом ( ID используется для вызова плагина):
<div class="am-container" id="am-container"> <img src="/images/1.jpg" title="Image 1"></img> <img src="/images/2.jpg" title="Image 2"></img> <img src="/images/3.jpg" title="Image 3"></img> ... </div>
По умолчанию для контейнера и изображений используются следующие стили:
.am-wrapper{ float:left; position:relative; overflow:hidden; } .am-wrapper img{ position:absolute; outline:none; }
Так как мы не определяем ширину контейнера, выше приведенный пример выведет монтаж на весь экран.
Если вы планируете использовать контейнер с фиксированной шириной, то можно просто добавить ширину.
В случае, если вы планируете получит контейнер с фиксированной высотой и шириной с вертикальной полоской прокрутки, то нужно добавить другой контейнер снаружи:
<div style="width:800px;height:300px;overflow-y:scroll; margin:40px auto;"> <div class="am-container" id="am-container"> ... </div> </div>
Опции
У плагина имеется несколько опций:
// Если вы используете проценты (или не устанавливаете ширину совсем) // для ширину контейнера, то данную опцию надо установить в значение true. // Таким образом установится свойство overflow-y для body // в значение 'scroll' liquid : true, // Расстоянием между изображениями в px margin : 1, // Минимальная ширина изображения minw : 70, // Минимальная высота изображения minh : 20, // Максимальная высота изображения maxh : 250, // Изменение высоты каждой строки. // Данная опция имеет более высокий приоритет, чем fixedHeight alternateHeight : false, // Высота будет случайной величиной в диапазоне между 'min' и 'max': alternateHeightRange : { min : 100, max : 300 }, // Данная опция имеет приоритет над опцией minsize. // Все изображения имеют данную высоту: fixedHeight : null, // Использование данной опции делает недействительными значения опций minw и minh. // Выбор высоты осуществляется по самому маленькому изображению, // когда данная опция имеет значение true: minsize : false, // Если значение опции true, в конце контейнера не будет пробелов. // Последнее изображение будет заполнять все оставшееся пространство: fillLastRow : false
Смотрите примеры использования плагина.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/tN-X03HTEyA/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
- 2024-08-01 » WebSocket
- 2024-07-26 » Интеграция с Яндекс Еда
- 2024-07-26 » Интеграция с Эквайринг
- 2024-07-26 » Интеграция с СДЕК
- 2024-07-26 » Интеграция с Битрикс-24
- 2024-07-26 » Интеграция с Travelline
- 2024-07-26 » Интеграция с Iiko
- 2024-07-26 » Интеграция с Delivery Club
- 2024-07-26 » Интеграция с CRM
- 2024-07-26 » Интеграция с 1C-Бухгалтерия
- 2024-07-24 » Что такое сторителлинг: техники и примеры
- 2024-07-17 » Ошибка 404: что это такое и как ее использовать для бизнеса
- 2024-07-03 » Размещайте прайс-листы на FarPost.ru и продавайте товары быстро и выгодно
- 2024-07-01 » Профилирование кода в PHP
- 2024-06-28 » Изучаем ABC/XYZ-анализ: что это такое и какие решения с помощью него принимают
- 2024-06-17 » Зачем вам знать потребности клиента
- 2024-06-11 » Что нового в работе Яндекс Метрики: полный обзор обновления
- 2024-06-11 » Поведенческие факторы ранжирования в Яндексе
- 2024-06-11 » Скорость загрузки сайта: почему это важно и как влияет на ранжирование
- 2024-05-27 » Подборка сервисов для расшифровки аудио в текст
- 2024-05-27 » PostgreSQL 16. Изоляция транзакций. Часть 2
- 2024-05-06 » Как настраивать конверсионные стратегии: работа над ошибками
- 2024-04-22 » Комментирование кода и генерация документации в PHP
- 2024-04-22 » SEO в России и на Западе: в чем основные отличия
- 2024-04-22 » SEO для международного масштабирования
- 2024-04-22 » Как использовать XML-карты для продвижения сайта
Есть три способа отвечать на вопросы: сказать необходимое, отвечать с приветливостью и – наговорить лишнего Плутарх - (ок. 46 — ок.120) - древнегреческий писатель, историк |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.