Javascript 如何从lightbox gallery中触发无限滚动-Django/FancyBox/Waypoints.js
目标:我正在尝试使用Django构建一个照片库应用程序,该应用程序具有合理的布局、无限滚动和一个灯箱 我使用django pagination和waypoint.js遵循了无限卷轴的设计,合理的布局正在使用,我尝试使用lightbox(任何lightbox都可以做到,但我喜欢这个简洁的外观)。在这一点上,每一个单独使用都很好 问题:我的照片库包含100幅图像。在桌面上加载页面时,会加载36个缩略图。如果向下滚动,则正确加载下一页/缩略图。但是如果我在滚动之前使用lightbox,我会被这36张图片困住。因此,目前,我主要在寻找一种方法,从lightbox gallery中触发页面的懒散加载,而不必退出lightbox并向下滚动 我发现许多stackoverflow帖子都是关于将新图像包含到lightbox的(这可能是我的下一个挑战,tbh),但没有多少关于如何从lightbox中调用下一页/图像的信息 作为某种js/JQueryNoob,欢迎任何帮助,因为我甚至不确定这是否是正确的方法 在这里,您可以找到gallery.html页面的模板。这显然不是一个“可复制的最小示例”,因为它可能是整个应用程序(如果需要,仍然可能),但如果有人要求,我可以提供更多代码Javascript 如何从lightbox gallery中触发无限滚动-Django/FancyBox/Waypoints.js,javascript,jquery,django,fancybox,infinite-scroll,Javascript,Jquery,Django,Fancybox,Infinite Scroll,目标:我正在尝试使用Django构建一个照片库应用程序,该应用程序具有合理的布局、无限滚动和一个灯箱 我使用django pagination和waypoint.js遵循了无限卷轴的设计,合理的布局正在使用,我尝试使用lightbox(任何lightbox都可以做到,但我喜欢这个简洁的外观)。在这一点上,每一个单独使用都很好 问题:我的照片库包含100幅图像。在桌面上加载页面时,会加载36个缩略图。如果向下滚动,则正确加载下一页/缩略图。但是如果我在滚动之前使用lightbox,我会被这36张图
{% 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 %}
{%load static%}
{%block head%}
{%endblock%}
{%block content%}
{%用于图片中的图片%}
{%endfor%}
加载。。。
{%如果页面_obj.has_next%}
{%endif%}
{%endblock%}
{%block script%}
//初始化对齐的布局
$(“#我的画廊”)({
行高:280,
最后一行:'nojustify',
利润率:20
});
var infinite=新航路点。无限({
元素:$('.infinite container')[0],
onBeforePageLoad:函数(){
$('.loading').show();
},
onAfterPageLoad:函数($items){
$('.loading').hide();
//加载后重新组织布局
$('my#U gallery')。合理的画廊('norewind');
}
});
{%endblock%}
ps:这是我的第一个stackoverflow帖子,如果我需要调整,请不要犹豫
提前感谢fancybox提供回调,允许您在工作流中的任何位置执行代码,例如,在加载图像之前/之后,您可以在文档中找到示例-
无论如何,100张图片并不是什么大事,因为只有3张幻灯片(当前和下一张/上一张)同时存在,因此我不确定是否值得做出这样的努力 fancybox提供回调,允许您在工作流中的任何位置执行代码,例如,在加载图像之前/之后,您可以在文档中找到示例-
无论如何,100张图片并不是什么大事,因为只有3张幻灯片(当前和下一张/上一张)同时存在,因此我不确定是否值得做出这样的努力 嗨,谢谢你的意见。我的帖子不清楚(我会编辑它)。我的页面包含缩略图,可从fancybox访问的图片数量等于页面中加载的缩略图数量。我当前的问题更多的是关于如何在用户使用lightbox时触发加载缩略图(然后,将它们添加到fancybox实例)。我目前正在修补window.scrollTo()(但它感觉有点粗糙),因此事件可能是触发它的最佳位置。将会有更多照片(朋友的婚礼照片)谢谢您的输入;)嗨,谢谢你的意见。我的帖子不清楚(我会编辑它)。我的页面包含缩略图,可从fancybox访问的图片数量等于页面中加载的缩略图数量。我当前的问题更多的是关于如何在用户使用lightbox时触发加载缩略图(然后,将它们添加到fancybox实例)。我目前正在修补window.scrollTo()(但它感觉有点粗糙),因此事件可能是触发它的最佳位置。将会有更多照片(朋友的婚礼照片)谢谢您的输入;)