Вы находитесь здесь:Плагины jQuery»liCover - jQuery Responsive Cover Image или адаптивные изображения на jQuery

liCover - jQuery Responsive Cover Image или адаптивные изображения на jQuery

Пятница, 28 Февраль 2014 00:00 Автор 

Плагин liCover подгоняет изображение под размеры родительского элемента, не искажая его пропорций. При этом изображение всегда будет занимать всю площадь родительского элемента.

liCover максимально упрощает выполнение таких задач как:
- фон на весь экран
- фотографии нестандартных пропорций

Очень прост в подключении и весит всего 2kb

Пример работы на JSFIDDLE

Подключаемые файлы

<link rel="stylesheet" href="#">
<script src="/px.png"></script>
<script src="/js/jquery.liCover.js"></script>

Структура HTML

Вставляем в HTML изображение и присваиваем ему произвольный класс

    <img class="cover" src="/pic/image.jpg">

Инициализация плагина

Остается только скормить плагину "liCover" нашу картинку. Так как работаем с изображением и обязаны дождаться его полной загрузки, то делаем это через событие "$(window).load()"

  $(window).load(function(){
    $('.cover').liCover({
      parent: $(window),
      position:'absolute',
      veticalAlign:'middle',
      align:'center'
    })
  })

Параметры

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

пример кода

  $(window).trigger('redraw')

  

Bug Fix

17.04.2014 - Добавлена возможность выравнивания изображения по вертикали и горизонтали параметрами "vericalAlign" и "align"
17.04.2014 - Коррекция размеров min и max
17.04.2014 - Исправлен баг с определением родительского блока
27.02.2014 - Добавлен параметр "position"
Прочитано 36782 раз Последнее изменение Четверг, 17 Апрель 2014 22:00
Оцените материал
(5 голосов)

Комментарии   

 
Olegs Davidovs
# Olegs Davidovs 01.08.2013 15:37
Спасибо большое за скрипт. Отлично работает.
Ответить | Ответить с цитатой | Цитировать
 
 
LiMasscode
# LiMasscode 02.08.2013 07:20
Цитирую Olegs Davidovs:
Спасибо большое за скрипт. Отлично работает.

Пользуйтесь на здоровье
Ответить | Ответить с цитатой | Цитировать
 
 
rayden
# rayden 09.10.2013 10:41
работает отлично и с z-index проблем нет в отличии от того же backstretch, однако не планируете добавить смену картинок по таймауту?
Ответить | Ответить с цитатой | Цитировать
 
 
Вадим
# Вадим 16.01.2014 18:58
Отличный плагин!
Однако вопрос - как использовать плагин если картинка уже внутри DIV с width=100% и height=100%?
Ответить | Ответить с цитатой | Цитировать
 
 
LiMasscode
# LiMasscode 18.01.2014 12:55
Цитирую Вадим:
Отличный плагин!
Однако вопрос - как использовать плагин если картинка уже внутри DIV с width=100% и height=100%?

Одно другому не мешает
Ответить | Ответить с цитатой | Цитировать
 
 
IgorA100
# IgorA100 17.04.2014 17:34
Цитирую LiMasscode:
Цитирую Вадим:
Отличный плагин!
Однако вопрос - как использовать плагин если картинка уже внутри DIV с width=100% и height=100%?

Одно другому не мешает

Не работает скрипт, если у парента height:100%
Ответить | Ответить с цитатой | Цитировать
 
 
IgorA100
# IgorA100 17.04.2014 17:41
Цитирую LiMasscode:
Цитирую Вадим:
Отличный плагин!
Однако вопрос - как использовать плагин если картинка уже внутри DIV с width=100% и height=100%?

Одно другому не мешает

Не работает скрипт, если для парента установлено: height:100%
Ответить | Ответить с цитатой | Цитировать
 
 
Zavrik
# Zavrik 28.01.2014 09:14
День добрый скрипт действительно классный подскажите как изменить прозрачность и возможно ли это. Спасибо.
Ответить | Ответить с цитатой | Цитировать
 
 
LiMasscode
# LiMasscode 28.01.2014 09:19
Цитирую Zavrik:
День добрый скрипт действительно классный подскажите как изменить прозрачность и возможно ли это. Спасибо.

