CODEWITHSUNDEEP
jqueryjquery-uifancyboxfancybox-2
Walter Stolz
Walter Stolz

Reputation: 51

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

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?

Upvotes: 1

Views: 1328

Answers (1)

JFK
JFK

Reputation: 41143

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

Upvotes: 2

Related Questions