Красивая загрузка изображений на jQuery
Порой на сайте хочется скачать изображения, нажав при этом правой кнопкой мыши на изображение, но не всегда скачанное изображение будет необходимого качества и размера. На многих сайтах содержится специальная страница с изображениями логотипа в высоком разрешении, но такие страницы бывает очень непросто найти. По этому предлагаем просмотреть урок, как создать красивый вариант загрузок изображений, средствами jQuery мы создадим модальное окно с предложениями загрузки разных вариантов изображений.
Все достаточно просто работает, нам просто необходимо перехватить нажатие правой кнопки мыши и вывести свое модальное окно, с необходимыми нам параметрами. Нам поможет jQuery и немного магии CSS3. Сначала посмотрим разметку HTML.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!DOCTYPE HTML> <html lang="ru-RU" class="no-js"> <head> <meta charset="UTF-8"> <title>Красивая загрузка изображений средствами jQuery</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> <nav role="nav"> <ul> <li><a href="http://www.rudebox.org.ua/">Главная</a></li> <li><a href="http://www.rudebox.org.ua/home/">О нас</a></li> <li><a href="http://www.rudebox.org.ua/kontaktu/">Контакты</a></li> </ul> </nav> </header> <br><br><br> <section id="content" role="main"> <h1><font color=#c3e125>Нажмите правую кнопку на логотипе<br/>и следите за результатом.</h1> </section> <script src="scripts/jquery.min.js"></script> <script src="scripts/script.js"></script> </body> </html> |
После включения jQuery запускаем скрипт на выполнение. Когда DOM будет готова, привязываем событие нажатия правой кнопки мыши к логотипу.
1 2 3 4 5 6 7 8 9 |
$(document).ready(function() { $('#logo').bind('contextmenu',function(e) { // Проверяем нажатие правой кнопки мыши if(e.button === 2) { showPressModal(); e.preventDefault(); } }); }); |
Рассмотрим модальное окно. Перед выводом модального окна нужно создать необходимые элементы и загрузить содержание. Для демонстрации содержание является статическим, но в реальных проектах лучше использовать AJAX.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
// Модальное окно 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()
:
1 2 3 4 5 6 7 8 9 10 |
// Когда кнопка мыши нажата на тени или на кнопке закрытия $('#shadow, .close').live('click', function() { hidePressModal(); }); // Открываем ссылки с атрибутом rel="external" в новом окне или закладке $('a[rel="external"]').click( function() { window.open( $(this).attr('href') ); return false; }); |
Напоследок создаем стили CSS, чтобы придать красивый вид модальному окну:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 |
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; } |
Код не является совершенством и может быть улучшен. Но основной задачей урока является работающий пример того, как небольшие улучшения могут существенно повлиять на удобство использования ресурса. Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
Читайте также:
Опубликовал Cooper 29.10.2011 в 08:05, в категории jQuery. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |