我无法使 Lightbox2 ( http://lokeshdhakar.com/projects/lightbox2/ ) 与 Django 一起使用。当我点击成员(member)的图片时，我希望看到灯箱出现。相反，它显示下载的图像。悬停也不适用于图像。这是我到目前为止所做的:
我已经下载了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>
member_details.html(Django 模板)
<div class="members">
{% if userprofile.profile_picture %}
<a href="{{ MEDIA_URL }}
{{userprofile.profile_picture.url|default_if_none:'' }}" lightbox="{{userprofile.user.first_name }}" >
<img class="lightbox" src="{{ MEDIA_URL }}{{ userprofile.profile_picture.url|default_if_none:"" }}" alt="{{ userprofile.user.first_name }}" />
</a>
{% endif %}
</div>
有人可以建议如何解决这个问题吗？
最佳答案
虽然您添加了一些示例代码，但您的问题中没有足够的信息来给出准确的答案。您问题中包含的代码块也存在许多问题:
- 您的示例代码有许多拼写错误，这意味着您的 CSS 会给您返回 404。
- 不包含 JavaScript
- 图像上的数据属性
<img>和链接<a>标签命名不正确。
查看how to use guide不使用动态数据(使用静态图像)让它工作，然后用服务器端模板生成的内容替换图像。
如何使用
第 1 步 - 加载 Javascript 和 CSS 下载并解压最新版本的 Lightbox。 查看 js 文件夹内部，找到 jquery-1.11.0.min.js 和 lightbox.min.js 并加载这两个文件。首先加载 jQuery。
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/lightbox.min.js"></script>
在 css 文件夹中查找 lightbox.css 并加载它。
<link href="css/lightbox.css" rel="stylesheet" />
在 img 文件夹中查找 close.png、loading.gif、prev.png 和 next.png。这些文件在 lightbox.css 中使用。默认情况下，lightbox.css 将在名为 img 的文件夹中查找这些图像。
第 2 步 - 将其打开 将 data-lightbox 属性添加到任何图像链接以激活 Lightbox。对于属性值，请为每个图像使用唯一的名称。例如:
<a href="img/image-1.jpg" data-lightbox="image-1" data-title="My caption">
Image #1
</a>
可选:如果您想显示标题，请添加数据标题属性。 如果您想要将一组相关图像合并为一组，请对所有图像使用相同的 data-lightbox 属性值。例如:
<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>
关于javascript - 无法使 Lightbox2 在 Django 中工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30237706/