Сегодня мы рассмотрим небольшой пример оформления скроллбара для браузеров на движке WebKit (Chrome, Safari).

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

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

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

Теперь рассмотрим, каким образом можно изменить внешний вид скролла

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

Как видите, все псевдоклассы имеют префикс -webkit-.
Кроме перечисленных на картинке, есть ещё два псевдокласса:
::-webkit-scrollbar-corner – отвечает за оформление квадрата в месте соприкосновения вертикального и горизонтального скролла;
::-webkit-resizer – используется для скроллбаров текстовой области, размеры которой можно изменять.

Также, вместе с этими классами можно использовать различные псевдоэлементы.

Обычные :enabled, :disabled, :hover и :active и специальные:

:horizontal – применяется для частей скроллбара, которые расположены горизонтально;

:vertical – применяется для частей скроллбара, которые расположены вертикально;

:decrement – применяется к участкам полосы прокрутки и кнопкам при перемещении окна просмотра вверх или влево;

:increment – применяется к участкам полосы прокрутки и кнопкам при перемещении окна просмотра вниз или вправо;

:start – применяется к кнопкам и участкам полосы прокрутки. Показывает находится ли объект выше (левее) ползунка;

:end – применяется к кнопкам и участкам полосы прокрутки. Показывает находится ли объект ниже (правее) ползунка;

:double-button – применяется к кнопкам и участкам полосы прокрутки. Используется для того, чтобы определить, является ли кнопка частью двойной кнопки, расположенной на одном из концов полосы прокрутки. Для полосы прокрутки этот псевдокласс показывает граничит ли она с двойной кнопкой;

:single-button – применяется к кнопкам и участкам полосы прокрутки. Используется для того, чтобы определить, является ли кнопка одинарной. Для полосы прокрутки этот псевдокласс показывает граничит ли она с одинарной кнопкой;

:no-button – применяется к участкам полосы прокрутки и показывает, касается ли она края скроллбара (например, если нет кнопок на краях скроллбара);

:corner-present – применяется к участкам полосы прокрутки и показывает, присутствует ли угловая область скроллбара (квадрат на стыке горизонтального и вертикального скроллбаров);

:window-inactive – применяется ко всем элементам скроллбара и показывает является ли окно к которому относится данный скроллбар активным.

Переходим к нашему примеру

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

Займёмся оформлением.

Для начала, зададим общую ширину скроллбара:

::-webkit-scrollbar{
    width:12px;
}

Теперь займёмся оформлением полосы прокрутки (светлосерый фон, серая граница, делаем границу чуть толще с левой стороны):

::-webkit-scrollbar-thumb{
    border-width:1px 1px 1px 2px;
    border-color: #777;
    background-color: #aaa;
}

При наведении курсора (:hover) на полосу прокрутки делаем её более тёмной:

::-webkit-scrollbar-thumb:hover{
    border-width: 1px 1px 1px 2px;
    border-color: #555;
    background-color: #777;
}

Ползунок в неактивном состоянии будет выглядеть как сплошной прямоугольник серого цвета (без границы)

::-webkit-scrollbar-track{
    border-width:0;
}

При наведении курсора на ползунок, делаем его темнее и добавляем границу.

::-webkit-scrollbar-track:hover{
    border-left: solid 1px #aaa;
    background-color: #eee;
}

Как видите, используя обычные CSS правила можно изменить скроллбар до неузнаваемости

Успехов!

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

Рассмотрим небольшой практический пример.

Допустим, мы хотим показать в сайдбаре виджет с твитами из какой-нибудь ленты (естественно, существует множество готовых решений, но сейчас не о них речь, кроме того, данное решение можно использовать для загрузки любого контента).

На первый взгляд всё предельно просто, twitter предоставляет API, с помощью которого можно получить твиты любого пользователя (если они открыты). Вставить их сайдбар тоже не проблема.

Но на практике возникает несколько интересных моментов.

1) Информация от twitter не является основным контентом сайта и не должна влиять на скорость загрузки страницы. Кроме того, доступность сервиса также не должна влиять на работу сайта.

2) Твиты могут появляться довольно быстро, поэтому чтобы информация в виджете была всегда актуальной от кеширования придётся отказаться.

3) Т.к. твиты не являются основным содержимым страницы, то посетитель скорее всего не заметит если они появятся через некоторое время после загрузки основной части страницы.

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

5) Количество места, выделенного под виджет, обычно ограничено. И необходимо чтобы загрузка новых твитов не «ломала» дизайн.

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

Теперь рассмотрим сам виджет.

Начнём с алгоритма.

1) Создаём на странице область с фиксированной высотой и вертикальным полосой прокрутки.

2) После загрузки страницы подгружаем в эту область твиты с помощью JavaScript.

3) Если пользователь переместит ползунок скролла в крайнее нижнее положение – загружаем следующую «порцию» твитов.

Посмотреть как работает такой виджет можно на демонстрационной страничке. И сразу же даю ссылку на архив с этим примером.

Разметка виджета с твитами может выглядеть следующим образом.

<div id="tweets">
    <div class="loader hidden"></div>
</div>

Как видите, после первоначальной загрузки внутри виджета будет находится только один элемент – картинка с изображением загрузчика. Стили для неё мы установим таким образом, чтобы она всегда находилась в центре виджета.

.loader {
    background-image: url('ajax-loader.gif');
    width: 400px;
    height: 300px;
    background-repeat: no-repeat;
    background-position: center center;
    position: fixed;
}

Значения width и height должны совпадать с соответствующими значениями, установленными для виджета (div#tweets).

#tweets {
    height: 300px;
    width: 400px;
    overflow: auto;
    position: relative;
    border: solid 1px #999;
    margin: 3em auto 0 auto;
}

Переходим к загрузке твитов

Основная сложность заключается в том, что нам нужно с помощью JavaScript выполнить кросс-доменный запрос к серверу twitter’а. Такие запросы запрещены политикой безопасности браузеров, поэтому использовать обычный AJAX запрос не получится.

Тем не менее, благодаря тому, что Twitter API поддерживает JSONP задача решается достаточно просто.

$(function() {
    //параметры для получения твитов
    var user_id = '24147920';
    var tweets_url = 'http://api.twitter.com/1/statuses/user_timeline.json';
    var page = 1;
    var tweets_num = 10;

    //список твитов и картинка загрузчика
    var container = $('#tweets');
    var loader = $('.loader');

    //шаблон для поиска ссылок в твитах (упрощенный)
    var pattern = /(http\S+)/gi;

    //загружаем первую страницу твитов
    get_tweets(page);

    //обработчик события scroll
    container.scroll(function() {
        //это условие выполняется когда ползунок находится в крайнем нижнем положении
        if  (container[0].scrollTop == container[0].scrollHeight - container[0].clientHeight){
            //показываем загрузчик
            loader.removeClass('hidden');
            //загружаем очередную страницу твитов
            page = page + 1;
            get_tweets(page);
        }
    });

    //эта функция загружает твиты, ищет ссылки и ставит для них
    //соответствующий тег <a href="...">, вставляет твиты в список
    function get_tweets(page) {
        $.getJSON(
            //формируем запрос на получение твитов (используется JSONP)
            tweets_url + '?user_id=' + user_id + '&page=' + page + '&count=' + tweets_num + '&callback=?',
            function(data) {
                $(data).each(function(i, tweet) {
                    //формируем ссылки
                    var text = tweet.text.replace(pattern, '<a href="$1" target="_blank">$1</a>');
                    //вставляем твит в список
                    container.append('<div class="tweet">' + text + '</div>');
                });
                //прячем загрузчик
                loader.addClass('hidden');
            }
        );
    }
});

Прежде всего, мы подготавливаем данные, которые нужны для работы с Twitter API (строки 3-6). Для данного примера я использовал свою собственную ленту твитов, но вы можете вывести любую другую. Также не принципиально сколько твитов загружать за раз, главное, чтобы после первоначальной загрузки появилась полоса прокрутки.

Для получения твитов используем метод getJSON (строки 33-46, библиотека jQuery).

В первом её параметре передаём запрос на получение твитов. В него мы включаем:
- id пользователя ('?user_id=' + user_id);
- номер страницы ('&page=' + page);
- количество твитов на странице ('&count=' + tweets_num);
- имя функции, которая будет вызвана после получения данных ('&callback=?') – его jQuery формирует автоматически и подставляет вместо знака вопроса.

После получения твитов нам остается только добавить их в список (строки 36-42). При этом, мы ищем ссылки в тексте твитов и обрамляем их тегом <a>.

Завершающий этап – установка обработчика для события scroll (строки 19-28).

Здесь нужно только проверить достигнут конец списка или нет. Если достигнут, показываем загрузчик (убираем класс hidden) и вызываем функцию get_tweets, которой передаём номер нужно страницы. В противном случае, не делаем ничего.

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

Успехов!

Интересное

Глянцевая и матовая печать фотокниг и свадебных фотоальбомов

Любителям страйкбола будет интересно почитать про камуфляж Горка его расцветки и разновидности.

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

К сожалению, не всегда есть возможность проигнорировать устаревшие браузеры (главным образом речь идет о IE6 и 7). И это сильно замедляет использование новых стандартов.

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

Поэтому оптимальным решением было бы автоматическое переключение технологий в зависимости от возможностей браузера.

Об одной из таких технологий и пойдёт речь в этой статье. Называется она data: URL.

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

Для себя задачу я ставил достаточно просто. Проверить, насколько сложно будет обеспечить одинаковый вид страницы во всех браузерах, начиная с IE6.

Сразу выкладываю ссылку на архив с примером, который я использовал для экспериментов.

Рассмотрим тестовую страницу

<!DOCTYPE html>

<html>
<head>
    <title>CSS clip</title>
    <meta charset="utf-8" />
</head>

<body>

<div id="social_icons">
    <a href="#" class="twitter icon"></a>
    <a href="#" class="facebook icon"></a>
    <a href="#" class="bobrdobr icon"></a>
    <a href="#" class="memori icon"></a>
    <a href="#" class="delicious icon"></a>
    <a href="#" class="stumbleupon icon"></a>
</div>

</body>
</html>

Она содержит шесть ссылок, которые нужно показать в виде иконок на социальные сервисы.

Делается это достаточно просто. Для каждой ссылки задаётся ширина, высота и фоновое изображение (иконка).

При этом браузер загрузит каждый файл, который будет указан в свойстве background-image. Т.е. если у нас шесть иконок, то будет отправлено шесть запросов серверу. Учитывая, что размеры иконок редко превышают несколько кБ, загружать их по одной не выгодно.

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

Именно этот вариант я решил использовать для браузеров IE6 и 7, а для новых – передать иконки с помощью data: URL.

Подготовка данных для использования в data: URL

Тут всё достаточно просто. Нужно закодировать содержимое файла с картинкой с помощью base64 и вставить полученную строку в CSS файл.

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

Примечание. Я использовал коллекцию бесплатных иконок от wpzoom.

На практике можно воспользоваться одним из сервисов, выполняющих эту операцию. Например, duris.ru или dopiaza.org.

В результате у меня получилась такая таблица стилей.

@charset 'utf-8';

.icon {
	width: 64px;
	height: 64px;
	display: block;
	float: left;
	margin: 10px;
}

div#social_icons a {
	background-image: url("data:image/png;base64,iVBORw......");
	background-repeat:no-repeat;
}
.twitter {
	background-position: 0 0;
}
.facebook {
	background-position: 0 -64px;
}
.bobrdobr {
	background-position: 0 -128px;
}
.memori {
	background-position: 0 -192px;
}
.delicious {
	background-position: 0 -256px;
}
.stumbleupon {
	background-position: 0 -322px;
}

Обратите внимание. Здесь не важно кодируете вы один файл со всеми иконками или каждую отдельно. Все данные будут переданы внутри CSS файла.

Рассмотрим стили подробнее.

Для каждой ссылки мы указываем высоту (width) и ширину (height). При этом, нужно сделать ссылку блоковым элементом (display: block), иначе длина и высота применятся не будут. Чтобы расположить иконки в один ряд, используем обтекание (float: left).

Далее каждой ссылке устанавливаем фоновое изображение (background-image). В качестве значения url вставляем результат преобразования картинки. Я его сократил, т.к. он занимает около 19 кБ.

Затем с помощью background-position показываем нужный фрагмент картинки. В данном случае все иконки имеют размер 64х64 px и расположены вертикально, поэтому просто изменяем вертикальную координату на 64 px.

Остаётся подключить файл стилей к странице.

<link rel="stylesheet" type="text/css" href="styles.css" />

Всё. В современных браузерах иконки отображаются правильно.

Для формирования страницы браузер выполняет два запроса к серверу. Первый – получение самой страницы, второй – получения файла стилей. При этом, файл стилей занимает 19,1 кБ (если его сжать, получится 14,4 кБ).

Поддержка IE6 и 7

Есть несколько вариантов решения этой задачи. Подробно они рассмотрены в статье Кроссбраузерное использование data:URL.

Я покажу один из самых простых вариантов, с заменой файла стилей.

Идея предельно простая. С помощью условных комментариев, браузерам IE6 и 7 указываем свой собственный CSS файл.

Выглядит это следующим образом.

<!--[if lt IE 8]><link rel="stylesheet" type="text/css" href="ie_6_7_styles.css" /><![endif]-->
<!--[if gte IE 8]><link rel="stylesheet" type="text/css" href="styles.css" /><![endif]-->
<!--[if !IE]>--><link rel="stylesheet" type="text/css" href="styles.css" /><!--<![endif]-->

В результате, современные браузеры загрузят файл styles.css, а шестая и седьмая версии IE – ie_6_7_styles.css.

В этих стилях отличается только свойство background-image. Вместо data:URL указываем файл с иконками.

div#social_icons a {
    background-image: url("icons/icons_sprites.png");
    background-repeat:no-repeat;
}

Теперь во всех браузерах иконки отображаются одинаково.

Результаты

Должен отметить, что в данном случае, результаты получились не очень впечатляющие.

Безусловно, при использовании data: URL количество запросов уменьшилось (на один), но объём передаваемых данных увеличился практически на 5 кБ (исходный файл icons_sprites.png «весит» 13,9 кБ, а после base64 преобразования он занимает около 19 кБ).

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

Кроме того, усложняется процесс обновления картинок, т.к. они будут кешироваться вместе с CSS файлом. (Эта проблема решаемая, но выходит за рамки данной статьи).

С другой стороны, в этой статье рассмотрен очень простой пример. Для сложного сайта файлов со спрайтами может получиться довольно много и в этом случае эффект от использования data: URL будет выше за счёт уменьшения количества запросов.

К тому же, если бы не нужна была поддержка IE6, 7, то можно было бы вообще не заниматься созданием файла со спрайтами и установкой background-position, а просто передавать изображения в background-image для соответствующих элементов.

В целом, я не уверен, что в ближайшее время начнется массовое использование data: URL. Тем не менее, технология очень интересная.

Успехов!

Интересно почитать

Хотите сделать карьеру в IT? Курсы программистов будут хорошей стартовой точкой.

Нужна декларация 3-ндфл «продажа квартиры»? Заполним за сутки и вышлем на емейл.

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

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

Можно, конечно, написать собственную реализацию такого плагина, но это процесс трудоемкий (если делать качественно) и, скорее всего, код процентов на 90 будет повторять то, что есть в других плагинах.

В таких случаях гораздо предпочтительнее использовать фреймворки. Об одном из них и пойдет речь в этой статье.

Фреймворк называется Galleria и представляет собой плагин для библиотеки jQuery.

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

Подключить Galleria не сложнее чем любой другой плагин, но внешний вид галереи будет зависеть от используемой темы.

Чтобы получить более полное представление о фреймворке рассмотрим небольшой пример, который включает создание собственной темы и использование нескольких очень полезных возможностей Galleria.

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

Постановка задачи

Допустим, у нас есть сайт на котором мы хотим показывать галерею. При этом, в галерее необходимо показать рисунки для которых нет миниатюр на страницах (возможно, мы хотим разместить ссылку на галерею в сайдбаре и показывать какую-то заранее определенную группу картинок). Кроме того, для каждого рисунка есть несколько блоков дополнительной информации, которую необходимо показать рядом с рисунком.

Т.е. должно получиться примерно следующий результат.

Если интересно, можете скачать архив с этим примером.

Теперь рассмотрим как решается эта задача с помощью Galleria.

Подключаем фреймворк.

На страницу добавляем блок для галереи и ссылку с помощью которой будем эту галерею открывать.

<div id="content">
    <a href="#" id="openGallery">Открыть галерею</a>
    <div id="gallery"></div>
</div>

После этого распаковываем архив с фреймворком в папку galleria и подключаем 3 JS-файла.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="galleria/galleria-1.2.2.min.js"></script>
<script src="init.js"></script>

Здесь все как обычно. Сначала загружаем jQuery, затем плагин Galleria и скрипт init.js (он выполняет подключение и настройку галереи).

Подготовка данных для галереи

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

    var images = [
        {
            image: 'images/spring_1.jpg',
            thumb: 'images/spring_1t.jpg',
            title: 'Первая картинка',
            description: 'Описание первой картинки',
            size: '450x338',
            link: 'images/spring_1.jpg'
        },
        {
            image: 'images/spring_2.jpg',
            thumb: 'images/spring_2t.jpg',
            title: 'Вторая картинка',
            description: 'Описание второй картинки',
            size: '450x360',
            link: 'images/spring_2.jpg'
        },
...
    ];

Думаю, несложно догадаться почему разработчиками выбран именно такой вариант передачи данных. Если вы получаете данные от сервера в JSON формате, то получить такой объект можно с помощью одного вызова функции eval.

Обратите внимание! Не все поля в этой структуре обязательные, вы можете добавлять сколько угодно своих собственных полей с данными. В минимальном варианте для работы плагина необходимо поле image и, если вы хотите показать слайдер с миниатюрами картинок – thumb.

Теперь подключаем галерею

    var gallery = $("#gallery");

    Galleria.loadTheme('galleria/themes/simplecoding/galleria.simplecoding.js');

    $('#openGallery').click(function() {
        $("#gallery").galleria({
            data_source: images,
            width: 800,
            height: 500,
            clicknext: true
        });
        return false;
    });

Перед подключением галереи необходимо загрузить тему. Её создание мы рассмотрим чуть ниже, сейчас только отметим, что для загрузки необходимо указать основной JS-файл темы.

Т.к. нам нужно чтобы галерея открывалась по клику на ссылке, устанавливаем соответствующий обработчик, и в нём вызываем метод galleria для блока в котором будет находится галерея (строка 6).

В параметрах этого метода передаём настройки галереи. Здесь:

