Плагин liCover подгоняет изображение под размеры родительского элемента, не искажая его пропорций. При этом изображение всегда будет занимать всю площадь родительского элемента.
liCover максимально упрощает выполнение таких задач как:
- фон на весь экран
- фотографии нестандартных пропорций
Очень прост в подключении и весит всего 2kb
Пример работы на JSFIDDLE
Подключаемые файлы
Структура HTML
Вставляем в HTML изображение и присваиваем ему произвольный класс
Инициализация плагина
Остается только скормить плагину "liCover" нашу картинку. Так как работаем с изображением и обязаны дождаться его полной загрузки, то делаем это через событие "$(window).load()"
Параметры
| Option | Default value | Datatype | Description |
|---|---|---|---|
| parent | $(window) | object jquery | Определяет родительский элемент, под размеры которого нужно подстраиваться. |
| position | 'absolute' | string | Задает позиционирование изображения. Может принимать значения: 'absolute', 'fixed' |
| veticalAlign | 'middle' | string | Задает выравнивание изображения по вертикали. Может принимать значения: 'top', 'bottom' или 'middle' |
| align | 'center' | string | Задает выравнивание изображения по горизонтали. Может принимать значения: 'left', 'right' или 'center' |
События
Перерисовка изображения висит на стандартном событии объекта $(window) "resize", также можно использовать пользовательское событие "redraw"
redrawпример кода
Bug Fix
17.04.2014 - Добавлена возможность выравнивания изображения по вертикали и горизонтали параметрами "vericalAlign" и "align"17.04.2014 - Коррекция размеров min и max
17.04.2014 - Исправлен баг с определением родительского блока
27.02.2014 - Добавлен параметр "position"
Комментарии
Пользуйтесь на здоровье
Однако вопрос - как использовать плагин если картинка уже внутри DIV с width=100% и height=100%?
Одно другому не мешает
Не работает скрипт, если у парента height:100%
Не работает скрипт, если для парента установлено: height:100%
Если я правильно понял, то так jsfiddle.net/yurik417/9vzQL/34/
background-image: url(img/bg.png);
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
все тоже самое только в разы проще
Полной кроссбраузернос тью
Киньте ссылку
Плагин работает везде.
Скорее всего вы заметили, что демо на JSFiddle плохо отображается. Это особенность самого JSFiddle
Вам нужно почитать про свойство "z-index":
Вам может помочь например:
.fullsizeWrap {z-index:-1}
НО.... Если на странице имеется несколько разных размеров блоков в которых должны масштабироватьс я картинки, то получается фигня, т.к. все рассчитывается исходя из размеров первого блока. Можно это как-то исправить?
Т.е. к примеру я инициализирую скрипт:
$(function(){
$(window).load( function(){
jQuery('#tips-o f-the-day-1 figure img').liCover({
parent: $('figure'),
position:'absol ute'
})
})
})
И он должен взять не первый parent, а именно от того элемента, который анализируется ?
Баг исправлен, скачайте заново архив
- Организовать передачу параметра выравнивания top (auto - как сейчас, top - выравнивание по верхнему краю, bottom - по нижнему). Аналогично и лефт, райт сделать.
К примеру у меня галерея сертификатов и мне по вертикали по центру выравнивать не красиво, выравниваю по верхнему краю. Получилось так: http://www.kentavr.com.ru/news/sertif
для img добавить:
max-height: inherit;
min-height: inherit;
max-width: inherit;
min-width: inherit;
Это необходимо для случаев, когда для img уже заданы макс и мин размеры при верстке на случай отключенного JS и(или) первоначальной загрузке картинок, когда JS еще не выполнился.
Реализовал некоторые пожелания, читайте BugFix
На сайте использую jQuery supersized. Плагин достаточно увесистый, так как предусматривает множество наворотов: смену слайдов, навигационные панели и т. д. У каждой страницы свое фоновое изображение, может проще использовать Ваш плагин?! Он кроссбраузерный ?! Расчет новых параметров родительского блока происходит мгновенно, без задержек? Почему спрашиваю - сайт адаптивный: при переходе из портретного режима в ландшафтный на том же iPad, например, ранее используемый мною Backstratch подтупливал.
Здравствуйте!
- плагин кроссбраузерный
- расчет новых параметров происходит автоматически при изменении размера окна плюс перерисовку можно вызывать с помощью события "redraw"
$(window).trigger('redraw')
- в адаптивных сайтах можете использовать спокойно
Спасибо!
Неправильно.
Если скрипт расположить перед закрывающим тегом, он запустится после загрузки всего кода страницы, только кода, а не загрузки изображений.
А вот как быть с переинициализацией?
Подгружаю страницы ajax'ом - плагин не видит обновленный объект в DOM, чтобы его подхватить.
Такая запись $('.cover').liC over(); не идет...
Цитирую Александр:
Должно работать, вот пример:
http://jsfiddle.net/9vzQL/51/
Вы можете задать размеры родителям в зависимости от разрешения с помощью медиа-запросов, например:
@media only screen and (min-width: 980px) {
Здесь стили более разумных, но все еще мобильных устройств. Android, iPhone и так далее.
}
Это я знаю. Проблема ведь совсем в другом... Коряво что ли написал? :)
При одном разрешении фиксируется высота в "рх" при помощи @media, при другом разрешении и высота и ширина при помощи @media заданы в auto и 100% соответственно, и вот при таких параметрах картинка пропадает. И не получится при одном разрешении применять скрипт, а при другом разрешении не применять.
Нужно просто менять стили еще и на самом изображении вот так:
jsfiddle.net/9vzQL/50/
У меня в media для одной из галерей не был прописан класс fullsizeWrap, а без него изображение пропадает. Сорри за беспокойство. Вы ОЧЕНЬ хороший человек!!!
В таком случае нужно чтобы контент имел "position:relat ive" и в коде документа находился ниже блока с картинкой
Сделал, все так же, не поменялось. Пальцем проматываешь вниз страницу - тянется картинка и открывает контент. Кеш чистил.
Что-то вы делаете не так. Киньте ссылку.
Всегда обращайте внимание на версию jQuery.
У вас сейчас стоит 1.6.4, а плагин написан под новые версии. Возьмите скрипт плагина для 1.6.4 отсюда: http://jsfiddle.net/yurik417/9vzQL/60/
Когда исправите отпишитесь, будем смотреть что там с мобильными устройствами
Пользуюсь плагином достаточно давно - очень нравится!
На другом сайте решил реализовать следующую задачу - сделал полноэкранную галерею при помощи плагина Owl Carousel (http://owlgraphic.com/owlcarousel/).
Хотелось бы плагином "растягивать" на весь слайд изображения.
В качестве родительского указывал в коде инициализации liCover тот, в котором находится img - ничего не работает.
Делал инициализация карусели, а потом liCover - все так же.
Подскажите, пожалуйста, как быть?
Если указывать элемент в котором находится img, то img будет подстраиваться под размеры этого элемента, значит у этого элемента должны быть заданы размеры. Т.к. у вас галерея полно-экранная, то наверно нужно задавать высоту и ширину экрана.
нет
Здесь же не нужно использовать событие "$(window).load ()"? Посмотрел Ваш пример, что выше на jsfiddle.net, при ajax подгрузке этого события по логике вещей нет. Пробовал делать "ленивую" загрузку изображений - такая же песня. Как считаете, что не так?
1. http://yadi.sk/i/inhSgN2RctUdS
2. http://yadi.sk/i/_4lNun4ictUew
Надеюсь на Вашу помощь. Спасибо.
Скорее всего функция карусели "afterUpdate" выполняется каждый раз при ресайзе экрана, поэтому у вас и происходит новая инициализация и как следствие новое оборачивание.
Сделайте так:
$('.slide').liCover({
parent:$('.item '),
position:'absol ute',
verticalAlign:' middle',
align:'center'
})
$('#owl').owlCarousel({
afterUpdate:fun ction(){
$(window).trigg er('redraw');
})
})
Использую подгрузку контента без обновления страницы. Соответственно меняю фоновое изображение. Я вам писал как-то касаемо ajax, мол как быть с переинициализац ией. Вы мне посоветовали вариант, но я немного поступил по-другому. Все работает, НО плагин при первой подгрузке изображения некорректно подгоняет его к ширине и высоте родительского блока. После того, как эта картинка закэшируется - все становится на свои места (повторное посещение страницы).
Взгляните, пожалуйста. Выгрузил каркас на хостинг: http://f-k-testing.orgfree.com/index.html Пощелкайте по ссылкам в меню и увидите о чем я пишу.
Буду Вам очень признателен. А так плагин сказка!
Если изображение подгружается ajax-ом вместе с остальным кодом, то вешайте инициализацию изображения на колбэк загрузки
http://jsfiddle.net/9vzQL/80/
Очень понравился ваш скрипт, но я его использую не по назначению:) Есть блоки - превьюшки, в которые грузится картинка для новости.
Т.к. страница не адаптивна, скрипт используется только для подгонки загруженных контент-менедже ром изображений под размер блока.
Я хочу перенести работу скрипта на PHP, но не совсем понимаю алгоритм работы LiCover. Пожалуйста, можете-ли расписать, что пошагово делает плагин.
Определяет коэффициент отношения ширины к высоте изображения и при изменении размера окна браузера переписывает размер изображения и его позицию. Есть два условия:
1. ширина картинки = ширине окна, а высота картинки больше высоты окна. В этом случае - обрезаем вер и низ картинки (позиционированием)
2. высота картинки = высоте окна, а ширина картинки больше ширины окна. В этом случае - обрезаем левый и правый край картинки (позиционированием).
Это все ;)
Данный срипт предназначен для тех ситуаций, когда надо подогнать картинку под заданный размер блока. Единственный нюанс - необходимо в PHP знать размеры картинки.
Применим на новостных сайтах с рукожопыми контент-менедже рами, которые не в состоянии красиво обрезать исходную картинку до заданного размера.
Скрипт генерации кода для обрезки картинки:
Применение:
В начале кода использую стандартную инициализацию типа $(window).load( function{...}); , затем, после ajax-загрузки ($(#bloc).load( ... , function (){вот тут переинициализир ую плагин}. Сразу оговорюсь изображение с классом "cover" уже есть в подгружаемом контенте. С таким кодом плагин работает, но иногда дает осечки, не центруя картинку так, как надо. Так же пробовал использовать плагин imagesloaded, чтобы плагин срабатывал после полной загрузки изображения, но там появились проблемы.
Вот рабочий пример, моей реализации: http://www.festivali-konkursi.ru/golden-voice.html. Что я делаю не так? Спасибо!
2. Не нужно делать переинициализац ию всех изображений. Вы можете например после загрузки новых изображений дописать им класс "notCover" и инициализироват ь только картинки с этим классом
3. Как бы я сам не любил этот плагин, реализация уже не актуальна. Рекомендую использовать CSS:
.class {
min-width:100%;
min-height:100%;
position:absolute;
top:50%;
left:50%;
transform:translate(-50% -50%);
}
или если в фоне, то:
.class {
background-size:cover
}
Да, для "img" можно задавать клас.
http://htmlbook.ru/html/attr/class
RSS лента комментариев этой записи