jquery - 如何使可调整大小的 Fancybox v2 图像和边框一起改变大小？

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选项，因此您可以将resizable绑定到.fancybox-wrap选择alsoResize器.fancybox-inner和.fancybox-image，例如：

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

见JSFIDDLE