jQuery Fancybox＆Image Frame Size Control

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

我的问题是，我有图像，我想显示在一个fancybox是非常水平的，并没有太多垂直; fancybox将它缩放，以便灯箱真的很宽而且不很高，这意味着你根本看不到图像。

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

有什么想法？

2009-06-25 neezer

我结束了只是黑客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-12 14:51:54 neezer

包裹在一个div的图像（如果它的在线），或在一个页面，如果您使用的是AJAX负荷。然后，将div上的样式设置为iframs的宽度，并将overflow css属性设置为溢出：scroll;

来源

2009-08-11 16:19:14

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

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

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

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

和#fancybox-inner

来源

2010-03-16 14:28:51 Barry

我有这个问题我自己删除position:absolute，并写一些代码来解决这个嵌入新的Vimeo IFRAME的视频基于我找到的现有片段。这将允许你通过fancybox为fancybox添加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-06 18:33:26

jQuery Fancybox＆Image Frame Size Control

回答

相关问题