Как показывать изображения с помощью лайтбокса в Django - PullRequest
0 голосов
/ 07 апреля 2020

Мне нужна твоя маленькая помощь. Я настроил все в соответствии с курсом, которому я следую, но я не получаю изображения, показанные в курсе.

Вот проблема: я получил несколько изображений из базы данных и хочу показать их с помощью лайтбокса. Я все сделал правильно, но изображения не отображаются.

Мои views.py

from django.shortcuts import render, get_object_or_404
from django.core.paginator import Paginator
from .models import Listing

def listing(request, listings_id):
    listing = get_object_or_404(Listing, pk=listings_id)

    context = {
        'listing': listing
    }
    return render(request, 'listings/listing.html', context)

Мой список. html

{% extends 'base.html' %}
{% load humanize %}
{% block content %}

<!-- Listing -->
  <section id="listing" class="py-4">
    <div class="container">
      <a href="{% url 'listings' %}" class="btn btn-light mb-4">Back To Listings</a>
      <div class="row">
        <div class="col-md-9">
          <!-- Home Main Image -->
          <img src="{{ listing.photo_main.url }}" alt="" class="img-main img-fluid mb-3">
          <!-- Thumbnails -->
          <div class="row mb-5 thumbs">
            <div class="col-md-2">
              <a href="{{ listing.photo_1.url }}" data-lightbox="home-images">
                <img src="{{ listing.photo_1.url }}" alt="" class="img-fluid">
              </a>
            </div>
            <div class="col-md-2">
              <a href="{{ listing.photo_2.url }}" data-lightbox="home-images">
                <img src="{{ listing.photo_2.url }}" alt="" class="img-fluid">
              </a>
            </div>
            <div class="col-md-2">
              <a href="{{ listing.photo_3.url }}" data-lightbox="home-images">
                <img src="{{ listing.photo_3.url }}" alt="" class="img-fluid">
              </a>
            </div>
            <div class="col-md-2">
              <a href="{{ listing.photo_4.url }}" data-lightbox="home-images">
                <img src="{{ listing.photo_4.url }}" alt="" class="img-fluid">
              </a>
            </div>
            <div class="col-md-2">
              <a href="{{ listing.photo_5.url }}" data-lightbox="home-images">
                <img src="{{ listing.photo_5.url }}" alt="" class="img-fluid">
              </a>
            </div>
            <div class="col-md-2">
              <a href="{{ listing.photo_6.url }}" data-lightbox="home-images">
                <img src="{{ listing.photo_6.url }}" alt="" class="img-fluid">
              </a>
            </div>
          </div>
        </div>
      </div>
     </section>
{% endblock %}

Вот моя база. html

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="{% static 'css/all.css' %}">
    <!-- Bootstrap -->
    <link rel="stylesheet" href="{% static 'css/bootstrap.css' %}">
    <!-- Custom -->
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
    <!-- Lightbox -->

    <!-- Please NOTE that I have added the light box correctly from static -->
    <link rel="stylesheet" href="{% static 'css/lightbox.min.css' %}"> 

    <title>BT Real Estate</title>
</head>
<body>
    <!-- Top Bar -->
    {% include 'partials/_topbar.html' %}
    <!-- Nav Bar -->
    {% include 'partials/_navbar.html' %}

    {% block content %}

    {% endblock %}
    <!-- Footer -->
    {% include 'partials/_footer.html' %}
    <script src="{% static 'js/jquery-3.3.1.min.js' %}"></script>
    <script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
    <script src="{% static 'js/main.js' %}"></script>

    <!-- Please NOTE that I have added the light box correctly from static -->
    <script src="{% static 'js/lightbox.min.js' %}"></script>  
</body>
</html>

Вот мой путь к каталогу stati c:

myproject
  >myproject
    >static
      >admin
      >css
        >lightbox.min.css
      >img
      >js
        >lightbox.min.js
  >myapp
  >manage.py

Ваша помощь очень ценится. Спасибо!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...