Автор

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

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

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


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

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


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

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


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close