Вы находитесь здесь:jQuery»Плагины jQuery

Плагин 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"
Онлайн-конструктор українського орнаменту

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

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

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

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

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

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

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

Вы находитесь здесь:   ГлавнаяjQueryПоказать содержимое по тегу: fullscreen bg