1

我知道我可以使用 frameWidth 和 frameHeight 选项来控制内联和 iframe 内容的帧大小，但是在显示图像时如何手动控制帧大小？

我的问题是我想在一个花式框中显示的图像是非常水平的，而不是垂直的；fancybox 对其进行缩放，因此灯箱非常宽且不是很高，这意味着您根本看不到图像。

我想要的是让图像在灯箱中水平滚动。（不，我不能改变图像）。

有什么想法吗？

FancyBox 网站

4

4 回答 4

3

您可以通过修改 CSS 来使帧大小相对于图像的大小进行调整。

要覆盖插件创建的宽度和高度声明，请添加：

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

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

position:absolute并删除#fancybox-inner

于 2010-03-16T14:28:51.420 回答
3

我最终只是破解了 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,
   ...
}

奇迹般有效。

于 2009-10-12T14:51:54.233 回答
2

我自己也遇到了这个问题，并编写了一些代码来解决这个问题，以便根据我找到的现有片段嵌入新的 Vimeo IFRAME 视频。这将允许您逐个花式框添加 WIDTH 和 HEIGHT 的 URL 参数。如果您不添加它们，默认情况下将打开一个高度为 90% 和 90% 的 IFRAME。

(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>

我希望这可以帮助某人！

于 2010-12-06T18:33:26.707 回答
0

将图像包装在 div 中（如果它是内联的），或者如果您使用 ajax 加载，则将其包装在页面中。然后，将 div 上的样式设置为 iframe 的宽度，并将溢出 css 属性设置为溢出：滚动；

于 2009-08-11T16:19:14.950 回答