Скрипт цивильного открытия картинок Lightbox

Прочесывание просторов интернета выдало кучу разнообразных эффектов открытия фото во всплывающем окне - все пляшет, летает, меняет свои размеры на экране. Но, надо понимать, что не попуасы мы - нахера нам все эти бусы, от которых устаешь уже на просмотре 5й фотографии, причем размер загружаемого скрипта имеет прямое отношение к скорости загрузки страницы. Если сама страница 100кб, нахер нужен скрипт, который еще 100-120кб? Это же увеличение времени загрузки сайта в 2 раза!

По ходу дела решение красивого открытия фото во всплывающем окне типа Lightbox найдено, допилено, и приколхожено ко всем компонентам сайта Joomla! (AdsManager, JoomGallery, JoomShopping и форуму SMF) причем само решение открытия фото и картинок во всплывающем окне весит всего аж ..... 10кб! Ощутите разницу!

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

Скачиваем сам lightbox скрипт lightbox и распаковываем в папку:
site.ru\templates\lightbox\

Открываем файл шаблона /templates/папка шаблона сайта/index.php и подключаем скрипт js и стили css:

находим:

добавляем после:

Открываем файл стиля template.css и внизу добавляем следующие стили:

/*LIGHTBOX*/
 #lightbox{background-color:#EEEEEE;padding:10px;border-bottom:2px solid #666666;border-right:2px solid #666666;}
 #lightboxDetails{font-size:0.8em;padding-top:0.4em;}
 #lightboxCaption{float:left;}
 #keyboardMsg{float:right;}
 #closeButton{top:5px;right:5px;}
 #lightbox img{border:none;clear:both;}
 #overlay img{border:none;}
 #overlay{background-image:url(/templates/lightbox/overlay.png);}
/*END LIGHTBOX*/

Все - теперь можно использовать lightbox скрипт!
  Картинки в материале должны быть офомлены c использованием тега data-fancybox, а полный код с title и alt будет такой:

А вот результат действия скрипта lightbox открытии картинок во всплывающем окне: