Jquery 将thickbox与imagekit一起使用

我想使用jQuery Thickbox来显示我的图像，但到目前为止，当我点击缩略图时，我得到的只是加载进度条。我已经在下面设置了我的显示器，也许这会有所帮助

<div class="thumbs">
  {% for p in photos %}
    <a href="{{ p.original_image.url }}" title="{{ p.position.position }}" class="thickbox" rel="gallery-vehicle">
       <img src="{{ p.thumbnail_image.url }}" alt="{{ p.position.position }}" />
    </a>
  {% endfor %}
</div>

上述代码的输出为：

<div class="thumbs"> 
   <a href="/site_media/photos/16766966.jpg" title="Front" class="thickbox" rel="gallery-vehicle"> 
      <img src="/site_media/photos/photos/16766966_thumbnail_image.jpg" alt="Front" /> 
   </a>  
   <a href="/site_media/photos/iPPJ3216_1.jpg" title="Side View" class="thickbox" rel="gallery-vehicle"> 
      <img src="/site_media/photos/photos/iPPJ3216_1_thumbnail_image.jpg" alt="Side View" /> 
    </a>            
   <a href="/site_media/photos/2010-acura-mdx-15.jpg" title="Interior" class="thickbox" rel="gallery-vehicle"> 
       <img src="/site_media/photos/photos/2010-acura-mdx-15_thumbnail_image.jpg" alt="Interior" /> 
    </a>     
    <a href="/site_media/photos/acura04.jpg" title="Dashboard" class="thickbox" rel="gallery-vehicle"> 
        <img src="/site_media/photos/photos/acura04_thumbnail_image.jpg" alt="Dashboard" /> 
     </a> 
 </div>

对于js和样式表，我将它们连接起来，如下所示：

<script type="text/javascript" src="/site_media/js/jquery.js"></script>
<script type="text/javascript" src="/site_media/js/thickbox.js"></script>

<link rel="stylesheet" type="text/css" href="/site_media/css/thickbox.css" media="screen" />

试一试

视图：

在模板中始终使用URL_媒体路径，在我的体验中，当img资源返回错误时，勾选框显示永远加载

<div class="thumbs">
  {% for p in photos %}
    <a href="{{ MEDIA_URL }}{{ p.original_image.url }}" title="{{ p.position.position }}"      class="thickbox" rel="gallery-vehicle">
      <img src="{{ p.thumbnail_image.url }}" alt="{{ p.position.position }}" />
    </a>
  {% endfor %}
</div>    

---

如果静态文件被正确提供，并且您可以通过浏览器访问/site\u media/photos/photos/acura04\u thumboil\u image.jpg，那么它表明问题不在于您的thumbs div中的代码。我认为panchicore的建议不会有帮助

我以前没有使用过thickbox，所以我的下一个问题是基于屏幕上的说明

您可以发布用于包含脚本和css的代码吗。应该是这样的

<script type="text/javascript" src="path-to-file/jquery.js"></script>
<script type="text/javascript" src="path-to-file/thickbox.js"></script>

<link rel="stylesheet" href="path-to-file/thickbox.css" type="text/css" 
      media="screen" />

---

如果这不是问题所在，那么恐怕我已经没有主意了。

如果您将html输出添加到问题中，可能会更容易提供帮助。@Alasdair我添加了我的输出您的静态文件服务是否正确？如果你输入你的域名。com/site\u media/../acura.jpg进入您的浏览器，图像是否加载？静态文件是否正确提供…让我从panchicore尝试下面的答案，然后我会看看是否一切正常…您可以将html从浏览器保存到磁盘，并将指向css的所有链接、脚本和图像设置到磁盘上的路径，以查看，如果问题出现在您的代码或开发服务器中。这仍然会给我相同的状态…即使在使用MEDIA\u Url后也没有改变您在访问localhost时看到的内容：/site\u MEDIA/photos/iPPJ3216\u 1.jpg？localhost:/site\u MEDIA/photos/iPPJ3216\u 1.jpg向我显示指定的照片…它对所有其他照片都有效，单击图像链接时，使用firefox的firebug插件观看网络活动，并告诉我们您看到了什么。让我们尝试将library和rel=shadowbox添加到您的链接中，并告诉我们您看到了什么。用法：即使不指定{{MEDIA_URL}}，我也可以访问脚本和css。请查看我的编辑，了解我是如何做到这一点的。对不起，我没有主意了。如果您的代码在Web服务器上，并且您共享了URL，那么我将快速查看它，但目前我想不出任何其他建议。我希望我可以共享URL，但我正在本地运行代码…我想我必须找出问题所在。

<script type="text/javascript" src="path-to-file/jquery.js"></script>
<script type="text/javascript" src="path-to-file/thickbox.js"></script>

<link rel="stylesheet" href="path-to-file/thickbox.css" type="text/css" 
      media="screen" />

src="{{MEDIA_URL}}js/jquery.js"