Если я правильно понял, то так jsfiddle.net/yurik417/9vzQL/34/
Ответить | Ответить с цитатой | Цитировать
 
 
nikolay
# nikolay 29.01.2014 11:26
а чем собственно эта куча кода в js отличается от четырех строчек в css3?

background-image: url(img/bg.png);
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;

все тоже самое только в разы проще
Ответить | Ответить с цитатой | Цитировать
 
 
LiMasscode
# LiMasscode 29.01.2014 11:40
Цитирую nikolay:
а чем собственно эта куча кода в js отличается от четырех строчек в css3?

background-image: url(img/bg.png);
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;

все тоже самое только в разы проще

Полной кроссбраузернос тью
Ответить | Ответить с цитатой | Цитировать
 
 
Zavrik
# Zavrik 29.01.2014 13:01
За ответ спасибо, а насчет не прозрачности основного поля информационного - фото помешенное становится матовым и в нем просматривается текстура неподвижного фона.
Ответить | Ответить с цитатой | Цитировать
 
 
LiMasscode
# LiMasscode 29.01.2014 15:04
Не понимаю где вы добавляете прозрачность и в чем заключается проблема.
Киньте ссылку
Ответить | Ответить с цитатой | Цитировать
 
 
Artem Glebov
# Artem Glebov 27.02.2014 17:25
на Safari (Версия 7.0.1 (9537.73.11)) не работает?
Ответить | Ответить с цитатой | Цитировать
 
 
LiMasscode
# LiMasscode 28.02.2014 14:10
Цитирую Artem Glebov:
на Safari (Версия 7.0.1 (9537.73.11)) не работает?

Плагин работает везде.
Скорее всего вы заметили, что демо на JSFiddle плохо отображается. Это особенность самого JSFiddle
Ответить | Ответить с цитатой | Цитировать
 
 
Vaxid
# Vaxid 16.03.2014 15:24
ya sdelal kak napisano viwe .. no u menya fon poluchaetsa poverx vsex tablic i sloev v html .. ot cheqo eto mojet bit ?
Ответить | Ответить с цитатой | Цитировать
 
 
LiMasscode
# LiMasscode 16.03.2014 16:34
Цитирую Vaxid:
ya sdelal kak napisano viwe .. no u menya fon poluchaetsa poverx vsex tablic i sloev v html .. ot cheqo eto mojet bit ?

Вам нужно почитать про свойство "z-index":
Вам может помочь например:
.fullsizeWrap {z-index:-1}
Ответить | Ответить с цитатой | Цитировать
 
 
IgorA100
# IgorA100 16.04.2014 20:47
Спасибо за замечательный скрипт!
НО.... Если на странице имеется несколько разных размеров блоков в которых должны масштабироватьс я картинки, то получается фигня, т.к. все рассчитывается исходя из размеров первого блока. Можно это как-то исправить?
Т.е. к примеру я инициализирую скрипт:
$(function(){
$(window).load( function(){
jQuery('#tips-o f-the-day-1 figure img').liCover({
parent: $('figure'),
position:'absol ute'
})
})
})
И он должен взять не первый parent, а именно от того элемента, который анализируется ?
Ответить | Ответить с цитатой | Цитировать
 
 
LiMasscode
# LiMasscode 17.04.2014 11:52
Цитирую IgorA100:
Спасибо за замечательный скрипт!
НО.... Если на странице имеется несколько разных размеров блоков в которых должны масштабироваться картинки, то получается фигня, т.к. все рассчитывается исходя из размеров первого блока. Можно это как-то исправить?
Т.е. к примеру я инициализирую скрипт:
$(function(){
$(window).load(function(){
jQuery('#tips-of-the-day-1 figure img').liCover({
parent: $('figure'),
position:'absolute'
})
})
})
И он должен взять не первый parent, а именно от того элемента, который анализируется ?

Баг исправлен, скачайте заново архив
Ответить | Ответить с цитатой | Цитировать
 
 
IgorA100
# IgorA100 17.04.2014 12:32
Далее, развивая тему:
- Организовать передачу параметра выравнивания top (auto - как сейчас, top - выравнивание по верхнему краю, bottom - по нижнему). Аналогично и лефт, райт сделать.
К примеру у меня галерея сертификатов и мне по вертикали по центру выравнивать не красиво, выравниваю по верхнему краю. Получилось так: http://www.kentavr.com.ru/news/sertif
Ответить | Ответить с цитатой | Цитировать
 
 
IgorA100
# IgorA100 17.04.2014 13:49
Еще момент:
для img добавить:
max-height: inherit;
min-height: inherit;
max-width: inherit;
min-width: inherit;
Это необходимо для случаев, когда для img уже заданы макс и мин размеры при верстке на случай отключенного JS и(или) первоначальной загрузке картинок, когда JS еще не выполнился.
Ответить | Ответить с цитатой | Цитировать
 
 
IgorA100
# IgorA100 17.04.2014 15:31
Точнее, не inherit нужно добавлять, т.к. ведь у родителя тоже может быть фиксация размеров, а указывать 0 и например 10000px с использованием !important. Можно конечно в своем css все это прописать, но если это добавить в скрипт ИМХО будет универсальней.
Ответить | Ответить с цитатой | Цитировать
 
 
LiMasscode
# LiMasscode 17.04.2014 21:47
Цитирую IgorA100:
Точнее, не inherit нужно добавлять, т.к. ведь у родителя тоже может быть фиксация размеров, а указывать 0 и например 10000px с использованием !important. Можно конечно в своем css все это прописать, но если это добавить в скрипт ИМХО будет универсальней.

Реализовал некоторые пожелания, читайте BugFix
Ответить | Ответить с цитатой | Цитировать
 
 
IgorA100
# IgorA100 18.04.2014 11:31
Теперь плагин стал реально ЛУЧШИМ из всех аналогичных!
Ответить | Ответить с цитатой | Цитировать
 
 
Александр
# Александр 06.05.2014 00:03
Здравствуйте!
На сайте использую jQuery supersized. Плагин достаточно увесистый, так как предусматривает множество наворотов: смену слайдов, навигационные панели и т. д. У каждой страницы свое фоновое изображение, может проще использовать Ваш плагин?! Он кроссбраузерный ?! Расчет новых параметров родительского блока происходит мгновенно, без задержек? Почему спрашиваю - сайт адаптивный: при переходе из портретного режима в ландшафтный на том же iPad, например, ранее используемый мною Backstratch подтупливал.
Ответить | Ответить с цитатой | Цитировать
 
 
LiMasscode
# LiMasscode 08.05.2014 08:59
Цитирую Александр:
Здравствуйте!
На сайте использую jQuery supersized. Плагин достаточно увесистый, так как предусматривает множество наворотов: смену слайдов, навигационные панели и т. д. У каждой страницы свое фоновое изображение, может проще использовать Ваш плагин?! Он кроссбраузерный?! Расчет новых параметров родительского блока происходит мгновенно, без задержек? Почему спрашиваю - сайт адаптивный: при переходе из портретного режима в ландшафтный на том же iPad, например, ранее используемый мною Backstratch подтупливал.

Здравствуйте!
- плагин кроссбраузерный
- расчет новых параметров происходит автоматически при изменении размера окна плюс перерисовку можно вызывать с помощью события "redraw"
$(window).trigger('redraw')
- в адаптивных сайтах можете использовать спокойно
Ответить | Ответить с цитатой | Цитировать
 
 
Александр
# Александр 05.06.2014 23:20
Если скрипт инициации располагается перед закрывающим , то, по сути загрузку изображения уже ждать не нужно - оно загружено, следовательно, событие "$(window).load ()" неактуально? Или я неправильно рассуждаю?
Спасибо!
Ответить | Ответить с цитатой | Цитировать
 
 
LiMasscode
# LiMasscode 16.06.2014 09:48
Цитирую Александр:
Если скрипт инициации располагается перед закрывающим , то, по сути загрузку изображения уже ждать не нужно - оно загружено, следовательно, событие "$(window).load()" неактуально? Или я неправильно рассуждаю?
Спасибо!

Неправильно.
Если скрипт расположить перед закрывающим тегом, он запустится после загрузки всего кода страницы, только кода, а не загрузки изображений.
Ответить | Ответить с цитатой | Цитировать
 
 
Александр
# Александр 17.06.2014 23:13
Ок! Понял.
А вот как быть с переинициализацией?
Подгружаю страницы ajax'ом - плагин не видит обновленный объект в DOM, чтобы его подхватить.
Такая запись $('.cover').liC over(); не идет...
Ответить | Ответить с цитатой | Цитировать
 
 
LiMasscode
# LiMasscode 18.06.2014 08:26
Цитирую Александр:
Ок! Понял.
А вот как быть с переинициализацией?
Подгружаю страницы ajax'ом - плагин не видит обновленный объект в DOM, чтобы его подхватить.
Такая запись $('.cover').liCover(); не идет...

Цитирую Александр:
Ок! Понял.
А вот как быть с переинициализацией?
Подгружаю страницы ajax'ом - плагин не видит обновленный объект в DOM, чтобы его подхватить.
Такая запись $('.cover').liCover(); не идет...

Должно работать, вот пример:
http://jsfiddle.net/9vzQL/51/
Ответить | Ответить с цитатой | Цитировать
 
 
IgorA100
# IgorA100 15.06.2014 19:51
Если у парента не задана ширина и высота, то изображение пропадает. На вопрос "а зачем к таким объектам применять скрипт ?" поясню, что например при использовании бутстрапа или аналогичного на маленьких экранах картинка идет "в полный рост" без ограничения по ширине и высоте, а при более высоких разрешениях я располагаю картинки в несколько столбцов и тут нужно выравнивание. Классы картинок в зависимости от разрешения не меняются, значит не получится селективно применить скрипт.
Ответить | Ответить с цитатой | Цитировать
 
 
LiMasscode
# LiMasscode 16.06.2014 09:53
Цитирую IgorA100:
Если у парента не задана ширина и высота, то изображение пропадает. На вопрос "а зачем к таким объектам применять скрипт ?" поясню, что например при использовании бутстрапа или аналогичного на маленьких экранах картинка идет "в полный рост" без ограничения по ширине и высоте, а при более высоких разрешениях я располагаю картинки в несколько столбцов и тут нужно выравнивание. Классы картинок в зависимости от разрешения не меняются, значит не получится селективно применить скрипт.

Вы можете задать размеры родителям в зависимости от разрешения с помощью медиа-запросов, например:
@media only screen and (min-width: 980px) {
Здесь стили более разумных, но все еще мобильных устройств. Android, iPhone и так далее.
}
Ответить | Ответить с цитатой | Цитировать
 
 
IgorA100
# IgorA100 17.06.2014 21:52
Цитирую LiMasscode:
[задать размеры родителям в зависимости от разрешения с помощью медиа-запросов

Это я знаю. Проблема ведь совсем в другом... Коряво что ли написал? :)
При одном разрешении фиксируется высота в "рх" при помощи @media, при другом разрешении и высота и ширина при помощи @media заданы в auto и 100% соответственно, и вот при таких параметрах картинка пропадает. И не получится при одном разрешении применять скрипт, а при другом разрешении не применять.
Ответить | Ответить с цитатой | Цитировать
 
 
LiMasscode
# LiMasscode 18.06.2014 08:13
Цитирую IgorA100:
Цитирую LiMasscode:
[задать размеры родителям в зависимости от разрешения с помощью медиа-запросов

Это я знаю. Проблема ведь совсем в другом... Коряво что ли написал? :)
При одном разрешении фиксируется высота в "рх" при помощи @media, при другом разрешении и высота и ширина при помощи @media заданы в auto и 100% соответственно, и вот при таких параметрах картинка пропадает. И не получится при одном разрешении применять скрипт, а при другом разрешении не применять.

Нужно просто менять стили еще и на самом изображении вот так:
jsfiddle.net/9vzQL/50/
Ответить | Ответить с цитатой | Цитировать
 
 
IgorA100
# IgorA100 21.06.2014 21:08
Блин, я лошара....
У меня в media для одной из галерей не был прописан класс fullsizeWrap, а без него изображение пропадает. Сорри за беспокойство. Вы ОЧЕНЬ хороший человек!!!
Ответить | Ответить с цитатой | Цитировать
 
 
Sv9t
# Sv9t 18.09.2014 23:12
Минус в том что некоторые браузеры в планшетах не понимают z-index, в итоге на них видна только картинка. Что можно сделать, чтобы не использовать z-index? т.к. без него контент поверх не видно.
Ответить | Ответить с цитатой | Цитировать
 
 
LiMasscode
# LiMasscode 20.09.2014 12:33
Цитирую Sv9t:
Минус в том что некоторые браузеры в планшетах не понимают z-index, в итоге на них видна только картинка. Что можно сделать, чтобы не использовать z-index? т.к. без него контент поверх не видно.

В таком случае нужно чтобы контент имел "position:relat ive" и в коде документа находился ниже блока с картинкой
Ответить | Ответить с цитатой | Цитировать
 
 
Sv9t
# Sv9t 21.09.2014 18:12
Цитирую LiMasscode:
В таком случае нужно чтобы контент имел "position:relative" и в коде документа находился ниже блока с картинкой

Сделал, все так же, не поменялось. Пальцем проматываешь вниз страницу - тянется картинка и открывает контент. Кеш чистил.
Ответить | Ответить с цитатой | Цитировать
 
 
LiMasscode
# LiMasscode 22.09.2014 14:12
Цитирую Sv9t:
Цитирую LiMasscode:
В таком случае нужно чтобы контент имел "position:relative" и в коде документа находился ниже блока с картинкой

Сделал, все так же, не поменялось. Пальцем проматываешь вниз страницу - тянется картинка и открывает контент. Кеш чистил.

Что-то вы делаете не так. Киньте ссылку.
Ответить | Ответить с цитатой | Цитировать
 
 
Sv9t
# Sv9t 25.09.2014 08:00
lp.sv9t.ru вот здесь можно посмотреть.
Ответить | Ответить с цитатой | Цитировать
 
 
LiMasscode
# LiMasscode 25.09.2014 09:02
Цитирую Sv9t:
lp.sv9t.ru вот здесь можно посмотреть.

Всегда обращайте внимание на версию jQuery.
У вас сейчас стоит 1.6.4, а плагин написан под новые версии. Возьмите скрипт плагина для 1.6.4 отсюда: http://jsfiddle.net/yurik417/9vzQL/60/
Когда исправите отпишитесь, будем смотреть что там с мобильными устройствами
Ответить | Ответить с цитатой | Цитировать
 
 
Sv9t
# Sv9t 25.09.2014 10:18
Хорошо, спасибо! пока в командировке, буду дома 13 октября, проверю.
Ответить | Ответить с цитатой | Цитировать
 
 
Sv9t
# Sv9t 17.10.2014 12:39
В общем пробовал и так и так с jquery бесполезно, видимо такой стандартный браузер планшета. В опере все отлично с разными версиями jquery. Так что можно не париться), все равно все пользуются Оперой что в смартфонах, что в планшетах.
Ответить | Ответить с цитатой | Цитировать
 
 
Александр
# Александр 16.11.2014 21:50
Доброго времени суток!
Пользуюсь плагином достаточно давно - очень нравится!
На другом сайте решил реализовать следующую задачу - сделал полноэкранную галерею при помощи плагина Owl Carousel (http://owlgraphic.com/owlcarousel/).
Хотелось бы плагином "растягивать" на весь слайд изображения.
В качестве родительского указывал в коде инициализации liCover тот, в котором находится img - ничего не работает.
Делал инициализация карусели, а потом liCover - все так же.
Подскажите, пожалуйста, как быть?
Ответить | Ответить с цитатой | Цитировать
 
 
LiMasscode
# LiMasscode 17.11.2014 17:29
Цитирую Александр:
Доброго времени суток!
Пользуюсь плагином достаточно давно - очень нравится!
На другом сайте решил реализовать следующую задачу - сделал полноэкранную галерею при помощи плагина Owl Carousel (http://owlgraphic.com/owlcarousel/).
Хотелось бы плагином "растягивать" на весь слайд изображения.
В качестве родительского указывал в коде инициализации liCover тот, в котором находится img - ничего не работает.
Делал инициализация карусели, а потом liCover - все так же.
Подскажите, пожалуйста, как быть?

Если указывать элемент в котором находится img, то img будет подстраиваться под размеры этого элемента, значит у этого элемента должны быть заданы размеры. Т.к. у вас галерея полно-экранная, то наверно нужно задавать высоту и ширину экрана.
Ответить | Ответить с цитатой | Цитировать
 
 
Александр
# Александр 17.11.2014 21:44
Разобрался. Теперь другая проблема: первоначально плагин не пропорционально подгоняет изображение под родительский блок, после первого ресайза - все ок. При многократном изменении окна, изображение оборачивается fullsizeWrap столько же раз, сколько менял размер вьюпорта. Так должно быть?
Ответить | Ответить с цитатой | Цитировать
 
 
LiMasscode
# LiMasscode 18.11.2014 14:40
Цитирую Александр:
Разобрался. Теперь другая проблема: первоначально плагин не пропорционально подгоняет изображение под родительский блок, после первого ресайза - все ок. При многократном изменении окна, изображение оборачивается fullsizeWrap столько же раз, сколько менял размер вьюпорта. Так должно быть?

нет
Ответить | Ответить с цитатой | Цитировать
 
 
Александр
# Александр 23.11.2014 23:16
Указал родителю высоту и ширину 100%. Плагин работает, но первоначального присвоения ему класса coverParent нет. Из-за этого корявое расположение картинки, потом меняешь размер окна - добавляется класс, изображение оборачивается div.fullsizeWra p. Сколько раз меняешь размер окна, столько раз происходит оборачивание.
Здесь же не нужно использовать событие "$(window).load ()"? Посмотрел Ваш пример, что выше на jsfiddle.net, при ajax подгрузке этого события по логике вещей нет. Пробовал делать "ленивую" загрузку изображений - такая же песня. Как считаете, что не так?
Ответить | Ответить с цитатой | Цитировать
 
 
Александр
# Александр 23.11.2014 23:20
Сделал скрины:
1. http://yadi.sk/i/inhSgN2RctUdS
2. http://yadi.sk/i/_4lNun4ictUew

Надеюсь на Вашу помощь. Спасибо.
Ответить | Ответить с цитатой | Цитировать
 
 
LiMasscode
# LiMasscode 24.11.2014 15:28
Цитирую Александр:
Сделал скрины:
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');
})
})
Ответить | Ответить с цитатой | Цитировать
 
 
Александр
# Александр 24.01.2015 22:28
Здравствуйте!
Использую подгрузку контента без обновления страницы. Соответственно меняю фоновое изображение. Я вам писал как-то касаемо ajax, мол как быть с переинициализац ией. Вы мне посоветовали вариант, но я немного поступил по-другому. Все работает, НО плагин при первой подгрузке изображения некорректно подгоняет его к ширине и высоте родительского блока. После того, как эта картинка закэшируется - все становится на свои места (повторное посещение страницы).
Взгляните, пожалуйста. Выгрузил каркас на хостинг: http://f-k-testing.orgfree.com/index.html Пощелкайте по ссылкам в меню и увидите о чем я пишу.
Буду Вам очень признателен. А так плагин сказка!
Ответить | Ответить с цитатой | Цитировать
 
 
LiMasscode
# LiMasscode 28.01.2015 14:55
Цитирую Александр:
Здравствуйте!
Использую подгрузку контента без обновления страницы. Соответственно меняю фоновое изображение. Я вам писал как-то касаемо ajax, мол как быть с переинициализацией. Вы мне посоветовали вариант, но я немного поступил по-другому. Все работает, НО плагин при первой подгрузке изображения некорректно подгоняет его к ширине и высоте родительского блока. После того, как эта картинка закэшируется - все становится на свои места (повторное посещение страницы).
Взгляните, пожалуйста. Выгрузил каркас на хостинг: http://f-k-testing.orgfree.com/index.html Пощелкайте по ссылкам в меню и увидите о чем я пишу.
Буду Вам очень признателен. А так плагин сказка!

Если изображение подгружается ajax-ом вместе с остальным кодом, то вешайте инициализацию изображения на колбэк загрузки
http://jsfiddle.net/9vzQL/80/
Ответить | Ответить с цитатой | Цитировать
 
 
Александр
# Александр 30.01.2015 05:36
Спасибо!
Ответить | Ответить с цитатой | Цитировать
 
 
Андрей MalTF0
# Андрей MalTF0 16.02.2015 12:35
Добрый день!

Очень понравился ваш скрипт, но я его использую не по назначению:) Есть блоки - превьюшки, в которые грузится картинка для новости.
Т.к. страница не адаптивна, скрипт используется только для подгонки загруженных контент-менедже ром изображений под размер блока.

Я хочу перенести работу скрипта на PHP, но не совсем понимаю алгоритм работы LiCover. Пожалуйста, можете-ли расписать, что пошагово делает плагин.
Ответить | Ответить с цитатой | Цитировать
 
 
LiMasscode
# LiMasscode 01.03.2015 20:27
Цитирую Андрей MalTF0:
Добрый день!

Очень понравился ваш скрипт, но я его использую не по назначению:) Есть блоки - превьюшки, в которые грузится картинка для новости.
Т.к. страница не адаптивна, скрипт используется только для подгонки загруженных контент-менеджером изображений под размер блока.

Я хочу перенести работу скрипта на PHP, но не совсем понимаю алгоритм работы LiCover. Пожалуйста, можете-ли расписать, что пошагово делает плагин.

Определяет коэффициент отношения ширины к высоте изображения и при изменении размера окна браузера переписывает размер изображения и его позицию. Есть два условия:
1. ширина картинки = ширине окна, а высота картинки больше высоты окна. В этом случае - обрезаем вер и низ картинки (позиционированием)
2. высота картинки = высоте окна, а ширина картинки больше ширины окна. В этом случае - обрезаем левый и правый край картинки (позиционированием).
Это все ;)
Ответить | Ответить с цитатой | Цитировать
 
 
Андрей MalTF0
# Андрей MalTF0 05.03.2015 14:17
Выложу то, что у меня получилось, может кому пригодится.
Данный срипт предназначен для тех ситуаций, когда надо подогнать картинку под заданный размер блока. Единственный нюанс - необходимо в PHP знать размеры картинки.
Применим на новостных сайтах с рукожопыми контент-менедже рами, которые не в состоянии красиво обрезать исходную картинку до заданного размера.


Скрипт генерации кода для обрезки картинки:


Применение:
Ответить | Ответить с цитатой | Цитировать
 
 
Андрей MalTF0
# Андрей MalTF0 05.03.2015 14:18
А, понятно, запрещена вставка PHP;(
Ответить | Ответить с цитатой | Цитировать
 
 
Александр
# Александр 12.05.2015 13:03
Доброго времени суток! Вот сколько я не спрашивал, все равно не пойму почему плагин "капризничает" при работе с ajax.
В начале кода использую стандартную инициализацию типа $(window).load( function{...}); , затем, после ajax-загрузки ($(#bloc).load( ... , function (){вот тут переинициализир ую плагин}. Сразу оговорюсь изображение с классом "cover" уже есть в подгружаемом контенте. С таким кодом плагин работает, но иногда дает осечки, не центруя картинку так, как надо. Так же пробовал использовать плагин imagesloaded, чтобы плагин срабатывал после полной загрузки изображения, но там появились проблемы.
Вот рабочий пример, моей реализации: http://www.festivali-konkursi.ru/golden-voice.html. Что я делаю не так? Спасибо!
Ответить | Ответить с цитатой | Цитировать
 
 
LiMasscode
# LiMasscode 14.05.2015 16:42
1. колбэк в событии load вызывается не после загрузки изображений, а после загрузки DOM
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
}
Ответить | Ответить с цитатой | Цитировать
 
 
enhor
# enhor 26.12.2016 15:25
Такой вопрос: а разве для "img" можно задавать клас????
Ответить | Ответить с цитатой | Цитировать
 
 
enhor
# enhor 26.12.2016 15:26
Такой вопрос: а разве для "img" можно задавать клас???? Или есть какаято хитрось о которой я незнаю?????
Ответить | Ответить с цитатой | Цитировать
 
 
LiMasscode
# LiMasscode 26.12.2016 18:23
Цитирую enhor:
Такой вопрос: а разве для "img" можно задавать клас???? Или есть какаято хитрось о которой я незнаю?????

Да, для "img" можно задавать клас.
http://htmlbook.ru/html/attr/class
Ответить | Ответить с цитатой | Цитировать
 
Онлайн-конструктор українського орнаменту

Чем вы можете помочь?

1. Разместить ссылку на своем сайте
Если вы ведете блог или у вас есть сайт - поставьте ссылку на www.masscode.ru. Скопируйте этот код:

<a href="/" title="Плагины, сниппеты и пользовательские скрипты на jquery" target="_blank">Плагины, сниппеты и пользовательские скрипты на jquery</a>

2. Поддержать проект финансово
Вы можете сделать добровольное пожертвование

AUH: U878157792792
USD: Z821422743261
RUB: R360648948582
EUR: E298388086680

Свежие материалы

Последние коментарии

Вы находитесь здесь:   ГлавнаяjQueryliCover - jQuery Responsive Cover Image или адаптивные изображения на jQuery