Как поместить изображения Django в слайдер галереи jQuery? - PullRequest
Новая
       44

Как поместить изображения Django в слайдер галереи jQuery?

1 голос
/ 09 октября 2019

Я создал страницу в Django, которая отображает изображения определенного автомобиля в слайдер галереи, например this .

Кажется, что View даже не распознает галерею фоторамки,<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 class="fotorama">
            <img src="/static/images/placeholder.jpg">
    </div>

Вот как выглядит эта страница:

Demonstration image

Я сделал небольшую страницу вне моего проекта django и фоторамкиработает отлично. Может ли это быть проблемой, специфичной для django? Есть ли дополнительный плагин / дополнительный код, который мне нужен для работы слайдера?

Обновление

Я добавил код js, чтобы попытаться вручную инициализировать код фоторамки из API . 

<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, в консоль не было напечатано никаких ошибок, это может означать, что фоторамки и другие сценарии js даже не распознаются?

Обновление 2

Я читал предыдущие вопросы стека по этой теме, и я предпринял некоторые шаги, чтобы вывести больше ошибок в консоль, потому чтовидимые ошибки лучше, чем молчание.

Я переместил 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>

, которая очищаетсядо ошибки.

A Несколько успешный Я нашел скрипт, чтобы проверить, загрузился ли jQuery. 

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

, который консоль возвращает «еще не загружено»,хотя он размещен внизу HTML-страницы.

Однако, хотя изображения все еще сложены, они теперь реагируют на щелчки и перетаскивания, как ползунок, и текст под ними (описание параграфов), теперьпокрыть все бу первый. Который все еще прогресс.

...