- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
目标:我正在尝试使用 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 帖子,如果我需要调整任何内容,请随时告诉我提前致谢
最佳答案
fancybox 提供回调,允许您在工作流程中的任何点执行代码,例如,在加载图像之前/之后,您可以在文档中找到示例 - https://fancyapps.com/fancybox/3/docs/#events
无论如何,100 张图像并不是什么大问题,因为同时存在 3 张幻灯片(当前幻灯片和下一张/上一张幻灯片),因此我不确定是否值得做出这样的努力。
关于javascript - 如何从灯箱画廊内触发无限滚动 - Django/FancyBox/Waypoints.js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58959244/
已结束。此问题正在寻求书籍、工具、软件库等的推荐。它不满足Stack Overflow guidelines 。目前不接受答案。 我们不允许提出寻求书籍、工具、软件库等推荐的问题。您可以编辑问题,以便
如何在放大的每个图像下添加自定义文本?现在它基于 alt 文本,但我想使用图像等对其进行更多自定义。 完美的解决方案是将文本显示在 div 中。 这是代码笔: // Create a lightbox
为了重新启动我的客户站点 (craft2eu.net),我需要集成 Galleriffic用lightBox .我知道有 GallerificPlus ,但它基于旧版本的 Galleriffic,它带
设计一个网站,其中我在很多地方使用了很多背景:rgba。因此,当我尝试制作一个灯箱时,我正在使用 background: rgba(0, 0, 0 , 0.6) !important; 使屏幕的其余部
晚上好,感谢您首先尝试提供帮助。 我有一个“作品集”页面,其中包含 45 张我 build 的房屋的图片。它们被布置在一个网格中,5 宽 9 向下。简单地说,当您在浏览器中单击并展开图像时,效果很好。
我试图允许从灯箱弹出窗口填写表格。类似于“获得满意度”使用的那种(尽管我只需要能够收集信息,而不是从查询中显示信息)。您可以在 http://tweet.fabeetle.com 处查看“获得满意”示
我正在尝试使用这个灯箱, http://lokeshdhakar.com/projects/lightbox2/#getting-started in my app. 1) How can I ad
按照目前的情况,这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the
有谁知道一个好的 Rails 灯箱插件?我找到了 redbox,但它似乎已经过时了。 谢谢! -艾略特 最佳答案 我只使用常规的 Lightbox 2。包括所有适当的 javascript 和样式表,
我正在使用 bootstrap-lightbox以便在页面中显示某些图像。 × 我只需要显示被点击的缩略图的完整版本。 是
我目前正在使用 prettyPhoto在我正在开发的网站上,但在移动设备上遇到了一个小问题。 该插件具有选项“allow_resize: false”,它不允许调整大于视口(viewport)的照片大
我正在使用jquery lightbox ,有没有办法显示文本字段而不是图像或两者都显示? 或者也许是另一种在灯箱弹出窗口中显示文本的方式? 最佳答案 这是灯箱的最佳示例视频 https://www.
我对 Jquery 很陌生,我发现了几个使用 cookie 和 onload 功能打开灯箱的示例。我正在使用与 fancybox 一起使用的 cookie 示例,但我一直在我的所有网站上使用 Pret
我这辈子都想不出如何在不影响我的灯箱图像的情况下模糊变暗的背景。任何帮助将不胜感激,因为我仍在努力学习如何使用 :target 功能。我计划制作一些不同的图像,这样当我单击每个图像时,此灯箱效果将适用
首先,我将从以下内容开始:我绝不是一名开发人员、编码员等。我只是一名平面设计师,正在帮助 friend 设计她的网站。 截至目前,我在将缩略图链接到我的灯箱标注上的完整图像时遇到问题 - 您可以在 w
我肯定遇到了一个简单的问题,但就是无法解决。我想按照描述使用 jquery 触发灯箱 here但这是行不通的。.lightBox() 方法找不到,我只是不明白为什么。 代码是 $(f
我在 Lightbox iframe 中有一个按钮。如何通过单击该按钮关闭该 iframe? 我的代码是这样的: 最佳答案 通过this answer至 Close a ligh
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于 Stack Overflow 来说是偏离主题的,
按照目前的情况,这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the
我正在使用 angular 来显示我的 Student Object 的详细信息 一切正常 但还需要作业文本上的超链接,这样当有人点击它时,会打开一个灯箱,其中包含所有作业对象的详细信息。 现在我的老
我是一名优秀的程序员,十分优秀!