Skip to content

Commit

Permalink
Added experimental iframe auto-height feature
Browse files Browse the repository at this point in the history
  • Loading branch information
@fancyapps
fancyapps committed Dec 29, 2011
1 parent 76fab2e commit 842a307
Show file tree
Hide file tree
Showing 2 changed files with 106 additions and 53 deletions.
121 changes: 87 additions & 34 deletions source/jquery.fancybox.js
View file
Original file line number Original file line Diff line number Diff line change
@@ -1,6 +1,6 @@
/*! /*!
* fancyBox - jQuery Plugin * fancyBox - jQuery Plugin
* version: 2.0.4 (28/12/2011) * version: 2.0.4 (29/12/2011)
* @requires jQuery v1.6 or later * @requires jQuery v1.6 or later
* *
* Examples at http://fancyapps.com/fancybox/ * Examples at http://fancyapps.com/fancybox/
Expand Down Expand Up @@ -70,7 +70,7 @@
tpl: { tpl: {
wrap: '<div class="fancybox-wrap"><div class="fancybox-outer"><div class="fancybox-inner"></div></div></div>', wrap: '<div class="fancybox-wrap"><div class="fancybox-outer"><div class="fancybox-inner"></div></div></div>',
image: '<img class="fancybox-image" src="{href}" alt="" />', image: '<img class="fancybox-image" src="{href}" alt="" />',
iframe: '<iframe class="fancybox-iframe" name="fancybox-frame{rnd}" frameborder="0" hspace="0" ' + ($.browser.msie ? 'allowtransparency="true""' : '') + ' scrolling="{scrolling}" src="{href}"></iframe>', iframe: '<iframe class="fancybox-iframe" name="fancybox-frame{rnd}" frameborder="0" hspace="0" ' + ($.browser.msie ? 'allowtransparency="true""' : '') + '></iframe>',
swf: '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%"><param name="wmode" value="transparent" /><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="{href}" /><embed src="{href}" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="100%" height="100%" wmode="transparent"></embed></object>', swf: '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%"><param name="wmode" value="transparent" /><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="{href}" /><embed src="{href}" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="100%" height="100%" wmode="transparent"></embed></object>',
error: '<p class="fancybox-error">The requested content cannot be loaded.<br/>Please try again later.</p>', error: '<p class="fancybox-error">The requested content cannot be loaded.<br/>Please try again later.</p>',
closeBtn: '<div title="Close" class="fancybox-item fancybox-close"></div>', closeBtn: '<div title="Close" class="fancybox-item fancybox-close"></div>',
Expand Down Expand Up @@ -317,12 +317,10 @@
if (F.isOpen) { if (F.isOpen) {
// It's a very bad idea to attach handlers to the window scroll event, run this code after a delay // It's a very bad idea to attach handlers to the window scroll event, run this code after a delay
if (!didResize) { if (!didResize) {
resizeTimer = setInterval(function () { resizeTimer = setTimeout(function () {
if (didResize) { if (didResize) {
didResize = false; didResize = false;


clearTimeout(resizeTimer);

if (F.current) { if (F.current) {
if (F.current.autoSize) { if (F.current.autoSize) {
F.inner.height('auto'); F.inner.height('auto');
Expand Down Expand Up @@ -657,7 +655,7 @@
})); }));
}, },


_preload : function() { _preload: function() {
var group = F.group, var group = F.group,
index = F.current.index, index = F.current.index,
load = function(href) { load = function(href) {
Expand Down Expand Up @@ -708,22 +706,10 @@


F._setContent(); F._setContent();


//Give a chance for helpers or callbacks to update elements
F.trigger('beforeShow');

//Set initial dimensions and hide
F._setDimension();

F.wrap.hide().removeClass('fancybox-tmp');

F.bindEvents();
F._preload();

F.transitions[ F.isOpened ? F.current.nextMethod : F.current.openMethod ]();
}, },


_setContent: function () { _setContent: function () {
var content, loadingBay, current = F.current, var content, loadingBay, iframe, current = F.current,
type = current.type; type = current.type;


switch (type) { switch (type) {
Expand All @@ -745,7 +731,7 @@
} }


if (current.autoSize) { if (current.autoSize) {
loadingBay = $('<div class="fancybox-tmp"></div>').appendTo($("body")).append(content); loadingBay = $('<div class="fancybox-tmp"></div>').appendTo('body').append(content);


current.width = loadingBay.outerWidth(); current.width = loadingBay.outerWidth();
current.height = loadingBay.outerHeight(true); current.height = loadingBay.outerHeight(true);
Expand All @@ -766,18 +752,81 @@
case 'swf': case 'swf':
content = current.tpl.swf.replace(/\{width\}/g, current.width).replace(/\{height\}/g, current.height).replace(/\{href\}/g, current.href); content = current.tpl.swf.replace(/\{width\}/g, current.width).replace(/\{height\}/g, current.height).replace(/\{href\}/g, current.href);
break; break;

case 'iframe':
content = current.tpl.iframe.replace('{href}', current.href).replace('{scrolling}', current.scrolling).replace('{rnd}', new Date().getTime());
break;
} }

if (type === 'image' || type === 'swf') {
current.autoSize = false;
current.scrolling = 'visible';

} else if (type === 'iframe' ) {
current.scrolling = 'auto';

content = $(current.tpl.iframe.replace('{rnd}', new Date().getTime()) ).attr({
'scrolling' : current.scrolling,
'src' : current.href
})
.appendTo( F.inner );

// Set auto height for iframes
if (current.autoSize) {
F.wrap.width( current.width );

F.showLoading();

content.data('ready', false).bind('load', function() {
var iframe = $(this),
height;

try {
if (this.contentWindow.document.location) {
height = iframe.contents().find('body').height() + 12;

iframe.height( height );
}

} catch (e) {
current.autoSize = false;
}

if (iframe.data('ready') == false) {
F.hideLoading();


if ($.inArray(type, ['image', 'swf', 'iframe']) > -1) { if (height) {
current.autoSize = false; F.current.height = height;
current.scrolling = type === 'iframe' ? 'auto' : 'visible'; }

F._beforeShow();

iframe.data('ready', true);

} else if (height) {
F.update();
}
});

return;
}

} else {
F.inner.append(content);
} }


F.inner.append(content); F._beforeShow();
},

_beforeShow : function() {
//Give a chance for helpers or callbacks to update elements
F.trigger('beforeShow');

//Set initial dimensions and hide
F._setDimension();

F.wrap.hide().removeClass('fancybox-tmp');

F.bindEvents();
F._preload();

F.transitions[ F.isOpened ? F.current.nextMethod : F.current.openMethod ]();
}, },


_setDimension: function () { _setDimension: function () {
Expand All @@ -788,28 +837,32 @@
viewport = F.getViewport(), viewport = F.getViewport(),
margin = current.margin, margin = current.margin,
padding2 = current.padding * 2, padding2 = current.padding * 2,
width = current.width + padding2, width = current.width,
height = current.height + padding2, height = current.height,
ratio = current.width / current.height,

maxWidth = current.maxWidth, maxWidth = current.maxWidth,
maxHeight = current.maxHeight, maxHeight = current.maxHeight,
minWidth = current.minWidth, minWidth = current.minWidth,
minHeight = current.minHeight, minHeight = current.minHeight,
ratio,
height_, height_,
space; space;


viewport.w -= (margin[1] + margin[3]); viewport.w -= (margin[1] + margin[3]);
viewport.h -= (margin[0] + margin[2]); viewport.h -= (margin[0] + margin[2]);


if (width.toString().indexOf('%') > -1) { if (width.toString().indexOf('%') > -1) {
width = ((viewport.w * parseFloat(width)) / 100); width = (((viewport.w - padding2) * parseFloat(width)) / 100);
} }


if (height.toString().indexOf('%') > -1) { if (height.toString().indexOf('%') > -1) {
height = ((viewport.h * parseFloat(height)) / 100); height = (((viewport.h - padding2) * parseFloat(height)) / 100);
} }


ratio = width / height;

width += padding2;
height += padding2;

if (current.fitToView) { if (current.fitToView) {
maxWidth = Math.min(viewport.w, maxWidth); maxWidth = Math.min(viewport.w, maxWidth);
maxHeight = Math.min(viewport.h, maxHeight); maxHeight = Math.min(viewport.h, maxHeight);
Expand Down
Loading

0 comments on commit 842a307

Please sign in to comment.