javascript - 如何从灯箱画廊内触发无限滚动 - Django/FancyBox/Waypoints.js

Question

目标:我正在尝试使用 Django 构建一个具有合理布局、无限滚动和灯箱的照片库应用程序。

我已关注following tutorial对于使用 django 分页和 waypoint.js 的无限滚动，合理的布局使用 Justified Gallery我尝试使用 Fancybox对于灯箱(任何灯箱都可以做到这一点，但我喜欢这个干净的外观)。此时，单独考虑时，每一个都工作正常。

问题:我的照片库包含 100 张图像。在桌面上加载页面时，会加载 36 个缩略图。如果我向下滚动，下一页/缩略图将正确加载。但如果我在滚动之前使用灯箱，我就会被这 36 张图像困住。因此，目前，我主要寻找一种方法来从灯箱画廊内触发页面的延迟加载，而无需退出灯箱并向下滚动。

我发现很多关于将新图像添加到灯箱的 stackoverflow 帖子(这可能是我的下一个挑战，说实话)，但没有太多关于如何从灯箱中调用下一页/图像的信息。

作为某种 js/jQuery 菜鸟，欢迎任何帮助，因为我什至不确定这是否是正确的方法。

在这里，您将找到 gallery.html 页面的模板。这显然不是一个“最小可重现示例”，因为它可能是整个应用程序(如果需要的话仍然可以)，但如果需要，我可以提供更多代码。

{% load static %}

{% block head %}
<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>

<!-- scripts used for the justified layout -->
<link rel="stylesheet" href="{% static 'gallery/justified-gallery/justifiedGallery.min.css' %}">
<script src="{% static 'gallery/justified-gallery/jquery.justifiedGallery.min.js' %}"></script>

<!-- scripts used for the infinite scrolling  -->
<script src="{% static 'gallery/js/jquery.waypoints.min.js' %}"></script>
<script src="{% static 'gallery/js/infinite.min.js' %}"></script>

<!-- scripts used for the lightbox -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css"/>
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
{% endblock %}


{% block content %}
<div style="margin-left: 100px; margin-right: 100px;">
    <div class="infinite-container justified-gallery" id="my_gallery">

        {% for picture in pictures %}
        <div class="infinite-item">
            <a href={{ picture.picture.url }} data-fancybox="gallery">
                <img alt=" caption for image 1" src={{ picture.picture_thumbnail.url }}/>
            </a>
        </div>
        {% endfor %}
    </div>

    <div class="loading" style="display: none;">
        Loading...
    </div>

    {% if page_obj.has_next %}
    <a class="infinite-more-link" href="?page={{ page_obj.next_page_number }}">More</a>
    {% endif %}

</div>
{% endblock %}


{% block script %}
<script>

    // Initialize the justified layout
    $('#my_gallery').justifiedGallery({
        rowHeight: 280,
        lastRow: 'nojustify',
        margins: 20
    });

    var infinite = new Waypoint.Infinite({
        element: $('.infinite-container')[0],
        onBeforePageLoad: function () {
            $('.loading').show();
        },
        onAfterPageLoad: function ($items) {
            $('.loading').hide();

            // re-organize layout after loading
            $('#my_gallery').justifiedGallery('norewind');
        }
    });

</script>{% endblock %} 

ps:这是我的第一篇 stackoverflow 帖子，如果我需要调整任何内容，请随时告诉我 提前致谢

Answer 1

fancybox 提供回调，允许您在工作流程中的任何点执行代码，例如，在加载图像之前/之后，您可以在文档中找到示例 - https://fancyapps.com/fancybox/3/docs/#events

无论如何，100 张图像并不是什么大问题，因为同时存在 3 张幻灯片(当前幻灯片和下一张/上一张幻灯片)，因此我不确定是否值得做出这样的努力。