Полноэкранное изображение на JQuery

Всех приветствую!) Давненько я не выпускал новых материалов, так как отдыхал, занимался своими делами по работе, и наконец-то освободилось немного времени, чтобы вложить в любимый проект) Для Вас сегодня я подготовил не очень сложный, но возможно полезный скрипт, который поможет Вам при просмотре полноэкранного изображения, выполненного на JQuery.

То есть, по сути, у нас есть фоновое изображение, которое постоянно растянуто на весь экран в зависимости от его положения. Если Вы подумали, что это адаптивность. Увы, - Вы ошибаетесь! Нет, - Это просто изображение, которое растянуто на весь экран монитора или мобильного устройства.

Для начала стоит перейти на сайт, указанный в источниках материала, где можно ознакомится с данным скриптом фонового изображения на JQuery. Сразу обращаю ваше внимание, что для примера я сделал абсолютно все также. Для чего? - Чтобы помочь Вам просто предоставить материал для ознакомления, тем более в русско-язычном контенте.

Не устаю повторять, все по стандарту) Подключаем файл стилей demo.css, библиотеку JQuery, и собственно наш скрипт image.js.

<link type="text/css" rel="stylesheet" href="css/demo.css">	
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
<script src="js/image.js"></script>

Теперь, можем перейти к HTML коду, в котором мы по стандарту подключаем div блок с идентификатором content, который будет иметь обязательные свойства CSS. Далее вставляем наше изображение, в моем случае это картинка image.jpg, которая лежит в папке img, задаем ширину и высоту, а также обязательно прописываем идентификатор image.

<div id="content">
    <img src="img/image.jpg" alt="RootHelp.ru" width="1312" height="820" id="image">
</div>	

Тут как бы все просто, есть определенные свойства стилей, которые будут правильно фиксировать фоновое изображение. Из обязательных свойств выделил бы position: fixed и overflow: hidden. 

Последнее свойство скрывает прокрутку у изображения.

body{
	margin:0px; 
	padding:0px; 
	background:#000;
}

#content{
	position:fixed; 
	z-index:1; 
	overflow:hidden;
}

Последнее, что нам осталось, так это как раз таки заняться скриптом, который будет контролировать растягивание самого изображения. За данное действие отвечает скрипт image.js. Создаем функцию FullScreenBackground и прописываем ей переменные по высоте и по ширине. После этого определяем CSS свойства и делим значения, получая определенные равные промежутки по диагонали, по высоте и по ширине.

function FullScreenBackground(theItem){
var winWidth=$(window).width();
var winHeight=$(window).height();
var imageWidth=$(theItem).width();
var imageHeight=$(theItem).height();
var picHeight = imageHeight / imageWidth;
var picWidth = imageWidth / imageHeight;
if ((winHeight / winWidth) < picHeight) {
$(theItem).css("width",winWidth);
$(theItem).css("height",picHeight*winWidth);
} else {
$(theItem).css("height",winHeight);
$(theItem).css("width",picWidth*winHeight);
};
$(theItem).css("margin-left",winWidth / 2 - $(theItem).width() / 2);
$(theItem).css("margin-top",winHeight / 2 - $(theItem).height() / 2);
}

Для определения функций скрипта, мы прописываем в файле index.php, или можно в принципе его тоже вынести в отдельный файл, событие загрузки страницы window.onload функции FullScreenBackground с идентификатором image, а также событие $(window).resize, которое изменяет размеры window и после вызываем функцию FullScreenBackground с идентификатором image. То есть простыми словами, мы вызываем наш скрипт image.js, оптимизируем его и подгоняем под размер окна браузера фоновое изображение.

<script type="text/javascript">
window.onload = function () {
   FullScreenBackground("#image");
}
$(window).resize(function() {
   FullScreenBackground("#image");
});
</script>

Спасибо всем большое за внимание, сегодня мы с Вами рассмотрели полноэкранное изображение на JQuery, возможно оно Вам пригодится для реализации в своих проектах. Хотелось бы у Вас спросить, интересует ли тематика, связанная не просто с самописными скриптами, а к примеру с плагинами на WordPress или какой-то еще другой CMS? Если да, то пишите в комментариях, буду очень рад, предоставить что то полезное и нужное! Еще раз, спасибо за внимание!)