Javascript 无法使Lightbox2在Django中工作_Javascript_Django_Lightbox2

Javascript 无法使Lightbox2在Django中工作

javascript django

Javascript 无法使Lightbox2在Django中工作,javascript,django,lightbox2,Javascript,Django,Lightbox2,我无法使Lightbox2（）与Django一起工作。当我点击会员图片时，我希望看到灯箱出现。而是显示下载的图像。另外，悬停在图像上不起作用。以下是我迄今为止所做的工作：我下载了Lightbox2并复制了js、img和css文件夹中的文件 base.html <head> <link rel="stylesheet" href="{% static 'css/ligthbox.css' %}" > </head> <body> &

我无法使Lightbox2（）与Django一起工作。当我点击会员图片时，我希望看到灯箱出现。而是显示下载的图像。另外，悬停在图像上不起作用。以下是我迄今为止所做的工作：

我下载了Lightbox2并复制了js、img和css文件夹中的文件

base.html

<head>
    <link rel="stylesheet" href="{% static 'css/ligthbox.css' %}" >
</head>
<body>
    <link rel="stylesheet" href="{% static 'css/ligthbox.css' %}" >
    <link rel="stylesheet" href="{% static 'css/ligthbox.css' %}" >
</body>

<div class="row">
            <div class="col-md-4 col-xs-6">
            <a href="{% static 'img/8marc.jpg' %}" data-lightbox="8marc" data-title="My caption">
                <img src="{% static 'img/8marc.jpg' %}" /></a>
            </a>

            </div>
</div>

member\u details.html（Django模板）


{%if userprofile.profile_picture%}
{%endif%}

请有人建议如何解决这个问题。

虽然您添加了一些示例代码，但您的问题中没有足够的信息来给出准确的答案。问题中包含的代码块也存在许多问题：

您的示例代码有许多拼写错误，这意味着您的CSS将为您提供404

没有包含javascript

图像上的数据属性

在css文件夹中查找lightbox.css并加载它

<script src="js/jquery-1.11.0.min.js"></script>
    <script src="js/lightbox.min.js"></script>

查看img文件夹中的close.png、loading.gif、prev.png和next.png。这些文件在lightbox.css中使用。默认情况下，lightbox.css将在名为img的文件夹中查找这些图像

步骤2-打开它 将数据灯箱属性添加到任何图像链接以激活灯箱。对于属性值，请为每个图像使用唯一的名称。例如：

<link href="css/lightbox.css" rel="stylesheet" />

<a href="img/image-1.jpg" data-lightbox="image-1" data-title="My caption">
    Image #1
</a>

可选：如果要显示标题，请添加数据标题属性。如果要将一组相关图像合并到一个集合中，请对所有图像使用相同的数据lightbox属性值。例如：

<link href="css/lightbox.css" rel="stylesheet" />

<a href="img/image-1.jpg" data-lightbox="image-1" data-title="My caption">
    Image #1
</a>

谢谢@MattWritesCode和@cbergmiller

以下是我现在在我的模板中得到的@MattWritesCode建议：

<a href="img/image-2.jpg" data-lightbox="roadtrip">Image #2</a>
<a href="img/image-3.jpg" data-lightbox="roadtrip">Image #3</a>
<a href="img/image-4.jpg" data-lightbox="roadtrip">Image #4</a>

base.html

<head>
    <link rel="stylesheet" href="{% static 'css/ligthbox.css' %}" >
</head>
<body>
    <link rel="stylesheet" href="{% static 'css/ligthbox.css' %}" >
    <link rel="stylesheet" href="{% static 'css/ligthbox.css' %}" >
</body>

<div class="row">
            <div class="col-md-4 col-xs-6">
            <a href="{% static 'img/8marc.jpg' %}" data-lightbox="8marc" data-title="My caption">
                <img src="{% static 'img/8marc.jpg' %}" /></a>
            </a>

            </div>
</div>


TrackCat-{%block title%}TrackCat{%endblock%}
{%block自定义_css%}{%endblock%}

我成功地使用

<head>
    <title>TrackCat - {% block title %}TrackCat{% endblock %}</title>
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans:400,600,300">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
    <link rel="stylesheet" href="{% static 'css/lightbox.css' %}" >
    {% block custom_css %}{% endblock %}
</head>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="{% static 'js/jquery.datetimepicker.js' %}"></script>
<script type="text/javascript" src="{% static 'js/lightbox.min.js' %}"></script>

而不是在my base.html中。

请检查您的base.html代码示例-您拼写lightbox错误，并包含了三次css文件。JS文件不在您的模板中。