Question

我正在使用Colorbox

http://www.jacklmoore.com/colorbox/

只需尝试一个简单的示例，即可在选择缩略图时从S3加载图像

示例HTML：

<a class="fpg"  href="https://s3.amazonaws.com/bucket/image"  ><img src="https://s3.amazonaws.com/bucket/image"  /></a>

示例Javascript：

 $(".fpg").colorbox({ rel:'fpg',current:false});

缩略图加载正常。但是当我点击拇指并且颜色框开始加载真实的S3图像时，我收到了这个错误。

No 'Access-Control-Allow-Origin' header is present on the requested resource.

我在本地服务器上运行它。

所以我将S3存储桶的CROS配置更改为默认值

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

现在，当我在colorbox中加载图像时，它只会加载一大堆二进制文件。我可以看到PNG IHDR，我认为它是二进制文件的一部分。

有人知道如何正确加载S3图像吗？

由于

Answer 1

我想现在已经晚了，但今天我有一个类似的问题，我通过使用html属性解决了，添加如下设置：

 html:'<img src="'+$(this).attr('href')+'">'

构建彩盒时。

你只是告诉用html填充预览，当然你需要保留你想要应用colorbox的引用来结束像

这样的事情。

$('.classIwantToApplyColorboxTo').each(function(){
$(this).colorbox({
html:'<img src="'+$(this).attr('href')+'">'
               });
});

这个技巧甚至可以解决XMLHttpRequest错误。

Jquery Colorbox显示的是Amazon S3图像的二进制文件而不是实际图像

1 个答案: