Using FancyBox as an Error or Success Message without clicking on a link.

Using FancyBox as an Error or Success Message without clicking on a link.

I would like to use fancybox as an Error and Success Message indication withouth clicking on a link.
 
Scenario:
A user fills out an HTML form and if some things are wrong, they see a fancybox image that is an Error. If they filled out the HTML form correctly, they see a fancybox image that is a Success message.
 
 
I am close to getting this working, but there is a bug where the image does not show up as a fancybox, it is just the image on a blank white page.
 
 
Here is my Code. These includes are in the correct directories.
 
  1. <!-- Add fancyBox -->
    <link rel="stylesheet" href="js/fancybox/source/jquery.fancybox.css?v=2.1.4" type="text/css" media="screen" />
    <script type="text/javascript" src="js/fancybox/source/jquery.fancybox.pack.js?v=2.1.4"></script>

  2. <script type="text/javascript">
     $(document).ready(function() {
      $(".fancybox").fancybox();
     });
    </script>



Here is the code I am using to display the ERROR message.
 
  1. <!-- FancyBox Error Page -->
    <a id="errorLink" class="fancybox" hidden="true" href="images/panel/adv-trigger.png"><img src="images/panel/adv-trigger.png" alt="" /></a>
  2.  <script type="text/javascript">
    document.getElementById("errorLink").click();
    </script>

Can someone please show me what I am doing wrong here? Thank you!