我想使用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" />
答案 0 :(得分:0)
尝试
视图:
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>
答案 1 :(得分:0)
如果正确提供静态文件,并且您可以通过浏览器访问/site_media/photos/photos/acura04_thumbnail_image.jpg
,则表明问题不是thumbs
div中的代码。我不认为panchicore的建议会有所帮助。
之前我没有使用过thickbox,所以我的下一个问题是基于thickbox website上的说明。
您可以发布用于包含脚本和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"
如果那不是问题,那我恐怕我没有想法。