Search code examples
jquerycolorbox

Open jQuery ColorBox automatically on page load


I have used the colorbox jQuery lightbox for my lightbox. But in that one should click the button. I want automatically popup whenever the window is loaded.

My code for light box is

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
        <script src="../jquery.colorbox.js"></script>
        <script>
            $(document).ready(function(){
                $(".ajax").colorbox();
            });
        </script>
    </head>
    <body>

        <h2>Other Content Types</h2>
        <p><a class='ajax' href="../content/daisy.jpg" title="Homer Defined">Outside HTML (Ajax)</a></p>
</html>

Now I want to an automatic popup when the window is loaded.


Solution

  • With the latest version of ColorBox, you use $.colorbox({inline:true, href:".ajax"});

    Working demo: http://jsfiddle.net/34v22/

    I also cleaned up your code a bit:

    <!doctype html>
    <head>
        <title>My Automatic ColorBox</title>
        <link rel="stylesheet" type="text/css" href="../link/to/jquery.colorbox.css">
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
        <script type="text/javascript" src="../jquery.colorbox.js"></script>
        <script>$(document).ready(function(){$.colorbox({inline:true, href:".ajax"});});</script>
    </head>
    <body>
        <h2>Other Content Types</h2>
        <div class='ajax' style='display:none'><a href="../content/daisy.jpg" title="Homer Defined">Outside HTML (Ajax)</a></div>
    </body>