Галерея fancybox и её зум.

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

Один из таких инструментов Fancybox. Замечательный скрипт для он-лайн галереи.



Понадобилось мне недавно сделать такую штуку: на веб-странице есть несколько галерей, по клику на галерею открывается fancybox и показывает изображения этой гелереи. Изображение подгоняется под размеры браузера. Все это fancybox прекрасно умеет делать.
Но одну штуку он сделать не смог: при наведении мыши на изображение оно должно масштабироваться до своих реальных размеров (если оно было уменьшено), зум ей нужен. Но fancybox зумить не умеет.
Пришлось мне искать замену fancybox-у. Ничего подходящего за час я не нашел, и подумал о скриптах которые можно использовать совместно с fancybox и jquery. Мне подошел скрипт cloud-zoom. С таким названием он просто обязан быть мастером цифрового зума. Использование довольно простое: его вызов подвешивается на событие "onComplete" fancybox-а. И когда fancybox загрузил картинку, cloud-zoom может приступать к своим обязанностям, а именно к зуму.
Вот готовый код:

$(document).ready(function () {
            $("a.catalog_group").fancybox({
                'transitionIn': 'elastic',
                'transitionOut': 'elastic',
                'speedIn': 600,
                'speedOut': 200,
                'overlayShow': true,
                'overlayColor': '#000',
                'onComplete': function (arg, cur) {
                    $('#fancybox-img').wrap(
                        $('<a>')
                        .attr('href', $(arg[cur]).attr('href'))
                        .addClass('cloud-zoom')
                        .attr('rel', "position: 'inside'")
                    );
                    $('.cloud-zoom').CloudZoom();
                }
            });

        });

Все интересное находится в этих строках:

'onComplete': function (arg, cur) {
                    $('#fancybox-img').wrap(
                        $('<a>')
                        .attr('href', $(arg[cur]).attr('href'))
                        .addClass('cloud-zoom')
                        .attr('rel', "position: 'inside'")
                    );
                    $('.cloud-zoom').CloudZoom();
                }

arg[cur] это картинка галереи, которую fancybox показывает в данный момент, а cloud-zoom должен её масштабировать принаведении курсора.

Вроде бы все просто, но если у кого-нибудь есть вопросы - не стесняйтесь, спрашивайте.