Fancybox Automatic popup

Question

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 1

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.

Solution 2

This code is working well. I have tested it myself

<script type="text/javascript">
    $(document).ready(function() {
$.fancybox({
                        'width': '40%',
                        'height': '40%',
                        'autoScale': true,
                        'transitionIn': 'fade',
                        'transitionOut': 'fade',
                        'type': 'iframe',
                        'href': 'http://www.example.com'
                    });
 });

N.B: I have tested it with version 2.1.4 You might also try this

$(document).ready(function() {
             $("#fancybox-manual-a").trigger('click');
            });

there is an anchor tag with id fancybox-manual-a