jQuery Fancybox & Контроль размера рамки изображения

Question

Я знаю, что могу использовать параметры frameWidth и frameHeight для управления размером кадра для встроенного содержимого и содержимого iframe, но что я могу сделать для ручного управления размером кадра при отображении изображений?

Моя проблема в том, что у меня есть изображения, которые я хочу отобразить в необычной коробке, которые расположены очень горизонтально и не очень вертикально; fancybox масштабирует его так, чтобы лайтбокс был действительно широким и не очень высоким, что означает, что вы действительно не можете видеть изображение вообще.

Мне бы хотелось, чтобы изображение было прокручиваться горизонтально в лайтбоксе. (И нет, я не могу изменить изображения).

Есть мысли?

Сайт FancyBox

Answer 1

В итоге я просто взломал FancyBox и добавил еще одну опцию, чтобы делать то, что я хотел. Вот суть:

if (opts.imgManSize) { 
   _set_content('<img alt="" id="fancy_img" src="'+imagePreloader.src+'" />',opts.imgWidth,imagePreloader.height+20);
} else {
   _set_content('<img alt="" id="fancy_img" src="'+imagePreloader.src+'" />',width,height);
}

...

if (opts.imgManSize) { 
  $("#fancy_content").css('overflow','auto');
}

...

if (opts.imgManSize) { 
  $('#fancy_img').css('width','auto');
}

...

$.fn.fancybox.defaults = {
   ...
   imgManSize:false,
   imgWidth:425,
   imgHeight:355,
   ...
}

Работает как шарм.

Answer 2

Вы можете просто настроить размер кадра в зависимости от размера изображения, изменив CSS.

Чтобы переписать объявления ширины и высоты, которые создает плагин, добавьте:

#fancybox-inner {
    width: auto!important;
    height: auto!important;
}

#fancybox-wrap{
    width: auto!important;
    height: auto!important;
}

и удалите position:absolute в #fancybox-inner

Answer 3

Я сам столкнулся с этой проблемой и написал код, чтобы решить эту проблему для встраивания новых видеороликов Vimeo IFRAME на основе существующего фрагмента, который я нашел. Это позволит вам добавить параметры URL для WIDTH и HEIGHT для fancybox по принципу fancybox. Если вы не добавите их, по умолчанию откроется IFRAME с высотой 90% и 90%.

(function($){ 
    $(function(){
        // Fancybox: IFRAME
        var fancybox_iframe = $('.fancybox-iframe');
        if (fancybox_iframe.length > 0){
            fancybox_iframe.each(function(index){
                // Inline frame width param
                if( $(this).attr('href').match(/width=[0-9]+/i) ){
                    var fWidth = parseInt($(this).attr('href').match(/width=[0-9]+/i)[0].replace('width=',''));
                } else {
                    var fWidth = '90%';
                }
                // Inline frame height param
                if( $(this).attr('href').match(/height=[0-9]+/i) ){
                    var fHeight = parseInt($(this).attr('href').match(/height=[0-9]+/i)[0].replace('height=',''));
                } else {
                    var fHeight = '90%';
                }
                if(window.console&&window.console.log) { 
                    console.log('fWidth #'+index+': '+fWidth); 
                    console.log('fHeight #'+index+': '+fHeight); 
                }
                $(this).fancybox({
                    'titlePosition' : 'inside',
                    'type'              : 'iframe',
                    'autoScale'         : true,
                    'padding'           : '10',
                    'width'             : fWidth,
                    'height'                : fHeight,
                    'centerOnScroll'    : true
                });
            });
        }
    });
})(jQuery);

Чтобы использовать это, вы должны использовать следующее:

<a href="http://player.vimeo.com/video/16429685?color=ffffff&width=800&height=450" class="fancybox-iframe" title="Citizen Schools 101">Inline Vimeo Video</a>

Надеюсь, это кому-нибудь поможет!

Answer 4

Оберните изображение в элемент div (если он встроенный) или на странице, если вы используете загрузку ajax. Затем установите для стиля div ширину ваших iframs и установите для атрибута css переполнения значение overflow: scroll;