data_source – имя переменной в которой находятся данные рисунков;
width и height – длина и ширина галереи;
clicknext – если этот параметр равен true, то клик по картинке будет показывать следующую картинку (дублирует кнопку Next).

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

Оформление галереи (создание собственной темы)

Создать тему не сложно. В папке galleria/themes/ создаёте папку с названием вашей темы (в данном случае – simplecoding). В этой папке должен находится основной файл темы – galleria.simplecoding.js.

Практически наверняка вы захотите добавить файл стилей и различные картинки и иконки для оформления галереи.

В качестве основы для данного примера я взял код из официальной документации, а также картинки и стили из темы classic, которая поставляется вместе с плагином (стили, естественно, пришлось немного изменить и дополнить).

Рассмотрим основной скрипт – galleria.simplecoding.js

(function($) {
Galleria.addTheme({
    name: 'simplecoding',
    author: 'Statsenko Vladimir, http://www.simplecoding.org',
    version: 1,
    css: 'galleria.simplecoding.css',
    defaults: {
        transition: 'fade',
        imagecrop: true,
        _my_color: 'black'
    },
    init: function(options) {

        //добавляем заголовок
		this.addElement('title');
		this.prependChild('container', 'title');

		//добавляем кнопку "Закрыть"
		this.addElement('close');
		this.prependChild('container', 'close');
		this.$('close').html('<a href="#"> </a>');

        //добавляем поле для описания и размера картинки
		this.addElement('desc');
		this.appendChild('stage', 'desc');

        var overlay = $('<div id="overlay"></div>');
        overlay.add('.galleria-close').click(this.proxy(function(e) {
            this.$('container').toggleClass('hidden');
            overlay.toggleClass('hidden');
            e.stopPropagation();
            return false;
        }));

        this.$('container')
            .css('background-color', options._my_color)
            .parent().parent().append(overlay);

        // bind a loader animation:
        this.bind(Galleria.LOADSTART, function(e) {
            if (!e.cached) {
                this.$('loader').show();
            }
        });
        this.bind(Galleria.LOADFINISH, function(e) {
            this.$('loader').hide();
            var imageData = this.getData();
			this.$('title').html(imageData.title);
			this.$('desc').html(imageData.description + ' ' + imageData.size);
        });
    }
});
}(jQuery));

Как видите, для создание темы используется метод addTheme (строка 2) в параметрах которого мы указываем её название, имя автора, имя файла стилей (строка 6), различные параметры и метод инициализации (параметр init, строка 12).

Именно в этом методе выполняется изменение разметки галереи, назначаются обработчики событий и т.п.

Рассмотрим этот метод подробнее.

Прежде всего, взгляните на разметку галереи, которая создаётся по-умолчанию.

В нашем случае необходимо добавить название картинки и кнопку «Закрыть» над картинкой и текст с подробным описанием – под ней.

Поэтому мы добавляем 3 поля – title, close и desc (строки 14-25). При этом используются методы addElement (создает новый элемент), prependChild (вставляет новый элемент перед указанным элементом) и appendChild (вставляет новый элемент после указанного объекта).

В первом параметре методов prependChild и appendChild необходимо указать имя блока перед (после) которого нужно вставить новый элемент. При этом учтите, что плагин добавляет ко всем названиям блоков приставку galleria- . Т.е. если вы посмотрите на разметку с помощью firebug, то блоки будут выглядеть примерно так.

<div class="galleria-title">Пятая картинка</div>

Теперь рассмотрим код, позволяющий закрыть галерею (строки 27-38).

В данном случае мы используем немного нестандартное решение. У нас есть кнопка «Закрыть», которую мы поместили в правый верхний угол галереи. В дополнение к этой кнопке создадим полупрозрачный слой (overlay), который с одной стороны будет затенять страницу, а с другой – закрывать галерею при клике по нему.

Для создания слоя используем функцию $ библиотеки jQuery. Затем назначаем ему и кнопке «Закрыть» обработчик события click.

Обратите внимание, при создании этого обработчика мы используем метод proxy объекта Galleria (строка 28). Этот метод позволяет обращаться к текущему экземпляру объекта Galleria внутри обработчика клика с помощью this. Если не использовать proxy, то this внутри обработчика клика будет указывать либо на кнопку «Закрыть», либо на overlay.

Также отметьте, как выполняется обращение к элементам галереи. Например, переключение класса hidden у контейнера.

this.$('container').toggleClass('hidden');

Здесь вызывается метод $ плагина, а не функция $ библиотеки jQuery. Но, также как и стандартная функция, этот метод возвращает объект jQuery, т.е. вы сможете использовать весь функционал этой библиотеки.

Теперь добавляем обработчики ещё для двух событий.

При возникновении события Galleria.LOADSTART (начало загрузки изображения) показываем анимированный загрузчик (строки 40-44).

А после загрузки изображения (событие Galleria.LOADFINISH) устанавливаем заголовок и описание текущей картинки (строки 45-50).

Информацию, связанную с текущей картинкой (мы её указали при в файле init.js), можно получить с помощью метода this.getData(). После этого можно обращаться к любым полям структуры, например, так imageData.title.

CSS стили

Я не буду подробно описывать все стили, которые здесь используются. Большинство из них взято из темы classic. Приведу те, которые использовались для оформления новых элементов.

#overlay {
    width: 100%;
    height: 100%;
    z-index: 9;
    background-color: #000;
    opacity: 0.3;
    position: absolute;
    top: 0;
    left: 0;
}

.hidden {
    display: none;
}

.galleria-close {
	background-image: url(classic-map.png);
	background-position: -753px -11px;
	width: 9px;
	height: 9px;
	margin: 0.5em;
	float: right;
}

.galleria-close a {
	display: block;
	text-decoration: none;
}

.galleria-title, .galleria-desc {
	color: #fff;
	font-family: Verdana, sans-serif;
	text-align: center;
	padding: 3px;
}

Как видите, никаких особых хитростей здесь нет.

Для полупрозрачного слоя используем абсолютное позиционирование и 100% длину и ширину, чтобы он закрыл всё окно. С помощью z-index размещаем его под галереей.

Блок с галереей делаем невидимым с помощью класса hidden.

Для кнопки «Закрыть» указываем фоновое изображение и соответствующий размер.

А для дополнительных надписей устанавливаем параметры шрифтов и отступы.

Заключение

Возможно, после прочтения этой статьи у вас возник вопрос: «Зачем так заморачиваться?». Действительно, большинство плагинов для создания галерей можно просто подключить и они будут работать. При этом никаких тем создавать не нужно.

