How to make resizable Fancybox v2 image and border change size together?

Question

I'm trying to create resizable Fancybox v2 window by using jQuery UI.

The only thing that happens - is to change the image size or border size separately.

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>

Resizable image: http://jsfiddle.net/g2pjR/

JS:

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

Resizable border: http://jsfiddle.net/HrVKa/

JS:

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

How to force the image to change its size together with the border?

Those two clips of code here look very similar, is that the intent? (OK, they look to be the same code really) but that is not what the fiddle has — Mark Schultheiss
@Mark Schultheiss Sorry, I misprinted. Now it's changed to the correct version. — Walter Stolz

JFK JFK · Accepted Answer · 2013-07-31T19:33:05

jQuery UI Resizable Widget includes the alsoResize option so you could bind resizable to the .fancybox-wrap selector and alsoResize to .fancybox-inner and .fancybox-image selectors like :

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

See JSFIDDLE

How to make resizable Fancybox v2 image and border change size together?

1 Answers