jQuery Colorbox: AJAX content works fine on localhost; not on remote server
https://stackoverflow.com/questions/1722774
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
I'm using the Colorbox lightbox plugin to display lightboxes with "Outside HTML (Ajax)" on my page. I'm using all defaults from "Example One" (from the website).
Trouble is, the lightbox works flawlessly on my localhost machine, but displays an endless loading graphic when I try it on my remote server.
The page I'm trying to load is in the same directory as the page I'm calling it from, and both are in a folder one level deep from my web root, on my remote server. The path names are all relative.
Now, I know the remote page is loading the remote page, since I can see the XHR request using Safari's Developer panel, and it has all the content of the ajax page in there; Colorbox just isn't displaying it on the page.
As far as I can tell, both my remote server and localhost machine are running the same hosting environment (Apache 2).
Anyone have any ideas as to why it wouldn't be working on my remote server but working fine on my local machine?
PS - For what it's worth, I ran into the same problem using FancyBox & FaceBox
Solution
Check that the page you are fetching is an HTML fragment, not a normal page with <html>, <head> and everything else. ColorBox would probably choke on a full page.
e.g. check the source of the example page used on the official Colorbox site.
OTHER TIPS
Is it trying to load AJAX content from a domain that is different from the domain that your site is hosted on? If so, you might be running into cross-domain XHR issues.
