Уроки Полноэкранное изображение на JQuery
24 августа 2015
1690
полноэкранное изображение, фоновое изображение, jquery

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

Сложность Рубрика JQuery Браузеры
Демонстрация » Скачать »

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

 

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

 

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

 

Первый шаг. Подключение библиотек и css стилей. HTML.

 

Не устаю повторять, все по стандарту) Подключаем файл стилей 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>	

 

 

Второй шаг. Стили CSS.

 

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

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

 

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

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

 

 

Третий шаг. JQuery. Файл image.js. 

 

Последнее, что нам осталось, так это как раз таки заняться скриптом, который будет контролировать растягивание самого изображения. За данное действие отвечает скрипт 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? Если да, то пишите в комментариях, буду очень рад, предоставить что то полезное и нужное! Еще раз, спасибо за внимание!)





Роман КраутерИсточник материала »