Bootstrap 夹层中的旋转木马

Question

我想要 bootstrap 夹层画廊轮播。基本上;我正在拉入所有图像，我想要一行三张图像轮播。这是我非常讨厌的一段代码；我真的很想让它适用于无限数量的图像。

    {% if page.docpage.gallery %}
        <script src="{% static "mezzanine/js/magnific-popup.js" %}"></script>
        <link rel="stylesheet" href="{% static "mezzanine/css/magnific-popup.css" %}">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
          <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
          </ol>
            {% with page.docpage.gallery.gallery.images.all as images %}
          <!-- Wrapper for slides -->
          <div class="carousel-inner" role="listbox">
            {% for image in images %}
                {% cycle '<div class="item active">' '' '' '<div class="item">' '' '' '<div class="item">' '' ''%}
                {% cycle '<div class="gallery row"><div class="col-xs-12 col-sm-12">' '' ''%}
                                <a class="thumbnail" rel="#image-{{ image.id }}" title="{{ image.description }}" href="{{ image.file.url }}">
                                <img class="img-responsive" src="{{ MEDIA_URL }}{% thumbnail image.file 200 200 %}"></a>
                {% cycle '' '' '</div></div></div>'%}
            {% endfor %}

                </div>
          </div>
          {% endwith %}
      {% endif %}

我基本上是循环浏览图像并根据需要添加其他嵌套标签。我也尝试通过 forloop.counter|divisibleby:3 跟踪循环，但我发现关闭的 div 没有被正确应用。

有没有人知道如何在 jinja/django/mezzanine 中完成这项工作？

否则我可以拿出一些 javascript 来完成工作。

谢谢

Answer 1

如您所见，尝试在模板中执行此逻辑并不理想。我建议您在视图函数中执行此操作。沿着这些线的东西：

# Handy function to split a list into equal sized groups,
# See 
def chunker(seq, size):
    return (seq[pos:pos + size] for pos in xrange(0, len(seq), size))

# Split images into groups of three
image_groups = chunker(images, 3)

# Pass image_groups to your template context.
# If in a class based view then you can do this in the
# get_context_data() method.

那么在模板中，事情就简单多了：

{% for group in image_groups %}
    <div class="item {% if forloop.first %}active{% endif %}">
        <div class="gallery row">
            <div class="col-xs-12 col-sm-12">
            {% for image in group %}
                <a class="thumbnail" rel="#image-{{ image.id }}" title="{{ image.description }}" href="{{ image.file.url }}">
                <img class="img-responsive" src="{{ MEDIA_URL }}{% thumbnail image.file 200 200 %}"></a>
            {% endfor %}
            </div>
        </div>
    </div>
{% endfor %}

Bootstrap 夹层中的旋转木马

Bootstrap Carousel in Mezzanine

javascript

django

twitter-bootstrap

mezzanine