jquery - How to make resizable Fancybox v2 image and border change size together? -
i'm trying create resizable fancybox v2 window using jquery ui.
the thing happens - change 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 force image change size border?
jquery ui resizable widget includes alsoresize
option bind resizable .fancybox-wrap
selector , alsoresize
.fancybox-inner
, .fancybox-image
selectors :
$(".fancybox").fancybox({ arrows: false, autoresize: false, aftershow: function () { $('.fancybox-wrap').resizable({ alsoresize: ".fancybox-inner, .fancybox-image" }); } });
see jsfiddle
Comments
Post a Comment