Django项目中Magnific Popup点击图片总是弹出首张而非选中图问题求助

问题根源 #

1. 无效嵌套<a>标签：模板中外层<a>嵌套了内层.image-link标签，违反HTML规范，导致浏览器解析异常，干扰点击事件触发逻辑。
2. 错误初始化逻辑：每次点击图片时都重新给所有.image-link初始化Magnific Popup，调用open时默认打开相册首张，而非当前点击的图片。

修复步骤 #

1. 修正Django模板代码 #

移除嵌套的外层<a>标签，确保HTML结构合法：

<!-- jQuery library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- Magnific Popup JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
{% for image in images %}
  <div class="image">
    {% thumbnail MEDIA_ROOT|add:"images/"|add:dir|add:"/"|add:image 300x300 crop="smart" as im %}
    <a href="{{ MEDIA_URL }}images/{{ dir }}/{{ image }}" class="image-link">
      <img src="{{ im.url }}">
    </a>
    {% endthumbnail %}
    <div class="info">
      <a href="{{ MEDIA_URL }}images/{{ dir }}/{{ image }}" class="title">
        {{ dir }}
      </a>
    </div>
  </div>
{% endfor %}

2. 修正JavaScript代码 #

一次性初始化所有.image-link元素，让插件自动处理点击事件和相册导航：

<script>
  $(document).ready(function() { 
    $('.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] // 预加载当前图片的前0张、后1张
      },
      image: {
        verticalFit: true,
      },
      zoom: {
        enabled: true
      }
    });
  });
</script>

说明 #

• 移除嵌套<a>标签后，浏览器能正确解析DOM结构，确保点击事件仅触发在目标.image-link元素上。
• 提前完成所有图片的Magnific Popup配置初始化，插件会自动维护相册图片集合，点击任意图片时，将直接以该图片作为相册起始项打开。

内容的提问来源于stack exchange，提问作者Jian Zheng