Всплывающее изображение на JQuery+CSS без дополнительных библиотек. Пример №2 на http://highslide.com/ - вопрос №1582453

Прошу помочь написать код для вызова всплывающего окна с увеличенным изображением при клике на превью. Визуально должно выглядеть как пример №2 на highslide.com/, но без подключения доп. библиотек (кроме JQuery).

Общие требования:
1. Объем кода JS+CSS не должен превышать 20 Кб (в читабельном виде).
2. Совместимость с IE 6 и 7 НЕ НУЖНА (как и с другими древними браузерами).
3. Код не должен мешать индексации картинок ПС.

Требование к всплывающему окну:
1. должно полностью помещаться на экране и подгоняться под размер окна браузера.
2. если размер изображения больше размера всплывающего окна, должна появляться кнопка или ссылка «полный размер», которая откроет изображение в новой вкладке браузера.
3. должно исчезать при повторном клике мышкой на окне.
4. при наведении на изображения должен появляться курсор zoom+ / zoom- .

Сейчас код вывода изображений выглядит так:

<div class=«big_foto»>
<a target="_blank" href='/pp/b/UPP-110S.jpg'><img src="/pp/UPP-110S.jpg" title=«Sony UPP-110S» alt=«Sony UPP-110S»></a>
</div>
<ul class=«little_fotos»>
<li><a class='srh' rel='/pp/UPP-110S_box.jpg' href='pp/b/UPP-110S_box.jpg' target="_blank"><img src='pp/s/UPP-110S_box.jpg' alt=«Sony UPP-110S» title=«Sony UPP-110S» ></a></li>
<li><a class='srh' rel='/pp/upp-110S_3.jpg' href='pp/b/upp-110S_3.jpg' target="_blank"><img src='pp/s/upp-110S_3.jpg' alt=«Sony UPP-110S» title=«Sony UPP-110S» ></a></li>
</ul>

На сервере хранится 3 размера каждого изображения под одним именем, по в разных папках:
pp/b/
pp/
pp/s/