Opening fancybox on page load is very simple. just call below given code in document ready eg.
0 1 2 3 4 5 6 7 8 9 10 11 | $(document).ready(function () { $.fancybox({ 'width': '80%', 'height': '80%', 'autoScale': true, 'transitionIn': 'fade', 'transitionOut': 'fade', 'type': 'iframe', 'href': 'http://www.example.com' }); }); |
Whatever property you want to set, you can do here. It will directly call fancybox after getting document ready.
We can do it by alternate way also using hidden anchor tag and triggering ‘click’ on that like the code given below :
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <script type="text/javascript"> $(document).ready(function() { $("#hidden_link").fancybox().trigger('click'); }); </script> or <script> $(document).ready(function () { $("#hidden_link").fancybox({ 'width': '80%', 'height': '80%', 'autoScale': true, 'transitionIn': 'fade', 'transitionOut': 'fade', 'type': 'iframe' }); $("#hidden_link").trigger('click'); }); </script> |
We can opt any of the method according to our requirement and easily open fancybox on page load.
If you are facing any issue regarding fancybox as well as colorbox then post us your query. We will try to provide you a solution as soon as possible.