Overlay dinamikus méretezése a benne lévő iframe tartalomhoz viszonyítva

Egy nagyon érdekes feladatot kaptam, amely elsőre nagyon egyszerűnek tűnt, viszont a megoldások keresése közben kezdtem rájönni, hogy ez jó kis szavítós feladat.

Olyan overlayt kellett csinálnom, ami nem méreteződik át úgy, hogy a benne lévő tartalmat (képet) átméretezi, illetve az iframe tartalmát scrollolhatóvá teszi. Ez tényleg egyszerűnek tűnik így elsőre :-)

Keresgettem már meglévő megoldásokat: colorbox, lightbox, shadowbox, de egyik sem tudta azt, ami nekem kell. Még opcióban sem volt benne, hogy a méretezést valahogy szabályozzam. Aztán elővettem a fancyboxot, amiben elég sok opció van és tudása is elég korrekt. A sok opció persze elég sok bonyolúltságot tud okozni, és párszor félre is dobtam a billentyűzetet, mire végre megszületett a megoldás, ami egyébként elég nyúlfarknyira sikeredett, na de az oda vezető út... :-)

Lássuk hát a csodát:

$('.itnet-overlay').fancybox({
    type: 'iframe',
    autoSize: false,
    autoResize: false,
    fitToView: false,
    scrolling: 'no',
    'afterLoad': function (current, previous) {
        var element = "#page";
        $('.fancybox-inner').width(0);
        $('.fancybox-inner').height(0);
        current.height = $('.fancybox-iframe').contents().find(element).height();
        current.width = $('.fancybox-iframe').contents().find(element).width();
    }
});

A kódban egyetlen dolgot kell módosítani, az "element" értékét. Ehhez a mérethez fogja igazítani a fancybox az overlay méretét.