lightgallery is not working in django its shows black screen - html

Question

The lightgallery is working but with one big issue with it. it is not shown the image where it shows that in the thumbnail but the main window it is black.
The lightgallery is working but with one big issue with it. it is not shown the image where it shows that in the thumbnail but the main window it is black.
enter image description here
$(document).ready(function() {
$('#lightgallery').lightGallery({
mode: 'slide',
download: false,
});
});
{% extends "keeraapp/base.html" %}
{% load static %}
{% block title %}{{ object.topic }}{% endblock %}
{% block content %}
<script src="{% static 'keeraapp/javascript/jquery.min.js' %}"></script>
<script src="{% static 'keeraapp/javascript/gallery.js' %}"></script>
<script src="{% static 'keeraapp/javascript/lightgallery.min.js' %}"></script>
<script src="{% static 'keeraapp/javascript/picturefill.min.js' %}"></script>
<script src="{% static 'keeraapp/javascript/lg-thumbnail.min.js' %}"></script>
<script src="{% static 'keeraapp/javascript/lg-fullscreen.min.js' %}"></script>
<script src="{% static 'keeraapp/javascript/DeletingConfirmation.js' %}"></script>
<link rel="stylesheet" href="{% static 'keeraapp/css/lightgallery.min.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'keeraapp/css/one-topic.css' %}" type="text/css">
<input class="declare_checkbox" name="declare_checkbox" id="declare_checkbox" type="checkbox" value= "agree">
<label for="declare_checkbox">
<a class="declare-label">أتعهد بدفع قيمة خدمة هذا الموقع في حال تم التأجير وتقدر بـ 1% من السعر</a></label>
<div class="inner-body" id="inner-body">
<P><center><b><h2>{{ object.topic }}</h2></b></center></P>
<P><center><h5>{{ object.date }}</h5></center></P>
<center><div class="warper-flex">
<div class="country">{{ object.country }}</div>
<div class="city">{{ object.city }}</div>
<div class="neighborhood">{{ object.neighborhood }}</div></br>
<div class="category">{{ object.category }}</div>
<div class="sub_category">{{ object.sub_category }}</div>
<div class="sub_sub_category">{{ object.sub_sub_category }}</div>
</br>
</div></center></br>
<center><div id="lightgallery">
{% for image in images %}
<a href="{{image.image.url}}">
<img src="{{ image.image.url }}" alt="image" width="250px" height="150px">
</a>
{% endfor %}
</div></center>
<center><div class="price-detail">قيمة الإيجار هي <span>{{ object.price| stringformat:'d'}}</span> ويسترد التأمين ومقداره <span>{{ object.insurance|stringformat:'d'}}</span> اذا تم الإرجاع بحالة جيدة</div></center>
<P class="description">{{ object.description}}</P>
<form class= 'new-comment-form'
method='post'>
{% csrf_token %}
<input id="topic_id" name="topic_id" type="hidden" value="{{topic.id}}">
{{comment_form.non_field_errors}}
<p>{{ comment_form.comment }}</p>
{% if request.user is authenticated %}
<p>{{ comment_form.comment }}</p>
{% endif %}
<div class="warp">
<button class="button" id="submit">أرسل</button>
</div>
</form>
<div>
<p>{{ comments.count }} تعليقات</p>
{% for comment in comments %}
<div class="comment-section"><p>{{ comment.comment }} </p></div>
<small><p>بواسطة {{ comment.owner|capfirst }} | منذ {{comment.date|timesince}}</p></small>
{% if request.user == comment.owner %}
<div class="delete" id="delete">
حذف
</div>
{% endif %}
{% endfor %}
</div>
</div>
{%endblock content %}