Но это простота кажущаяся. Как только вы захотите что-нибудь изменить в таком «простом» плагине, сразу столкнетесь с необходимостью править его исходники, а это занятие гораздо более трудоёмкое чем создание темы для Galleria.

К тому же, у вас появляется возможность создать действительно оригинальное решение для работы с картинками и сделать ваш ресурс действительно запоминающимся!

Всех читательниц поздравляю с Праздником весны!
Удачи и хорошего настроения!

Интересно почитать

Обучение программированию поможет стать настоящим IT специалистом.

Заполнение 3-ндфл 2011 на продажу автомобиля плюс инструкции «Как отчитаться в налоговой»

Приветствую всех!

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

Думаю, с этой проблемой в какой-то момент сталкиваются все веб мастера.

Представьте, у вас есть высококачественные изображения с высоким разрешением (фотографии, скриншоты и т.п.) и их нужно показать на сайте. Понятно, что вставить их, не меняя размеры, не получится. Картинки просто «порвут» дизайн. Поэтому предварительно нужно их уменьшить, но и возможность просмотра полноразмерного изображения необходимо обеспечить.

Классическое решение этой задачи – сделать каждую миниатюру ссылкой на полноразмерное изображение. Т.е. использовать разметку вида.

<a href="1.jpg"><img src="1_thumb.jpg" /></a>

где 1_thumb.jpg – уменьшенное изображение 1.jpg.

Главный недостаток такого подхода – посетитель покидает страницу, а затем должен на неё вернуться с помощью кнопки «Назад».

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

Для этого примера я решил остановиться на плагинах к библиотеке jQuery. Т.к. на данный момент она одна из самых популярных и, кроме того, аналоги можно найти для всех распространённых JS библиотек.

Хочу сразу отметить, что плагинов для работы с изображениями – сотни, и многие дублируют друг друга.

Я же хочу показать основные подходы с примерами для решения задачи и обсудить их достоинства и недостатки, а какой именно плагин использовать – решать вам.

Чтобы было нагляднее, все описанные здесь примеры я разместил на демонстрационной страничке

Вариант 1. Предпросмотр при наведении мышки на изображение.

Есть несколько разновидностей таких плагинов, которые различаются в основном визуальными эффектами. В простейшем случае, для реализации подойдет любой плагин создания подсказок (tooltips). Например, Image Preview.

Использовать его не сложно. Размещаете на странице миниатюры со ссылками на полноразмерные изображения, подключаете jQuery и плагин, добавляете несколько CSS стилей и всё, можно пользоваться.

Рассмотрим пример.

Разметка страницы

<a href="images/1.jpg" class="preview"><img src="images/1t.jpg" alt="image 1" /></a>
<a href="images/2.jpg" class="preview"><img src="images/2t.jpg" alt="image 2" /></a>
<a href="images/3.jpg" class="preview"><img src="images/3t.jpg" alt="image 3" /></a>

Здесь ссылкам добавлен класс preview, чтобы плагин мог выбрать только те изображения, которые нужно увеличить.

Подключение JS файлов:

<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="tooltip.js"></script>

И CSS стили:

a img {
    border: none;
}

#preview {
    background: none repeat scroll 0 0 #333333;
    border: 1px solid #CCCCCC;
    color: #FFFFFF;
    display: none;
    padding: 5px;
    position: absolute;
}

Их вы можете поменять. Главное – сохраните абсолютное позиционирование для блока предпросмотра (position: absolute). Иначе полноразмерная картинка будет вставлена внутрь страницы и испортит дизайн.

Теперь о достоинствах и недостатках.

Взгляните на демонстрационную страничку (первый ряд изображений).

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

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

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

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

Вариант 2. Увеличение картинки на весь экран.

Реализовать можно с помощью плагинов для создания галерей. Пример для этой статьи я сделал с помощью плагина Fancy Zoom.

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

Подключение и настройка плагина достаточно простые.

Разметка страницы должна позволять выбрать нужные изображения с помощью jQuery селекторов. Например, так:

<div id="fancy">
    <a href="images/1.jpg"><img src="images/1t.jpg" alt="image 1" /></a>
    <a href="images/2.jpg"><img src="images/2t.jpg" alt="image 2" /></a>
    <a href="images/3.jpg"><img src="images/3t.jpg" alt="image 3" /></a>
</div>

После этого, нужно подключить JS скрипты и передать плагину ссылки на полноразмерные изображения.

<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="jquery.shadow.js"></script>
<script type="text/javascript" src="jquery.ifixpng.js"></script>
<script type="text/javascript" src="jquery.fancyzoom.min.js"></script>
<script type="text/javascript">
	$(function() {
		$('#fancy a').fancyzoom();
	});
</script>

Плагины shadow и ifixpng используются для создания тени вокруг полноразмерного изображения и исправления проблем IE при работе с png изображениями, соответственно.

Fancy Zoom имеет несколько полезных настроек, на которых я останавливаться не хочу, т.к. они достаточно подробно описаны в документации.

Теперь о достоинствах и недостатках.

Кликните по любому изображению во втором ряду на демонстрационной страничке. Картинка плавно увеличится и в правом верхнем углу появится кнопка «Закрыть».

Безусловным преимуществом тут является то, что можно удобно просматривать довольно большие изображения без использования скролла.

Кроме того, ни о каких случайных срабатываниях тут речь не идёт. Картинка будет увеличена только в ответ на явное действие пользователя – клик мышкой.

Но читать текст на странице уже не получится. Т.е. посетитель может смотреть либо на картинку, либо – на содержимое страницы.

Вариант 3. Увеличение картинки в отдельном блоке.

Для демонстрации этого решения я выбрал плагин jqZoom.

Посмотреть как он работает можно на демонстрационной страничке (последний ряд). Когда вы наводите указатель мыши на изображение на нём появляется полупрозрачный прямоугольник, показывающий какая именно область картинки сейчас увеличена. Справа появится блок с увеличенным фрагментом изображения. Естественно, плагин не растягивает миниатюру, а просто показывает фрагмент полноразмерной картинки.

Разметка страницы для использования этого плагина не отличается от предыдущих вариантов.

<a href="images/2.jpg" class="jqzoom" title="image 2">
	<img src="images/2t.jpg" alt="image 2" />
</a>

Для использования плагина нужно подлкючить библиотеку jQuery, сам плагин, найти нужные изображения и вызвать для них метод jqzoom().

<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="jqzoom.pack.1.0.1.js"></script>
<script type="text/javascript">
	$(function() {
		$(".jqzoom").jqzoom();
	});
</script>

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

Теперь подумаем, что даёт использование такого плагина.

На мой взгляд, его можно воспринимать как компромиссное решение между двумя первыми вариантами.

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

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

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

Обратите внимание. Все три решения используют стандартную разметку (картинка внутри ссылки). Такой подход гарантирует, что при отключённом JavaScript посетитель сможет просмотреть полноразмерное изображение.

В заключение, хочу отметить, что в этой статье рассмотрены далеко не все варианты решения задачи. Я выбрал те, которые считаю наиболее универсальными (подходят для большинства сайтов) и простые в использовании.

Если вам приходилось решать подобные задачи, и вы хотите о нём рассказать, пишите, буду рад обсудить

Интересно почитать

Как привлечь клиентов в кафе и убедить их заказать больше чем обычно?

Приветствую всех!

Некоторое время назад я опубликовал пост, в котором рассказывал о плагине для jQuery, позволяющем создать плавающий виджет.

Но, благодаря читателям этого блога, выяснилось, что протестировал я работу плагина не очень хорошо. За это всем ещё раз огромное спасибо! Очень приятно, что кто-то пользуется моим кодом и помогает делать его лучше.

Но вернёмся к плагину. Проблема возникла в широко известном браузере под названием IE6, о котором уже давно хочется забыть … но есть люди, которые им пользуются

Хуже оказалось то, что не удалось найти хорошего решения. Т.е. виджет в IE6 теперь работает, но хуже, чем в остальных браузерах.

Проблема заключается в следующем. IE6 не поддерживает CSS свойство position: fixed. Это свойство указывает, что элемент должен фиксироваться при прокрутке страницы относительно окна браузера.

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

Но, все приведённые в ней решения, требуют использования выражений (expression) в CSS свойствах, и, по-с сути, означают динамическую установку свойства top с помощью JS кода.

Недостаток такого решения в том, что при прокрутке элемент начинает мерцать и «дёргаться». Правда, в той статье предложено решение этой проблемы, но оно предполагает использование фонового изображения для тега body. А если плагин, начнет менять эти стили, то возможны проблемы с дизайном страницы. Т.е. вебмастер сам должен решить как использовать этот приём.

Теперь рассмотрим изменения, которые я внёс в плагин.

curWindow.scroll(function() {
	updateElement();
});

function updateElement() {
	//расстояние от начала страницы до верха её видимой части
	var windowTop = curWindow.scrollTop();
	if (windowTop + config.fromTop < config.minTop) {
		//виджет нужно позиционировать абсолютно
		if ('absolute' != element.css('position')) {
			element.css('position', 'absolute');
			element.css({'top':config.minTop});
		}
	} else {
		//позиционируем виджет фиксированно
		//ie6 не поддерживает фиксированное позиционирование
		if ($.browser.msie && $.browser.version.substr(0,1)<7) {
			element.css({'top': windowTop + config.fromTop + "px"});
		}
		else {
			if ('fixed' != element.css('position')) {
				element.css('position', 'fixed');
				element.css({'top':config.fromTop});
			}
		}
	}
}

Как видите, их не много (начинаются со строки 17).

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

Если мы имеем дело с IE6, то позиционирование остаётся абсолютным, а фиксация виджета осуществляется за счет изменения свойства top. Функция updateElement выполняется в обработчике события scroll, т.о. пересчёт свойства top при прокрутке страницы выполняется постоянно, что и приводит к мерцаниям.

Во всех остальных браузерах используется свойство fixed.

Ссылка на архив с обновлённым плагином.

Решение, как я и говорил, не идеальное, но всё-таки хороший момент в нём есть. Возможно кто-то из пользователей IE6 увидит, что сайты в новых браузерах смотрятся лучше, и решит, что пора что-то менять

Удачи!

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

Сразу приведу ссылку на архив с новой версией.

Изменения и новые возможности

1) Плагин теперь называется floating_panel.

2) Исправлен баг с мерцанием виджета.

Тут отдельное спасибо хочу сказать Александру за подсказку о динамическом изменении свойства position. Подробное описание решения чуть ниже.

3) Добавлена возможность размещать виджет как слева, так и справа от контента страницы.

Для этого используется параметр 'location', которое может принимать значения 'left' или 'right'.

4) Параметр 'fromCenter' теперь указывает расстояние от центра страницы до левого края виджета, а не до его середины.

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

Пример использования

Создаём div, который будет содержать код кнопок виджета.

<div id="twitter_widget"><script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script></div>

Подключаем библиотеку jQuery и плагин.

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/floating_panel.jquery.js"></script>
<script type="text/javascript">
$(function() {
  $('#twitter_widget').floating_panel({
		'fromCenter': 520,
		'fromTop': 50,
		'minTop': 200,
		'location': 'left'
	});
});
</script>

В этом примере указаны все параметры, но вам не обязательно их использовать. Т.е. если вас устраивают значения по-умолчанию, вы можете подключить плагин так:

$('#twitter_widget').floating_panel();

Параметры имеют следующее значение.

fromCenter – расстояние от середины страницы до левого края виджета
fromTop – расстояние от виджета до верхней границы видимой части страницы
minTop – расстояние от виджета до начала страницы
location – размещение виджета (left или right)

На рисунке показано их влияние на размещение виджета.

Теперь рассмотрим код плагина

(function($) {
    $.fn.floating_panel = function(settings) {
    	//значения по-умолчанию
    	var config = {
    		'fromCenter': 580,
    		'fromTop': 50,
    		'minTop': 200,
    		'location': 'left'
    	};
    	//если пользователь указал свои параметры, то используем их
        if (settings) $.extend(config, settings);

    	var element = $(this);

    	var curWindow = $(window);
    	//рассчитываем смещение от левого края окна браузера
    	if ('left' == config.location) {
    		var elementLeft = curWindow.width() / 2 - config.fromCenter;
    	}
    	else {
    		var elementLeft = curWindow.width() / 2 + config.fromCenter;
    	}
		element.css({'left':elementLeft});
    	updateElement();

    	//изменяем положения виджета при прокрутке страницы
    	curWindow.scroll(function() {
   			updateElement();
    	});

    	function updateElement() {
    		//расстояние от начала страницы до верха её видимой части
    		var windowTop = curWindow.scrollTop();
    		if (windowTop + config.fromTop < config.minTop) {
    			//виджет нужно позиционировать абсолютно
    			if ('absolute' != element.css('position')) {
    				element.css('position', 'absolute');
    				element.css({'top':config.minTop});
    			}
    		} else {
    			//позиционируем виджет фиксированно
    			if ('fixed' != element.css('position')) {
    				element.css('position', 'fixed');
    				element.css({'top':config.fromTop});
    			}
    		}
    	}
    };
})(jQuery);

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

