Автор

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

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


vk.com/club.ssdru

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



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

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

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


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

Скругленный навигационный триггер, который растягивается при нажатии / нажатии, чтобы открыть навигационные элементы.


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

Сделаем CSS3 анимацию, которую можно будет использовать в качестве прелоадера, статуса загрузки чего-либо. Работает в Firefox, Chrome и Safari.


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

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


87 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close