Главная страница » jQuery » Красивая загрузка изображений на jQuery

Красивая загрузка изображений на 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;

}

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