Расшариваем картинки - Меню для правой клавиши мыши

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

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

Смотрим демо:

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

Реализация.
Здесь довольно много неудобных нюансов, но терпеливый блогомастер ведь трудностей не боится?!
Обязательные условия:

• jQuery
• Внешний хостинг, на который нужно положить стили и скрипты

Компоненты, которые устанвливаются перед тегом </head> в шаблоне блога:
1) Основные стили - rpc.css.

<link rel="stylesheet" type="text/css" media="all" href="rcp.css" />

Именно в этом файле вы сможете настроить внешний вид всплывающего окна - #logo-modal, где сейчас прописана позиция fixed, закрепляющая элемент на странице.

2) Базовый скрипт modernizr.min.js.

<script src="modernizr.min.js"></script>

Следующие коды ставятся прямо внутрь поста:
1) Настроечный скрипт.
В нём мы пропишем пути к двум картинкам (на демо это цветная и черно-белая).
Пример скрипта - ford.js.

<script src="ford.js"></script>

К этому моменту вас должны быть заготовлены, отредактированы и отправлены на хостинг (например, Picasa) оба изображения. Их ссылки пописаны в скрипте так:

// the modal window html
var logos = '<h4>Скачать изображение<span class="close">X</span></h4>';
logos += '<img src="http://1.bp.blogspot.com/-j60VLfvIzwU/T15MgR07HwI/AAAAAAAAJVU/7e54wVXx9e4/s1600/ford-thumb.jpg" alt="Logo Download" />';
logos += '<ul><li><a href="http://1.bp.blogspot.com/-SgO7rx_WAgs/T15Mfz8dV-I/AAAAAAAAJU4/FPSv4rk00G8/s1600/ford-1024.jpg" rel="external">Цветное<span>210 Kb</span></a></li>';
logos += '<li><a href="http://4.bp.blogspot.com/-hNsQuTdz3wk/T15MgOFzyLI/AAAAAAAAJVA/PxWV7cJDLkU/s1600/ford-1024-black.jpg" rel="external">Чёрно-белое<span>160 Kb</span></a></li></ul>';

Здесь мы видим три картинки.
Первая - это маленький thumbnail (300 px): тот, что выполняет роль превьюшки в модальном окне. Остальные две присутствуют ввиде ссылок.
Там же оформляется сопутствующий текст (размер картинок, и т.д.).

Html код (тоже для установки на страницу) выглядит так:

<div id="banner">
<img src="http://1.bp.blogspot.com/-j60VLfvIzwU/T15MgR07HwI/AAAAAAAAJVU/7e54wVXx9e4/s1600/ford-thumb.jpg" alt="Logo" id="logo" width="320px" />
</div>

Собственно, это тот же самый thumbnail, и здесь через него по щелчку правой клавишей мыши вызывается модальное окно. Я дал ему несколько большие размеры - 320 px. Атрибут alt нужно составить оригинальный, а id должен остаться постоянным.

Сегодняшний постовой:
Блогоплатформа Blogger одна из самых популярных среди блоггеров. Google старется все делать лучше всех, но шаблоны на блог платформе Blogger далеки от идеала.
Есть немало онлайн сервисов, с помощью которых вы сможете оптимизировать код вашего шаблона и ускорить загрузку блога.

По мотивам этой разработки...