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

Posted 2023-05-07

【中文标题】如何从灯箱画廊中触发无限滚动 - Django / FancyBox / Waypoints.js

【英文标题】：How to trigger infinite scroll from within a lightbox gallery - Django / FancyBox / Waypoints.js

【发布时间】：2020-03-16 11:02:32

【问题描述】：

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

我使用 django 分页和 waypoint.js 遵循following tutorial 进行无限滚动，合理的布局使用Justified Gallery，我尝试将Fancybox 用于灯箱（任何灯箱都可以做到这一点，但是我喜欢这个干净的外观）。在这一点上，单独使用时，每一个都可以正常工作。

问题：我的照片库包含 100 张图片。在桌面上加载页面时，会加载 36 个缩略图。如果我向下滚动，则会正确加载下一页/缩略图。但是如果我在滚动之前使用灯箱，我会被这 36 张图片卡住。所以目前，我主要是在寻找一种从灯箱库中触发页面延迟加载的方法，而无需退出灯箱并向下滚动。

我发现了许多关于将新图像添加到灯箱的 *** 帖子（这可能是我的下一个挑战，tbh），但没有太多关于如何从灯箱中调用下一页/图像的信息。

作为某种 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  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：这是我的第一篇 *** 帖子，请不要犹豫，告诉我是否需要调整任何内容 提前致谢

【参考方案1】：

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

无论如何，100 张图片并不是什么大不了的事，因为只有 3 张幻灯片（当前和下一张/上一张）同时存在，因此我不确定是否值得这样做。

【讨论】：

您好，感谢您的意见。我的帖子不清楚（我会编辑它）。我的页面包含缩略图，并且可以从 fancybox 访问的图片数量等于页面中加载的缩略图数量。我当前的问题更多关于如何在用户使用灯箱时触发缩略图的加载（然后，将它们添加到 fancybox 实例）。我目前正在修改 window.scrollTo() （但感觉有点hacky），所以事件可能是触发它的最佳位置。会有更多照片（朋友的婚礼照片）感谢您的输入；）