将thickbox与imagekit一起使用

Question

我想使用 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" />

Answer 1

尝试

查看：

    return render_to_response('album.html',
                          {'photos': photos,
                          context_instance=RequestContext(request))

在模板中始终使用 URL_MEDIA 路径，在我的经验中，当 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>    

Answer 2

如果静态文件服务正确，并且您可以通过浏览器访问 /site_media/photos/photos/acura04_thumbnail_image.jpg，则表明问题不是 中的代码拇指 div。我认为 panchicore 的建议不会有帮助。

我以前没有使用过thickbox，所以我的下一个问题是基于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" />

检查您是否可以通过浏览器访问这些路径。如果文件位于您的媒体文件夹中，您可以在此处使用 {{MEDIA_URL}}。例如，

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

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