Question

我已经在Django中创建了一个页面，该页面将特定汽车的图像投放到this之类的图库滑块中。

View甚至无法识别fotorama画廊。 <div class="fotorama"></div>显示在检查控制台中，但是图像仍以html的默认布局散布。

我在本地托管fotorama.js和.css，因为通过CDN提供服务时它们不起作用。

<head>
...
    {% load static %}
    <link  href="{% static 'css/fotorama.css' %}" rel="stylesheet">
    <script src="{% static 'js/fotorama.js' %}"></script>
</head>
...

(jQuery comes with bootstrap and I know that it's working. And I've run collectstatic, so that's not the problem)

<div class="container">
        <div class="row">
            <div class="col justify-content-center">
                <div class="fotorama">
                    <img src="/static/images/placeholder.jpg">
                    {% for image in car.image_set.all %}
                        <img src="{{ image.image.url }}">
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>

作为一个快速测试，我在所有其他容器，行和列div之外提供了正常图像。这也没有什么不同。

    <div class="fotorama">
            <img src="/static/images/placeholder.jpg">
    </div>

页面的外观如下：

我在django项目之外做了一个快速的页面，而fotorama效果很好。这可能是特定于Django的问题吗？我需要使滑块正常工作的额外插件/额外代码吗？

更新

我添加了一些js代码，以尝试从API手动初始化fotorama代码。

<script>
  $(function () {
    // 1. Initialize fotorama manually.
    var $fotoramaDiv = $('#fotorama').fotorama();

    // 2. Get the API object.
    var fotorama = $fotoramaDiv.data('fotorama');

    // 3. Inspect it in console.
    console.log(fotorama);
  });
</script>

虽然没有什么区别（图像仍未添加到滑块上），但出现此控制台错误：

(index) : 82 Uncaught ReferenceError: $ is not defined
    at (index) : 82
(anonymous) @ (index) : 82

（第82行是脚本代码的开始位置，并添加了冒号间隔以进行格式化）

在添加js脚本之前，没有任何错误输出到控制台，这是否意味着fotorama和其他js脚本甚至未被识别？

更新2

我一直在阅读有关此主题的先前Stack问题，并且已采取一些步骤将更多错误打印到控制台中，因为可见的错误胜于沉默。

我将href从身体的头部移到了底部，并弹出了此错误。

GET http://localhost:8000/static/js/fotorama.js net::ERR_ABORTED 404 (Not Found)

...这是文件的正确路径。

所以我将其移回了原始CDN链接：

<script src="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script>

哪个会清除错误。

取得一些成功 我找到了一个脚本来检查jQuery是否已加载。

<script>
    if(typeof jQuery!=='undefined'){
        console.log('jQuery Loaded');
    }
    else{
        console.log('not loaded yet');
    }
</script>

哪个控制台返回“尚未加载”，即使它已发布在HTML页面的底部。

但是，当图像仍然堆叠时，它们现在可以像滑块一样响应单击和拖动，并且它们下面的文本（描述段落）现在覆盖了第一个图像。还在进步。

如何将Django图像放入jQuery图库滑块？

0 个答案: