Красивая загрузка изображений на jQuery

Порой на сайте хочется скачать изображения, нажав при этом правой кнопкой мыши на изображение, но не всегда скачанное изображение будет необходимого качества и размера. На многих сайтах содержится специальная страница с изображениями логотипа в высоком разрешении, но такие страницы бывает очень непросто найти. По этому предлагаем просмотреть урок, как создать красивый вариант загрузок изображений, средствами jQuery мы создадим модальное окно с предложениями загрузки разных вариантов изображений.

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

Все достаточно просто работает, нам просто необходимо перехватить нажатие правой кнопки мыши и вывести свое модальное окно, с необходимыми нам параметрами. Нам поможет jQuery и немного магии CSS3. Сначала посмотрим разметку HTML.

<!DOCTYPE HTML>

<head>

<title>Красивая загрузка изображений средствами jQuery</title>

</head>

<body>

<h1>Пример заголовка</h1>

</a>

<ul>

<li><a href="http://www.rudebox.org.ua/">Главная</a></li>

<li><a href="http://www.rudebox.org.ua/kontaktu/">Контакты</a></li>

</ul>

</nav>

</header>

<h1><font color=#c3e125>Нажмите правую кнопку на логотипе<br/>и следите за результатом.</h1>

</section>

</body>

</html>

После включения jQuery запускаем скрипт на выполнение. Когда DOM будет готова, привязываем событие нажатия правой кнопки мыши к логотипу.

$(document).ready(function() {

$('#logo').bind('contextmenu',function(e) {

// Проверяем нажатие правой кнопки мыши

if(e.button === 2) {

showPressModal();

e.preventDefault();

}

});

Рассмотрим модальное окно. Перед выводом модального окна нужно создать необходимые элементы и загрузить содержание. Для демонстрации содержание является статическим, но в реальных проектах лучше использовать AJAX.

// Модальное окно

var logos = '<h2>Хотите загрузить наш логотип?<span>X</span></h2>';

logos += '<img src="images/oxp-logo.png" alt="Logo Download" />';

logos += '<ul><li><a href="images/oxp-logo.png" rel="external">Высокое разрешение<span>300 Kb</span></a></li>';

logos += '<li><a href="images/oxp-logo.png" rel="external">Низкое разрешение<span>150 Kb</span></a></li></ul>';

function showPressModal() {

// Если не видно теней, значит не выведено модальное окно

if($('#shadow').length === 0) {

$('#banner').append('<div id="logo-modal"></div>');

$('body').prepend('<div id="shadow"></div>');

$('#logo-modal').hide();

$('#shadow').hide();

if(logos !== undefined) {

$('#logo-modal').append(logos);

$('#shadow').fadeIn();

$('#logo-modal').slideDown();

}

function hidePressModal() {

$('#shadow').fadeOut(400, function() {

$(this).remove();

});

$('#logo-modal').slideUp(400, function() {

$(this).remove();

});

}

Сначала добавляется тень к телу документа, а затем добавляется модальный контейнер с содержанием. Мы скрываем тень и контейнер и выводим их с использованием эффектов. Например, при нажатии кнопки мыши на тени или кнопке закрытия, все должно исчезать. Вставим следующий код в функцию $(document).ready():

// Когда кнопка мыши нажата на тени или на кнопке закрытия

$('#shadow, .close').live('click', function() {

hidePressModal();

});

// Открываем ссылки с атрибутом rel="external" в новом окне или закладке

$('a[rel="external"]').click( function() {

window.open( $(this).attr('href') );

return false;

});

Напоследок создаем стили CSS, чтобы придать красивый вид модальному окну:

body {

font-family: 'Helvetica Neue', Verdana, sans-serif;

margin: 0;

}

#shadow {

position: fixed;

top: 0;

left: 0;

right: 0;

bottom: 0;

background: rgba(0, 0, 0, 0.3);

z-index: 10;

}

#press-modal {

position: absolute;

background: #FFFFFF;

width: 320px;

padding: 20px;

top: 0;

z-index: 20;

-webkit-border-bottom-left-radius: 10px;

-webkit-border-bottom-right-radius: 10px;

-moz-border-radius-bottomleft: 10px;

-moz-border-radius-bottomright: 10px;

border-bottom-left-radius: 10px;

border-bottom-right-radius: 10px;

}

#press-modal h2 {

color: #666666;

line-height: 20px;

position: relative;

}

#press-modal h2 span {

position: absolute;

right: 0;

top: -2px;

display: block;

padding: 0px 5px;

background: #CC0000;

cursor: pointer;

color: #FFFFFF;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

}

#press-modal h2 span:hover {

background: #FF0000;

}

#press-modal img {

margin: 10px 0;

max-width: 100%;

}

#press-modal ul {

border-top: 1px solid #CCCCCC;

}

#press-modal ul li {

border-bottom: 1px solid #CCCCCC;

border-left: 1px solid #CCCCCC;

border-right: 1px solid #CCCCCC;

}

#press-modal ul li a {

text-decoration: none;

font-size: 14px;

color: #44c9aa;

display: block;

position: relative;

padding: 10px 20px;

}

#press-modal ul li a:hover {

background: #EFEFEF;

}

#press-modal ul li a span {

position: absolute;

right: 20px;

color: #999999;

font-size: 12px;

}

#banner {

width: 960px;

margin: 0 auto;

height: 150px;

position: relative;

}

Код не является совершенством и может быть улучшен. Но основной задачей урока является работающий пример того, как небольшие улучшения могут существенно повлиять на удобство использования ресурса. Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.