Question

我正在尝试使用jQuery UI创建可调整大小的Fancybox v2窗口。

唯一发生的事情是分别更改图像大小或边框大小。

HTML：

<a rel="gallery" title="Image" class="fancybox" href="http://fancyapps.com/fancybox/demo/2_b.jpg"><img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt=""/></a>

可调整大小的图片： http://jsfiddle.net/g2pjR/

JS：

$(".fancybox").fancybox({
    arrows: false,
    autoResize: false,
    afterShow: function () {$('.fancybox-image').resizable();}    
});

可调整大小的边框： http://jsfiddle.net/HrVKa/

JS：

$(".fancybox").fancybox({
    arrows: false,
    autoResize: false,
    afterShow: function () {$('.fancybox-skin').resizable();}    
});

如何强制图像与边框一起改变大小？

Answer 1

jQuery UI Resizable Widget包含alsoResize选项，因此您可以将可调整大小绑定到.fancybox-wrap选择器，alsoResize绑定到.fancybox-inner和{{ 1}}选择器如：

.fancybox-image

参见 JSFIDDLE

如何制作可调整大小的Fancybox v2图像和边框更改大小？

1 个答案: