How to show images using Lightbox in Django

Viewed 1119

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.

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.

My 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)

My listing.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 %}

Here is my base.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>

Here is my static directory path:

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

Your help is much appreciated. Thank you!

2 Answers

In your Root urls, try to add the static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

  • For example:
from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('admin/', admin.site.urls),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

1st of all inspect your code and see, if any error happend..? or check to your django project, are you added .!

static/img/lightbox
    >close.png
    >loading.gif
    >next.png
    >pre.png

unless img file lightbox face error.

Related