Search code examples
jqueryhtmlcssfancybox

Fancybox Automatic popup


I downloaded Fancybox from net and am working on it.

<script type="text/javascript">
    $(document).ready(function() {
        /*
         *  Simple image gallery. Uses default settings
         */

        $('.fancybox').fancybox();

        $("#fancybox-manual-b").click(function() {
            $.fancybox.open({
                href : 'contact.php',
                type : 'iframe',
                padding : 5
            });
        });

    });
</script>
<style type="text/css">
    .fancybox-custom .fancybox-skin {
        box-shadow: 0 0 50px #222;
    }
</style>

    <a class="fancybox fancybox.iframe" href="contact.php">Subscribe</a>

It's working well when you click the link. But now i need it to automatically pop-up when someone logs into the homepage. Can anyone help with the solution


Solution

  • Fancybox does not directly support a way to automatically launch. The work around I was able to get working is creating a hidden anchor tag and triggering it's onclick event. Make sure your call to trigger the onclick event is included after the jquery and fancybox js files are included. The code I used is as follows:

    This sample script is embedded directly in the html, but it could also be included in a js file.

    <script type="text/javascript">
        $(document).ready(function() {
            $("#hidden_link").fancybox().trigger('click');
        });
    </script>
    

    Border Color

    Personally I do it from fancybox's css file, you should look for

    #fancybox-content

    and

    .fancybox-outer

    and change it's background-color or border color as per your demand.

    Hope it works for you.