Теперь используется два режима позиционирования. Если расстояние от виджета до начала страницы меньше значения, указанного в параметре minTop, то виджет позиционируется абсолютно (position: absolute), а значение свойства top выствляется равным minTop.

В противном случае виджет позиционируется фиксировано (position: fixed), а свойству top присваивается значение fromTop.

Идея заключается в том, чтобы как можно реже изменять CSS свойства с помощью JS кода. Поэтому перед изменением свойства position проверяется его значение (строки 36 и 42) и изменение происходит только если текущее значение не соответствует новому. Т.е. при прокрутке страницы это свойство будет изменяться только один раз.

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

Приветствую всех!

Сегодня хочу поделиться небольшим плагином для jQuery, который я разработал специально для этого блога.

UPD. Эта информация устарела, т.к. появилась новая версия плагина.

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

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

Возвращаемся к плагину.

Демонстрацию его работы вы можете увидеть слева от этого текста. В данном случае я использовал кнопку твиттера, которую создаёт сервис Tweetmeme, но вы можете использовать любую другую кнопку в том числе и обычную картинку.

Принцип использования.

1) Подключаете библиотеу jQuery и плагин.

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/left_floating_button.jquery.js"></script>

2) Создаёте тег div с кодом кнопки

<div id="twitter_widget"><script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script></div>

3) Подключаете плагин

$('#twitter_widget').left_floating_button();

4) Если есть необходимость, указываете параметры. Тут нужны некоторые пояснения. Всего можно задать четыре параметра:

fromCenter – расстояние от середины страницы до середины виджета
fromTop – расстояние от виджета до верхней границы видимой части страницы
minTop – расстояние от виджета до начала страницы

Я сделал небольшой рисунок, чтобы было понятнее о каких расстояниях идёт речь.

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

Установить свои значения можно с помощью метода left_floating_button. Например, так

$('#twitter_widget').left_floating_button({
		'fromCenter': 520,
		'fromTop': 50,
		'minTop': 200
	});

Рассмотрим код плагина.

(function($) {
    $.fn.left_floating_button = function(settings) {
    	//значения по-умолчанию
    	var config = {
    		'fromCenter': 520,
    		'fromTop': 50,
    		'minTop': 200
    	};
    	//если пользователь указал свои параметры, то используем их
        if (settings) $.extend(config, settings);

    	var element = this;

    	//абсолютно позиционируем виджет
    	element.css('position', 'absolute');
    	var curWindow = $(window);
    	updateElement();

    	//изменяем положения виджета при прокрутке страницы
    	curWindow.scroll(function() {
   			updateElement();
    	});

    	function updateElement() {
    		//определяем размеры окна
    		var windowWidth = curWindow.width();
    		var windowTop = curWindow.scrollTop();
    		//рассчитываем положение виджета
    		var elementLeft = windowWidth / 2 - config.fromCenter - element.width() / 2;
    		var elementTop = windowTop + config.fromTop;
    		if (elementTop < config.minTop) {
    			elementTop = config.minTop;
    		}

    		//изменяем CSS свойства left и top,
    		//в результате виджет будет перемещаеться
			element.css({'left':elementLeft, 'top':elementTop});
    	}
    };
})(jQuery);

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

Как только вы вызываете метод left_floating_button для какого-нибудь элемента страницы, плагин делает его абсолютно позиционированным (с помощью CSS свойства position: absolute). После этого, положение элемента можно изменять с помощью свойств top и left. Т.е. нужно пересчитывать значения этих свойств при каждой прокрутке страницы.

Для того, чтобы отслеживать прокрутку страницы нужно назначить обработчик события scroll, а рассчитать положение элемента несложно, зная ширину окна и расстояние до начала страницы. Последние можно получить с помощью методов $(window).width() и $(window).scrollTop().

Запуск перемещения выполняется присваиванием новых значений свойствам top и left.

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

Исходники плагина

Удачи!

Интересное

Мой дом – моя крепость. Но кто сказал, что крепость не должна быть красивой? В этом вам поможет отделка фасада загородного дома. Ваш дом действительно будет выделяться.

Что-то давно я ничего не писал о CSS, а ведь использовать эту технологию приходится практически постоянно.

Кроме того, последнее время я начинаю замечать, что все чаще использую CSS фреймворки. Поэтому сегодня речь пойдет именно о них. А точнее, об одном из них, под названием 960 Grid System.

Почему именно о нем? Тут все очень просто. Я более-менее плотно работал с двумя фреймворками: Blueprint и 960 grid. При этом, на мой взгляд, разработчикам 960 grid system удалось добиться очень хорошего отношения возможности/размер фреймворка.

Рассмотрим его подробнее.

Начнем с недостатков.

Если вы хоть немного интересовались темой, то, конечно, знаете, что есть много возражений против применении CSS фреймворков как таковых.

Основные возражения такие.

1) Фреймворки увеличивают размер страницы.

2) Загоняют разработчика в определенные рамки. Например, 960 grid предназначен для верстки страниц с шириной 960рх.

3) Многим не нравятся имена классов вроде «grid-16».

4) Кто-то считает, что нужно самому создавать фреймворк «под себя».

Но давайте посмотрим насколько существенны эти недостатки.

1) Объем файлов действительно увеличивается. Но 960 Grid System состоит из трех файлов, суммарный размер которых – 8 кБ (сжатая версия). Если использовать архивацию размер уменьшается до 1,6кБ.

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

2) По поводу ограничений. Фреймворк, как и любую библиотеку, имеет смысл использовать в случаях, для которых он разрабатывался. Т.е. если нужна «резиновая» верстка, 960 Grid – не подходящее решение (хотя есть проект Fluid 960 Grid System). Но если в тех. задании сказано, что страница должна иметь фиксированную ширину 960px, то ситуация меняется.

3) Имена классов. На мой взгляд – это вопрос привычки. Цифры в имени означают ширину блока и по ним достаточно просто ориентироваться. Кроме того, никто не запрещает использовать одновременно несколько классов, например,

<div class=”grid_4 sidebar”>…</div>

Класс grid_4 будет использовать фреймворк, sidebar – вашими стилями.

4) Свой фреймворк – это хорошо… если у вас есть время на его разработку и вы уверены, что он получится лучше существующих решений.

Теперь о преимуществах.

1) Время разработки. Оно сокращается и значительно, особенно если у вас есть минимальный опыт работы с фреймворком и вы используете его в подходящей ситуации. Т.е. нужно потратить какое-то время на изучение, но окупается оно очень быстро.

2) Фреймворки содержат «хаки» для наиболее распространенных браузеров. Каждый раз решать одни и те же проблемы с позиционированием элементов в IE очень быстро надоедает

3) Упрощается поддержка. Вам будет легче прочитать свой же код, написанный полгода назад, если вы все время используете одинаковые имена классов.

Примечание. Кстати, если вы интересуетесь темой, очень советую почитать статью "Верстка с помощью Grid".

А теперь небольшой пример.

Допустим, нам нужно сверстать страницу с таким размещением блоков.

Я сразу покажу решение.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Test 960 Grid System</title>
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/text.css" />
    <link rel="stylesheet" href="css/960.css" />
    <style type="text/css">
    p {
        border: solid 1px #eee;
    }
    </style>
</head>
<body>
<div class="container_12">
    <div class="grid_12"><p>Заголовок</p></div>
    <div class="clear"></div>

    <div class="grid_4">
        <div class="grid_4 alpha"><p>Левый блок №1</p></div>
        <div class="grid_4 alpha"><p>Левый блок №2</p></div>
    </div>

    <div class="grid_4">
        <div class="grid_4 alpha"><p>Центральный блок №1</p></div>
        <div class="grid_2 alpha"><p>Центральный блок №2</p></div>
        <div class="grid_2 omega"><p>Центральный блок №3</p></div>
    </div>

    <div class="grid_4"><p>Правый блок.<br /><br /> Может быть любой высоты.</p></div>
    <div class="clear"></div>

    <div class="grid_12"><p>Хвостовик</p></div>
    <div class="clear"></div>
</div>
</body>
</html>

Как видите, мы обошлись практически минимальным количество тегов div. Вложенные дивы использовались только для левой и центральной колонок, т.к. они содержат несколько блоков.

Теперь о номерах классов.

Общая ширина макета 960px. Фреймворк позволяет разбить ее на 12, 16 и 24 равных части. В данном случае нам достаточно разбиения на 12 частей. Т.е. класс grid_12 имеет ширину 940px плюс отступы по 10px справа и слева.

Точно также класс grid_4 имеет ширину 960 * 4 / 12 = 320px из которых 20px приходится на отступы.

Если мы поместим подряд три блока с классами grid_1, grid_7 и grid_4, то они займут всю ширину страницы.

Кроме того, есть несколько специальных классов, например, alpha и omega. Они позволяют убрать отступы слева (alpha) и справа (omega) у блока. В данном примере эта возможность используется для того, чтобы убрать отступы у вложенных блоков. Иначе они будут прибавлены к отступам контейнера и, например, расстояние между левой колонкой и центральной будет не 20, а 40px.

Также вы можете использовать класс clear для завершения строки с блоками, а также классы prefix_X, suffix_X, push_X и pull_X для создания различных отступов (вместо X нужно подставить число).

Примечание. Если вы планируете использовать этот (или любой другой CSS фреймворк) я очень советую вам взглянуть на исходные файлы со стилями. Как я уже писал, они совсем небольшие и при наличии минимальных познаний в CSS вы быстро разберетесь что к чему.

Как видите, использовать фреймворк не сложно и его изучение вряд ли отнимет у вас много времени.

В заключение хочу провести небольшой опрос.

(форма для голосования не видна в RSS ридере, поэтому заходите на сайт )

Удачи!

Постовой

Для малого бизнеса бухгалтерские услуги: Москва и область

Думаю, все кто когда-нибудь занимался версткой сайтов, знает о том насколько хорошо IE6 поддерживает разные полезные возможности

Призывы перейти на нормальные браузеры или хотя бы обновить IE6, можно встретить на каждом шагу. Тем не менее ситуация меняется очень медленно.

И на сегодняшний день игнорировать людей, которые используют устаревшую версию Internet Explorer нельзя.

К тому же для того чтобы обеспечить поддержку IE6 не обязательно отказываться от новых возможностей.

Сегодня я расскажу о двух проблемах, которые можно решить практически без усилий с вашей стороны. Это поддержка :hover селекторов и прозрачных png изображений.

Поддержка :hover селекторов

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

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

Решить проблему можно с помощью небольшого скрипта под названием Whatever:hover.

От вас требуется добавить только одно CSS правило

body {
	behavior: url("csshover3.htc");
}

Естественно нужно указать правильное размещение скрипта.

Скрипт сам найдет нужные элементы на странице и, если курсор мыши окажется над ними, применит соответствующие CSS правила.

Поддержка альфа-канала в PNG файлах.

Примечание. В альфа-канале хранятся данные о прозрачности рисунка.

Рассмотрим небольшой пример. Допустим, у вас есть логотип с названием компании, который должен находиться над фоновой картинкой.

При этом для картинки установлено правило

background-attachment: fixed;

Т.е. при прокрутке страницы фон остается неподвижным, а логотип должен перемещаться.

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

Чтобы проиллюстрировать проблему я сделал 2 скриншота.

Угадайте, какой из них сделан в IE6?

IE закрасил прозрачные пиксели серым цветом. Кстати, использование gif изображений не поможет, т.к. по краю букв идут частично прозрачные пиксели.

Решается эта проблема с помощью скрипта IE PNG Fix.

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

img {
    behavior: url("iepngfix.htc");
}

После этого, изображения будут выглядеть правильно.

Небольшое заключение для пользователей IE6.

То, что web разработчик может как-то обойти обойти ограничения браузера не означает, что вам не нужно его апгрейдить

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

Так что не удивляйтесь, если после загрузки пары страничек у вас начнет «тормозить» компьютер

Удачного обновления!