Greybox Images Not Loading possible URL issue?
I am trying to use Greybox and I am getting frustrated with it not finding my images that I wish to display. I think it may have to do with relative URLs and not pointing in the right spot. But I am not certain. I feel like I have tried every possible URL combination.
Is this the issue, or am I missing something entirely?? I have read the FAQ on Greybox here: http://orangoo.com/labs/GreyBox/FAQ/ but it didn't really offer me a solution.
I would be very grateful for any assistance. Thanks.
Note: Looks like the server is case sensitive.
URL to the page in question is: http://www.ecometrix.ca/refresh/emma.html Images are located: /refresh/emma/images/ Images are labeled: screen01.jpg, screen02.jpg, screen03.jpg etc.
Here is the greybox content in the header of my HTML:
<script type="text/javascript">
var GB_ROOT_DIR = "http://www.ecometrix.ca/refresh/greybox/";
</script>
<script type="text/javascript" src="greybox/AJS.js"></script>
<script type="text/javascript" src="greybox/AJS_fx.js"></script>
<script type="text/javascript" src="greybox/gb_scripts.js"></script>
<link href="greybox/gb_styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/refresh/banner/Scripts/AC_RunActiveContent.js"></script>
Here is the image set that I have defined (Now using absolute URLs):
<script type="text/javascript">
var image_set = [{'caption': 'Screenshot 1', 'url': 'http://www.ecometrix.ca/refresh/images/screen01.jpg'},
{'caption': 'Screenshot 2', 'url': 'http://www.ecometrix.ca/refresh/images/screen02.jpg'},
{'caption': 'Screenshot 3', 'url': 'http://www.ecometrix.ca/refresh/images/screen03.jpg'},
{'caption': 'Screenshot 4', 'url': 'http://www.ecometrix.ca/refresh/images/screen04.jpg'},
{'caption': 'Screenshot 5', 'url': 'http://www.ecometrix.ca/refresh/images/screen05.jpg'}];
</script>
Here is the anchor tag in the HTML:
<a href="" class="emmalink" onclick="return GB_showImageSet(image_set, 1)">Screenshots</a>
EDIT: Here's the code that works for me:
In between the and tags:
<script type="text/javascript">
var GB_ROOT_DIR = "http://www.ecometrix.ca/refresh/greybox/";
</script>
<script type="text/javascript" src="http://www.ecometrix.ca/refresh/greybox/AJS.js"></script>
<script type="text/javascript" src="http://www.ecometrix.ca/refresh/greybox/AJS_fx.js"></script>
<script type="text/javascript" src="http://www.ecometrix.ca/refresh/greybox/gb_scripts.js"></script>
<link href="http://www.ecometrix.ca/refresh/greybox/gb_styles.css" rel="stylesheet" type="text/css" />
And
<script type="text/javascript">
var image_set = [{'caption': 'Screenshot 1', 'url': 'http://www.ecometrix.ca/refresh/emma/images/screen01.jpg'},
{'caption': 'Screenshot 2', 'url': 'http://www.e开发者_C百科cometrix.ca/refresh/emma/images/screen02.jpg'},
{'caption': 'Screenshot 3', 'url': 'http://www.ecometrix.ca/refresh/emma/images/screen03.jpg'},
{'caption': 'Screenshot 4', 'url': 'http://www.ecometrix.ca/refresh/emma/images/screen04.jpg'},
{'caption': 'Screenshot 5', 'url': 'http://www.ecometrix.ca/refresh/emma/images/screen05.jpg'}];
</script>
In the body:
<a href="" class="emmalink" onclick="return GB_showImageSet(image_set, 1)">Screenshots</a>
Here's the code that works for me:
In between the <head> and </head> tags:
<script type="text/javascript">
var GB_ROOT_DIR = "http://www.yourabsolute.url/including/filepath/to/greybox/";
</script>
<script type="text/javascript" src="/filepath/to/greybox/AJS.js"></script>
<script type="text/javascript" src="/filepath/to/greybox/AJS_fx.js"></script>
<script type="text/javascript" src="/filepath/to/greybox/gb_scripts.js"></script>
<link href="/filepath/to/greybox/gb_styles.css" rel="stylesheet" type="text/css" />
And
<script type="text/javascript">
var image_set = [{'caption': 'This is the image caption displayed.', 'url': 'http://www.yourabsolute.url/including/filepath/to/greybox/your_image01.jpg'},
{'caption': 'This is the second image caption displayed.', 'url': 'http://www.yourabsolute.url/including/filepath/to/greybox/your_image02.jpg'}];
</script>
After the <body> tag:
Click Here to launch Greybox.
Note: There seems to be a bug with Greybox v.5.54 in that images don't always load on the first try. It just displays the greybox correctly but with no content. If you close the greybox that you launched the first time, and try click on the link one more time before refreshing the page, greybox will launch correctly. Including all appropriate content.
Install: Installing Greybox v5.53 instead of v5.54 seems to have solved the issue of the images not loading on the first try. Hope this helps.
加载中,请稍侯......
精彩评论