[英]How can I get simple Lightbox to show that scaling effect when hovering over an image
我對 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”
通過重新排列js和css的順序來解決,包括並將其全部放在站點的末尾。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.