Fancybox

Fancybox - весьма современный и удобный скрипт для показа изображений и всего прочего. Но часто изображение в окне оказывается мелким (например - документ) и его неудобно рассматривать.

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

Идея проста: после появления окна fancybox (событие afterShow), навесим обработчик события click на изображение внутри этого окна (img.fancybox-image). В этом обработчике будем менять размеры изображения и двигать fancybox так, что бы он оставался всегда по середине экрана. А для пущей наглядности - поменяем курсор картинки на zoom-in/zoom-out.

Получается так: