Magnific Popup 图库点击任意缩略图却始终显示第一张图片，根本原因是每次点击都重复初始化插件，导致其内部索引错乱；正确做法是全局一次性初始化，而非在事件中反复调用 .magnificPopup()。
magnific popup 图库点击任意缩略图却始终显示第一张图片，根本原因是每次点击都重复初始化插件，导致其内部索引错乱；正确做法是全局一次性初始化，而非在事件中反复调用 `.magnificpopup()`。
在 Django 模板中渲染图库时，你为每张图片生成了带有 class="image-link" 的 <a></a> 标签，并期望点击任一链接时弹出对应大图——但当前 JavaScript 逻辑存在关键误区：在 click 事件处理器内动态调用 $('.image-link').magnificPopup({...}).magnificPopup('open')，会导致插件对整个选择器集合重复绑定并强制打开首个元素，从而忽略实际被点击的目标。
✅ 正确方案是：仅初始化一次，让 Magnific Popup 自动识别上下文中的兄弟链接并构建图库索引。
以下是修正后的完整代码：
<!-- jQuery 和 Magnific Popup 资源（保持不变） -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script><!-- Django 模板循环（优化建议：移除嵌套 a 标签） -->
{% for image in images %}
<div class="image">
{% thumbnail MEDIA_ROOT|add:"images/"|add:dir|add:"/"|add:image "300x300" crop="smart" as im %}
<!-- 重要：只保留一个语义清晰的 .image-link 链接，指向原图 -->
<a href="%7B%7B%20MEDIA_URL%20%7D%7Dimages/%7B%7B%20dir%20%7D%7D/%7B%7B%20image%20%7D%7D" class="image-link">
<img src="%7B%7B%20im.url%20%7D%7D" alt="{{ image }}" loading="lazy"></a>
{% endthumbnail %}
<div class="info">
<span class="title">{{ dir }}</span>
</div>
</div>
{% endfor %}
⚠️ 注意：原始模板中存在嵌套
<a></a>标签（外层<a></a>包裹内层<a></a>），这属于 HTML 无效结构，可能干扰事件冒泡与 DOM 定位，务必精简为单层可点击链接。
对应的 JavaScript 应改为：
<script>
$(document).ready(function() {
// ✅ 一次性初始化：为所有 .image-link 绑定图库功能
$('.image-link').magnificPopup({
type: 'image',
closeOnContentClick: true,
closeBtnInside: true,
midClick: true,
mainClass: 'mfp-with-zoom mfp-img-mobile',
gallery: {
enabled: true,
navigateByImgClick: true,
preload: [0, 1]
},
image: {
verticalFit: true
},
zoom: {
enabled: true
}
});
// ❌ 不再在此处初始化或触发 open —— Magnific Popup 已自动接管点击行为
// $(document).on('click', '.image-link', function(e) { ... }) 中无需任何逻辑
});
</script>
? 关键要点总结：
-
初始化时机决定行为：
.magnificPopup()必须在 DOM 加载后、事件触发前统一执行，而非在事件中重复调用； -
图库依赖 DOM 顺序：插件通过
$('.image-link')获取的 jQuery 集合顺序，即为图库导航顺序，请确保模板中<a class="image-link"></a>的排列与预期浏览顺序一致； -
避免事件干扰：移除冗余的
$(document).on('click', ...)事件监听器（除非需自定义前置逻辑），默认点击即可触发对应图片； -
Django 安全提示：确保
MEDIA_URL和路径拼接已正确配置，且服务端允许静态资源访问（如 Nginx/Apache 配置或 Djangodjango.contrib.staticfiles设置）。
完成上述调整后，点击任意缩略图将准确弹出对应原图，并支持左右键盘导航、缩放及无缝图库切换。
