//////////////////////////////////////////////////// // jQuery Tools overlay effect: autoiframe // Adding this effect will read the target for an // href attribute and open the link in an iframe // in a jQuery Tools overlay, and automatically // resizes and repositions to fit. // Written by Mathieu Bouchard (c) 2010 //////////////////////////////////////////////////// $( document ).ready( function() { if( window.parent.document === document ) { if( $( "#autoiframe" ).length === 0 ) { $( "body" ).append( $( "<div id='autoiframe' style='display:none; z-index:10000; position:absolute; width:30px; height:30px;'><div class='iframe' /></div>" ) ); } } }); $.tools.overlay.addEffect( "autoiframe", function( position, done ) { var conf = this.getConf(); var overlay = this.getOverlay(); var trigger = this.getTrigger(); var iframe = $( "<iframe frameborder='0' scrolling='auto' style='display:none; width:100%; background-color:inherit;' />" ); var autoiframe = $.tools.overlay.autoiframe; autoiframe.setOriginalCSS( { width: overlay.css( "width" ), height: overlay.css( "height" ), left: overlay.css( "left" ), top: overlay.css( "top" ) } ); $( ".iframe", overlay ).append( iframe ); iframe.attr( "src", trigger.attr( "href" ) ); iframe.load( function() { autoiframe.setDocuments( this.contentWindow.document, document ); if( $( "body > img", this.contentWindow.document ).length === 1 && $( "body > *", this.contentWindow.document ).length === 1 ) { if( $.browser.mozilla ) { this.contentWindow.document.write( "<html><head><title>" + $( this ).attr( "src" ) + "</title></head><body style='margin:0;padding:0;'><img src='" + $( this ).attr( "src" ) + "' /></body></html>" ); } else if( $.browser.msie ) { $( "body", this.contentWindow.document ).css( { padding: "0px", margin: "0px" } ); } } autoiframe.show(); autoiframe.autoResize(); autoiframe.autoPosition(); }); $( ".close", overlay ).css( { position: "absolute", cursor: "pointer", zIndex: 10001, display: "none" }); position = trigger.offset(); //if( parseInt( autoiframe.getOriginalCSS( "top" ) ) !== 0 ) position.top = autoiframe.getOriginalCSS( "top" ); //if( parseInt( autoiframe.getOriginalCSS( "left" ) ) !== 0 ) position.left = autoiframe.getOriginalCSS( "left" ); overlay.css( position ).fadeIn( conf.speed, function() { done.call(); }); }, function( done ) { var conf = this.getConf(); var overlay = this.getOverlay(); var trigger = this.getTrigger(); var iframe = overlay.find( "iframe" ); var autoiframe = $.tools.overlay.autoiframe; overlay.fadeOut( conf.closeSpeed, function() { iframe.remove(); overlay.css( { height: autoiframe.getOriginalCSS( "height" ), width: autoiframe.getOriginalCSS( "width" ) } ); done.call(); }); } ); $.tools.overlay.autoiframe = function() { var innerDocument; var outerDocument; var api; var overlay; var conf; var trigger; var iframe; var close; var originalCSS; var setup = function( innerDoc, outerDoc ) { innerDocument = innerDoc; outerDocument = outerDoc; api = $( "*[rel=#autoiframe]", outerDocument ).data( "overlay" ); overlay = api.getOverlay(); conf = api.getConf(); trigger = api.getTrigger(); iframe = overlay.find( "iframe" ); close = overlay.find( ".close" ); $( window.top ).resize( function() { if( overlay.is( ":visible" ) ) reposition(); }); $( window.top ).scroll( function() { if( overlay.is( ":visible" ) ) reposition(); }); return this; }; var show = function() { iframe.show(); close.show(); }; var resize = function( width, height ) { var maxHeight = parseInt( iframe.css( "max-height" ) ); var maxWidth = parseInt( iframe.css( "max-width" ) ); var windowHeight = $( window ).height(); var windowWidth = $( window ).width(); maxHeight = maxHeight > windowHeight ? windowHeight : maxHeight; maxWidth = maxWidth > windowWidth ? windowWidth : maxWidth; height = height > maxHeight ? maxHeight : height; width = width > maxWidth ? maxWidth : width; var left = ( $( window ).width() - width ) / 2; var top = ( $( window ).height() - height ) / 2; iframe.width( width ); iframe.height( height ); overlay.animate( { height: height, width: width, left: left, top: top }, { duration: 250, queue: false } ); return this; }; var reposition = function() { var top = Math.max( ( $( window.top ).height() - $( iframe ).height() ) / 2, 12 ); var left = ( $( window.top ).width() - $( iframe ).width() ) / 2; top += $( window.top ).scrollTop(); overlay.animate( { top: top, left: left }, { duration: 250, queue: false, easing: "swing" } ); }; return { setDocuments: function( innerDoc, outerDoc ) { return setup( innerDoc, outerDoc ); }, show: function() { show(); }, autoResize: function() { var width = $( innerDocument ).width(); var height = $( innerDocument ).height(); return resize( width, height ); }, autoPosition: function() { return reposition(); }, setOriginalCSS: function( data ) { if( originalCSS === undefined ) { originalCSS = data; } }, getOriginalCSS: function( key ) { return originalCSS[ key ]; } }; }();