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

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.

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> 


---

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

Check the browser js console or error console. In chrome/safari, you find it in Developer Tools, while in firefox you can use Firebug or open the Web Console. That should show any relevant script errors. Are you including a reference to jQuery correctly?

If that doesn't help, any chance of putting up a quick test page on http://jsfiddle.net/ ? You should be able to link to the raw script files on https://github.com/fancyapps/fancyBox.

Yah, all the necessary jQuery files are being included in the right places and are all working.

I will try uploading a sample page.

So you see anything wrong with the code?

Thanks.

It seems to be this javascript that is clicking the link that is making it not working appropriately.

PHP Code:

---

<script type="text/javascript">
document.getElementById("errorLink").click();
</script> 


---

It clicks this link

PHP Code:

---

<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> 


---

But as I said, the image pops up on a blank white page instead of in the Fancybox.

Ok, I have narrowed down the issue and I think I understand it, but I still don't know how to fix it.

The javascript

PHP Code:

---

<script type="text/javascript">
document.getElementById("errorLink").click();
</script> 


---

Is clicking on the Link below as it should. But for some reason, the fancybox "Class" is not being used.

PHP Code:

---

<a id="errorLink" class="fancybox" hidden="true" href="images/panel/adv-trigger.png"><img src="images/panel/adv-trigger.png" alt="" /></a> 


---

Is there a way to use Javascript to click on the link above and have it use the FancyBox Class?

Thanks.

Try changing your click() to the jQuery equivalent. Not sure what effect this would have, though.

JavaScript Code:

$("#errorLink").click();

The fancybox website has some examples to do this: http://fancyapps.com/fancybox/

#12: "Launch fancyBox on page load"

Thanks a lot for the help. I had looked on those pages and just didn't see what I was looking for until you pointed it out.


With some tweaking I got it to work how I wanted it to.

Thanks again.:wave: