Tuesday 9 June 2009

JQuery Fancy Box AutoClose, Auto Close Fancy Box, Auto Closing of Fancy Box iframe

Sample Code for Auto Close of Fancy Box ( JQuery Fancy Box AutoClose )

1. The parent page(file) from where the Fancy Box is called as;

-----parent.html---------
===================================
< type="text/javascript">
$().ready(function(){
'hideOnContentClick': true,'callbackOnShow': autoClose });
$("a.uploadVideo").fancybox({'frameWidth': 400, 'frameHeight':160});
});

< /script>

< type="text/javascript" src="http://localhost/test/jscripts/jquery.js">< /script>
< type="text/javascript" src="http://localhost/test/jscripts/jquery.fancybox/jquery.fancybox-1.2.1.pack.js">< /script>

<>
function triggerClose(){
var el = $("#fancyCloseId");
el.bind("click", $.fn.fancybox.close);
el.trigger('click');
}

function autoClose(){
setTimeout("triggerClose()",1000);
}
< /script>


<>
< class="iframe uploadVideo" href="iframepage.html?ie=UTF-8&aid=video">Video< /a>

< id="fancyCloseId">< /div < /body >


2. The Child ( or Light box) page included the following code.

===========================================
iframepage.html page
-----------------------

< type="text/javascript" src="http://localhost/test/jscripts/jquery.js">< /script>
< type="text/javascript" src="http://localhost/test/jscripts/jquery.fancybox/jquery.fancybox-1.2.1.pack.js">< /script>

<>
...........message here........
< /body>

$(function(){
if(typeof(parent.autoClose)=="function"){
parent.autoClose();
}
else {alert("Function not found")};
});
< / script >

Use the following code for JQuery Fancy Box Auto Close(Auto Close Fancy Box).

1 comment:

Please post any queries and comments here.