Lightbox not working with dynamic gallery

Question

I'm trying to create a gallery that will update as soon as new pictures are uploaded. I'm trying to use lightbox to display them but it doesn't seem to be working.

This is my base.html file

<!doctype html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %}Flask Gallery{% endblock %}</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/css/lightbox.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='main.css') }}" media="screen">
</head>

{% block navbar %}
//cut for space
{% endblock %}

<section class="content">
{% block content %}
<div class="container">
    {% with messages = get_flashed_messages() %}
    {% if messages %}
        {% for message in messages %}
        <div class="alert alert-info" role="alert">{{ message }}</div>
        {% endfor %}
    {% endif %}
    {% endwith %}

    {% block app_content %}{% endblock %}
</div>

{% endblock %}
</section>

{% block scripts %}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/js/lightbox.min.js"></script>
{% endblock %}

And this is my gallery view so far

{% extends "base.html" %}

{% block content %}

<div class="container-fluid">
  <div class="row" id="img-row">
  {% for image_name in image_names %}
    <div class="col-xl-3 col-lg-4 col-6 image-set">
      <a class="gallery-image-link" href="{{ url_for('filename', filename=image_name )}}" data-lightbox="gallery">
        <img class="img-fluid" src=" {{url_for('filename', filename=image_name)}}"/>
      </a>
    </div>
    {% endfor %}
  </div>
</div>

{% endblock %}

Should I be adding a Javascript function to take the images into the lightbox modal?

Lightbox not working with dynamic gallery

0 Answers0