content not loading in facebox

Question

I'm having some trouble with facebox and can't seem to find the solution. Anyways, I have everything displayed properly and the images work but my content will not load. When you click the link with the rel="facebox" tag it shows the box but it only displays the loading.gif and none of my content. Does anyone know what is causing this? It is probably something extremely simple but I can't seem to find it in my code. Here is the link to the page: http://www.mcallaro.com/smc/contact.html. Currently I have the content being display:block so you can see it is there but once you close it and click the contact button you will see my issue.

Thanks

Answer 1

I haven't used facebox before, however this is most likely your problem:

<li><a href="#" rel="facebox">Contact Us</a></li>

Your contact link is directing to no where because it has the # symbol with no additional text. The link for facebox works similarly to anchor linking. To make it work you must direct the link to a div within the page. For example:

Your link would look like this:

<a href="#contact" rel="facebox">Contact Us</a><!-- #contact is the id of the div you are linking to -->

Your div within the same page would look like this:

<div id="contact">
   <!-- Your content here -->
</div>

As of right now your link goes no where and you have your contact info within a div with a class name of content.

You actually don't have to have a separate contact us page either. just simply put the contact div within every page your going to have the link and by default it would be hidden until the contact link is clicked.