我对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的链接时,源代码显示正确。 然而,当我访问我的站点时,我只看到一个普通的图像。当我将鼠标悬停在图像上时,没有缩放效果。当我点击图像时,图像只是显示出来,没有这些奇特的灯箱东西。因此,该网站的行为就好像没有灯箱,我只需要一个代码
我怎样才能找出哪里出了问题
编辑 现在我又添加了两个js文件。我真的不知道如何在Firefox中处理web developer函数,但至少我找到了一个调试器,现在在页面重新加载时显示:“在异常时暂停” SyntaxError:Element.querySelectorAll:“\”不是有效的选择器
通过重新安排js和css包含的顺序并将其全部放在站点的末尾来解决此问题
相关问题 更多 >
编程相关推荐