title: How to show images using Lightbox in Django
body: <p>I need your little help. I have set up everything according to the course that I am following but I am not getting images shown as in the course. </p>
  
  <p>Here is the issue: I have fetched some images from database and I want to show them using lightbox. I did everything right but images are not showing.</p>
  
  <p>My views.py</p>
  
  <pre><code>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)
  </code></pre>
  
  <p>My listing.html</p>
  
  <pre><code>{% extends 'base.html' %}
  {% load humanize %}
  {% block content %}
  
  &lt;!-- Listing --&gt;
    &lt;section id="listing" class="py-4"&gt;
      &lt;div class="container"&gt;
        &lt;a href="{% url 'listings' %}" class="btn btn-light mb-4"&gt;Back To Listings&lt;/a&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-md-9"&gt;
            &lt;!-- Home Main Image --&gt;
            &lt;img src="{{ listing.photo_main.url }}" alt="" class="img-main img-fluid mb-3"&gt;
            &lt;!-- Thumbnails --&gt;
            &lt;div class="row mb-5 thumbs"&gt;
              &lt;div class="col-md-2"&gt;
                &lt;a href="{{ listing.photo_1.url }}" data-lightbox="home-images"&gt;
                  &lt;img src="{{ listing.photo_1.url }}" alt="" class="img-fluid"&gt;
                &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="col-md-2"&gt;
                &lt;a href="{{ listing.photo_2.url }}" data-lightbox="home-images"&gt;
                  &lt;img src="{{ listing.photo_2.url }}" alt="" class="img-fluid"&gt;
                &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="col-md-2"&gt;
                &lt;a href="{{ listing.photo_3.url }}" data-lightbox="home-images"&gt;
                  &lt;img src="{{ listing.photo_3.url }}" alt="" class="img-fluid"&gt;
                &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="col-md-2"&gt;
                &lt;a href="{{ listing.photo_4.url }}" data-lightbox="home-images"&gt;
                  &lt;img src="{{ listing.photo_4.url }}" alt="" class="img-fluid"&gt;
                &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="col-md-2"&gt;
                &lt;a href="{{ listing.photo_5.url }}" data-lightbox="home-images"&gt;
                  &lt;img src="{{ listing.photo_5.url }}" alt="" class="img-fluid"&gt;
                &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="col-md-2"&gt;
                &lt;a href="{{ listing.photo_6.url }}" data-lightbox="home-images"&gt;
                  &lt;img src="{{ listing.photo_6.url }}" alt="" class="img-fluid"&gt;
                &lt;/a&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
       &lt;/section&gt;
  {% endblock %}
  </code></pre>
  
  <p>Here is my base.html</p>
  
  <pre><code>{% load static %}
  &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;!-- Font Awesome --&gt;
      &lt;link rel="stylesheet" href="{% static 'css/all.css' %}"&gt;
      &lt;!-- Bootstrap --&gt;
      &lt;link rel="stylesheet" href="{% static 'css/bootstrap.css' %}"&gt;
      &lt;!-- Custom --&gt;
      &lt;link rel="stylesheet" href="{% static 'css/style.css' %}"&gt;
      &lt;!-- Lightbox --&gt;
  
      &lt;!-- Please NOTE that I have added the light box correctly from static --&gt;
      &lt;link rel="stylesheet" href="{% static 'css/lightbox.min.css' %}"&gt; 
  
      &lt;title&gt;BT Real Estate&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;!-- Top Bar --&gt;
      {% include 'partials/_topbar.html' %}
      &lt;!-- Nav Bar --&gt;
      {% include 'partials/_navbar.html' %}
  
      {% block content %}
  
      {% endblock %}
      &lt;!-- Footer --&gt;
      {% include 'partials/_footer.html' %}
      &lt;script src="{% static 'js/jquery-3.3.1.min.js' %}"&gt;&lt;/script&gt;
      &lt;script src="{% static 'js/bootstrap.bundle.min.js' %}"&gt;&lt;/script&gt;
      &lt;script src="{% static 'js/main.js' %}"&gt;&lt;/script&gt;
  
      &lt;!-- Please NOTE that I have added the light box correctly from static --&gt;
      &lt;script src="{% static 'js/lightbox.min.js' %}"&gt;&lt;/script&gt;  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is my static directory path:</p>
  
  <pre><code>myproject
    &gt;myproject
      &gt;static
        &gt;admin
        &gt;css
          &gt;lightbox.min.css
        &gt;img
        &gt;js
          &gt;lightbox.min.js
    &gt;myapp
    &gt;manage.py
  
  </code></pre>
  
  <p>Your help is much appreciated. Thank you!</p>