Question

朋友，

在我的Django模板中，我使用以下代码显示我的图像：

<article id="originalexample_photos">
   <table>    
      <tr> 
         {% for photo in photos %}      
            <img src="{{ photo.photo.url }}"/>
         {% endfor %}
      </tr>
   </table>
</article>

这项工作正常但现在我想使用Fancybox显示缩略图并点击实际尺寸的图像。

photos字典包含缩略图和实际尺寸图像。我可以通过以下硬编码示例获得我想要的输出。

<a class="fancybox" rel="group" href="IMGP0058_big.jpg"><img src="IMGP0058_small.jpg" alt="Demo1" /></a>

每个缩略图都会被称为something_small.jpg，实际大小的图像将被称为something_big.jpg

所以我认为我需要某种形式的IF statement将图像放在Fancybox锚中的正确位置，但我在Django文档中看到的IF statement的例子都没有出现过接近我要实现的目标。如果我走错了路，哪一套有警钟！

我们非常感谢您构建IF statement或更好的方法的任何帮助。

更新

我希望实现的内容由Fancybox demo Simple image gallery

显示

更新2

以下是使用JFK答案的第一个输出。

     <script>
       var group = [];
    jQuery(document).ready(function ($) {
        $("#originalexample_photos").find("img").each(function (i) {
            var src = $(this).attr("src").split("_");
            var href = src[0] + "_big.jpg";
            var title = $(this).attr("alt");
            group[i] = {href: href, title: title};
            $(this).on("click", function(){
                $.fancybox(group,{
                    index: i
                }); // fancybox
            }); // on
        }); // each
    }); // ready
   </script>

   <article id="originalexample_photos">
      <table>    
         <tr> 
            <img src="/media/images/IMGP0058_small.jpg"/>                   
            <img src="/media/images/IMGP0058_big.jpg"/>
         </tr>
      </table>
   </article>

感谢。

Answer 1

使用sorl-thumbnail

在你的settings.py中：

INSTALLED_APPS = (
    ...
    'sorl.thumbnail'
    ...
)

之后请确保：

如果您不使用南方：

./manage.py syncdb

如果您使用的是南方：

./manage.py schemamigration --initial thumbnail

然后相应地迁移。

在你的模板中：

{% load thumbnail %}

然后在您感兴趣的区域内：

{% thumbnail photo.photo "800x600" as im %}
<a class="fancybox" rel="group" href="{{ photo.photo.url }}"><img src="{{ im.url }}" alt="Demo1" /></a> 
{% endthumbnail %}

您可以在官方文档中找到更多信息： http://sorl-thumbnail.readthedocs.org/en/latest/

Answer 2

如果您的图片遵循以下模式：

something01_small.jpg (thumbnail)
something01_big.jpg (actual size)

something02_small.jpg (thumbnail)
something02_big.jpg (actual size)

... etc.

然后我认为您可以在不更改 django 模板且没有任何IF声明的情况下实现您的目标。

因此，仅显示图像缩略图，您可以使用简单的jQuery初始化，如：

var group = [];
jQuery(document).ready(function ($) {
    $("#originalexample_photos").find("img").each(function (i) {
        var src = $(this).attr("src").split("_");
        var href = src[0] + "_big.jpg";
        var title = $(this).attr("alt");
        group[i] = {href: href, title: title};
        $(this).on("click", function(){
            $.fancybox(group,{
                index: i
            }); // fancybox
        }); // on
    }); // each
}); // ready

参见 JSFIDDLE

如果模板中的语句正确分配缩略图和实际大小的图像以供Fancybox使用

2 个答案: