Shadowbox(Image gallery plugin) shows black window only

Question

I'm trying to create an image gallery using Shadowbox plugin(http://www.shadowbox-js.com).
So I got a problem with creating the gallery, That problem is: whenever I click on the link(actually thumbnail) that displays the image it starts loading then no image is displayed only a black window.
The links I use:

<a href="http://localhost/myProject/images/10.jpg" rel="shadowbox"><img src="http://localhost/myProject/thumbnails/10.jpg" class="thumbnails"/></a>

The script/link/init :
These imports are working, I verify it by using(in Chrome) Inspect element->Network.

<link rel="stylesheet" type="text/css" href="shadowbox/shadowbox.css">
<script type="text/javascript" src="shadowbox/shadowbox.js"></script> 
<script type="text/javascript">
        Shadowbox.init();
</script>

notes:
1-I'm using Shadowbox as a jQuery plugin(NOT standalone).
2-jQuery is imported to my website using Google(NOT locally).
3-The real image size is 3000x2400.
Edit:
4- I realized that when right clicking->inspect element(in chrome) , the image is shown(but not in a proper way, only half of it is shown).
5-when setting handleOversize to drag the image is shown(Must click).
6-It is working in IE 9!.

Answer 1

I found the solution, It wasn't in the DOCTYPE or the browser or even my JS code!
The problem was in the CSS.
Setting the direction to right to left(rtl)(yes, the website is Arabic).
caused the images to be hidden, maybe, because the image went right and I cant see it.

Answer 2

You're saying that the image is not showing properly in the browser?

It may mean that the file is corrupted. Try re-saving it.

I've been using Shadowbox for quite long time now and similar problems were always caused by bad files or the files permissions not been set properly.

Answer 3

Since your providing an example that is local host, I can only offer general guidance and not tell you exactly what the problem is. A link surely would be welcomed.

First, make sure your call to jQuery is before the call to shadowbox.js file.

Other than that I'm sure you've given the webpage a valid !DOCTYPE which makes your Shadowbox markup correct so far as I can see at this point.

The problem could be with using jQuery and your Class Name of thumbnails.

If jQuery has modified the link with a particular style, Shadowbox may be subject to any changes in it's anchor tag.

Those changes then will cause the Shadowbox per link element to not see the original link since it's now a jQuery link. It will need to be re-cached by Shadowbox.

Solution: Try making the call to Shadowbox.init after any modifications to the thumbnail have been completed so Shadowbox caches the link once, or if needed use Shadowbox API .clearCache(); and .setup(); to re-cache those rel anchors.

I should also mention that you should ensure Shadowbox has the jQuery Adapter interface which is a download option or WordPress Plugin option.

Answer 4

Open the shadowbox.css and set direction:ltr for #sb-container

Answer 5

It's an old question but no one answered correctly to this subject. solution is here: just replace "left" values with "right" and "right" values with "left" in shadowbox.css