将鼠标悬停在图像上时，如何获得简单的灯箱以显示缩放效果

Question

我对 javascript 几乎没有经验，我现在正在用 Django 构建一个小站点。 然后我偶然发现了一个提到 SimpleLightbox 的网站。

所以，这就是我得到的：

{% block content %}
    {% load static %}
    {% static "../" as baseURL %}
    <script src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
        <link rel="stylesheet" href="{% static 'photo/css/simple-lightbox.min.css' %}">
    <script type="text/javascript" src="{% static 'photo/js/simple-lightbox.jquery.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'photo/js/simple-lightbox.js' %}"></script>
    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
        <h2 class="page-header-tuesday">Bilder Galerie</h2>
        <div class="row">
            <div class="col-sm-6 col-sm-offset-0 col-md-7 col-md-offset-0 text-mainframe">
                <br>
                <div class="gallery">
                    {% load photo_tags %}
                        {% if images %}
                            {% for image in images %}
                                {% with image|split:'.' as strs %}
                                {% with strs|length as str_arr_len %}
                                {% with str_arr_len|add:'-1' as ext_idx %}
                                {% if strs|get_by_index:ext_idx == 'jpg' %}
                                <a href="{{ MEDIA_URL}}ObjPDW2/bilder/{{ image }}">
                                    <img src="{{ MEDIA_URL }}ObjPDW2/bilder/{{ image }}" alt="{{ image }}">
                                    </a>
                                {% endif %}
                                {% endwith %}
                                {% endwith %}
                                {% endwith %}
                                {% if forloop.counter|divisibleby:4 %}
                                    <div class="clear"></div>
                                {% endif %}
                            {% endfor %}
                        {% else %}
                            <p>No image available.</p>
                        {% endif %}
                </div>

                <script type="text/javascript">
                    $(document).ready(function() {
                        var lightbox = $('.gallery a').simpleLightbox();
                    });
                </script>
            </div>
            <div class="col-md-4 col-sm-4 col-md-offset-1">
                    <br>
            </div>
        </div>
    </div>  
{% endblock %}

我可以看到文件夹中的测试图像。 当我点击 photo/css/simple-lightbox.min.css' 和 photo/js/simple-lightbox.jquery.min.js 的链接时，源代码显示正确。 但是，当我访问我的网站时，我只看到一个正常的图像。 当我在图像上使用 hover 时，没有缩放效果。 当我点击图像时，图像只是显示出来，没有这些花哨的灯箱东西。 所以该网站的行为就好像没有灯箱一样，我只需要一个代码。

我怎么能找出问题所在？

编辑现在我又添加了两个 js 文件。 我真的不知道如何处理 Firefox 中的 web 开发人员函数，但至少我找到了一个调试器，现在在页面重新加载时显示：“Paused on exception SyntaxError: Element.querySelectorAll: '\' is not a valid selector”

Answer 1

通过重新排列js和css的顺序来解决，包括并将其全部放在站点的末尾。