Hello guys, 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 hiding the link for the fancybox, which you can see in the <a> tag, then using javascript to click on it automaticaly.
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.
Here is the code I am using to display the ERROR message.
Can someone please show me what I am doing wrong here? Thank you!
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 hiding the link for the fancybox, which you can see in the <a> tag, then using javascript to click on it automaticaly.
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.
PHP Code:
<!-- 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>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
Here is the code I am using to display the ERROR message.
PHP Code:
<!-- 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>
<script type="text/javascript">
document.getElementById("errorLink").click();
</script>