Автор

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

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


 

Порой на сайте хочется скачать изображения, нажав при этом правой кнопкой мыши на изображение, но не всегда скачанное изображение будет необходимого качества и размера. На многих сайтах содержится специальная страница с изображениями логотипа в высоком разрешении , но такие страницы бывает очень непросто найти. По этому предлагаем просмотреть урок, как создать красивый вариант загрузок изображений, средствами 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;
}

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

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеjQuery

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

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


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

Эффект прозрачности - это тема данной статьи. Если вам интересно узнать, как сделать элементы html-страницы прозрачными, используя CSS или Javascript, и как добиться кросс-браузерности (одинаковой работы в разных браузерах) с учетом браузеров Firefox, Internet Explorer, Opera, Safari, Konqueror, тогда милости просим.


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

Крупные заголовки сайта стали весьма популярны, эта тенденция развивается достаточно быстро на рынке веб-дизайна, сегодня мы бы хотели предоставить коллекцию анимированных фоновых заголовков для вашего вдохновения. Мы будем использовать Canvas и Javascript, чтобы создать анимированный фон для крупных заголовков.


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

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


Раскрутка в соцсетях

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


Перейти в Блог

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close