javascript - 如何从灯箱画廊中触发无限滚动 - Django / FancyBox / Waypoints.js
问题描述
目标:我正在尝试使用具有合理布局、无限滚动和灯箱的 Django 构建照片库应用程序。
我已经按照以下教程使用 django 分页和 waypoint.js 进行无限滚动,合理的布局使用Justified Gallery并且我尝试将Fancybox用于灯箱(任何灯箱都可以做到这一点,但我喜欢这个干净的外观一)。在这一点上,单独使用时,每一个都可以正常工作。
问题:我的照片库包含 100 张图片。在桌面上加载页面时,会加载 36 个缩略图。如果我向下滚动,则会正确加载下一页/缩略图。但是如果我在滚动之前使用灯箱,我会被这 36 张图片卡住。所以目前,我主要是在寻找一种从灯箱库中触发页面延迟加载的方法,而无需退出灯箱并向下滚动。
我发现了许多关于将新图像包含到灯箱中的 stackoverflow 帖子(这可能是我的下一个挑战,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 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帖子,请随时告诉我是否需要调整任何东西提前谢谢
解决方案
fancybox 提供回调以允许您在工作流程中的任何时间点执行代码,例如,在加载图像之前/之后,您可以在文档中找到示例 - https://fancyapps.com/fancybox/3/docs/#事件
无论如何,100 张图片并不是什么大不了的事,因为只有 3 张幻灯片(当前和下一张/上一张)同时存在,因此我不确定是否值得这样做。
推荐阅读
- html - 用于导入语义(链接)数据的 HTML 元素
- javascript - Javascript 'then' 在 Ripple-lib 调用中无法按预期工作
- python - 特定条件下的Python列表选择?
- html - 如何从 HTML 元素中获取文本
- mysql - 无法打开 CloudSQL 二进制日志:“没有这样的文件或目录”
- latex - 更改特定条目的文本引用
- excel - 将文本转换为日期格式 MMM-YY 的列问题
- c# - 调用框架内的表单方法
- python - 如何更改 Jupyter Notebook 中的语法高亮显示?
- java - 底部导航视图中选定选项卡的颜色保持不变