Форма поиска

Не получается?

Не получается решить проблему с Друпалом?

Готовы помочь делом и советом. Стоимость часа - 500 руб.

Запросить помощь

Поделитесь ссылкой:

Как сделать увеличение изображения в fancybox

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

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

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

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

$('a.gallery1').fancybox({
    afterShow: function () {
                // вначале картинка маленькая - назначим курсор zoom-in
                $("img.fancybox-image").css('cursor', 'zoom-in');
                // уменьшим области листания, чтоб не мешали нашему курсору
                $(".fancybox-nav").css('width', '15%');
                $("img.fancybox-image").click(function () {
                  var h = $(this).height();
                  var w = $(this).width();
                  if ($(this).hasClass('enlarged')) {
                    // картинка уже увеличена. уменьшить в два раза. или не в два?  
                    h = Math.round(h / 2); w = Math.round(w/2);
                    $(this).removeClass('enlarged');
                    $(this).css('cursor', 'zoom-in');
                  } else {
                    // еще не увеличена. увеличить в два раза. 
                    h = h*2; w = w*2;
                    $(this).addClass('enlarged');
                    $(this).css('max-height', h + 'px');
                    $(this).css('cursor', 'zoom-out');
                  }
                  // меняем размеры картинки
                  $(this).css('width', w + 'px');
                  $(this).css('height', h + 'px');
                  $(this).css('max-width', w + 'px');
                  $(this).css('max-height', h + 'px');
                  // меняем размеры окна fancybox
                  $('div.fancybox-wrap').css('width', w + 30 + 'px');
                  $('div.fancybox-wrap').css('height', h + 30 + 'px');
                  $('div.fancybox-skin').css('height', h + 'px');
                  // двигаем fancybox так, чтоб он оставался по центру
                  $('div.fancybox-wrap').css('left', Math.round(($(document).width()-w)/2));
                });
    }
});

И все дела.

Разумеется, при генерации кода в CMS надо подумать о том, чтоб размер картинки оказался достаточным для увеличенного формата.

Полезна ли для вас эта информация?: 
5
Ваша оценка: Нет В среднем: 5 (2 голосов)
 

Комментарии

Размещение и поддержка сайтов на Drupal

Предлагаем услуги по размещению и поддержке сайтов, разработанных как в нашем бюро, так в других веб-студиях.

Мы готовы взять на себя все работы по поддержке вашего сайта или электронного магазина и гарантируем его доступность и безопасность.

Подробнее ...

Предметная фотосъемка

Выполним профессиональную фотосъемку вашей продукции, офиса, производства, участка или любых других объектов.

Оплата услуг

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

Оплата услуг