Порой на сайте хочется скачать изображения, нажав при этом правой кнопкой мыши на изображение, но не всегда скачанное изображение будет необходимого качества и размера. На многих сайтах содержится специальная страница с изображениями логотипа в высоком разрешении , но такие страницы бывает очень непросто найти. По этому предлагаем просмотреть урок, как создать красивый вариант загрузок изображений, средствами jQuery мы создадим модальное окно с предложениями загрузки разных вариантов изображений.
Все достаточно просто работает, нам просто необходимо перехватить нажатие правой кнопки мыши и вывести свое модальное окно, с необходимыми нам параметрами. Нам поможет jQuery и немного магии CSS3. Сначала посмотрим разметку HTML.
<!DOCTYPE HTML>
<html lang="ru-RU" class="no-js">
<head>
<meta charset="UTF-8">
<title>Красивая загрузка изображений средствами jQuery | Демонстрация с сайта s-sd.ru</title>
<link rel="stylesheet" type="text/css" media="all" href="styles/reset.css" />
<link rel="stylesheet" type="text/css" media="all" href="styles/style.css" />
<script src="scripts/modernizr.min.js"></script>
</head>
<body>
<header role="banner" id="banner">
<a href="#">
<img src="images/oxp-logo.png" alt="Logo" id="logo"/>
<h1>Пример заголовка</h1>
</a>
</header>
<br><br><br>
<section id="content" role="main">
<h1><font color=#b3b3b2>Нажмите правую кнопку мыши на логотипе<br/>и следите за результатом.</h1>
</section>
<script src="scripts/jquery.min.js"></script>
<script src="scripts/script.js"></script>
</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();
}
}
}
Сначала добавляется тень к телу документа, а затем добавляется модальный контейнер с содержанием. Мы скрываем тень и контейнер и выводим их с использованием эффектов. Например, при нажатии кнопки мыши на тени или кнопке закрытия, все должно исчезать. Вставим следующий код в функцию $(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;
}
Код не является совершенством и может быть улучшен. Но основной задачей урока является работающий пример того, как небольшие улучшения могут существенно повлиять на удобство использования ресурса. Материал взят из зарубежного источника - onextrapixel.com/2011/07/25/using-jquery-to-create-a-right-click-function-to-save-website-logo и представлен исключительно в ознакомительных целях.