Lightbox gallery navigation images: How to center selected active image

Question

Hello I am using Lightbox gallery on my Django app. When user clicks one of the images, gallery will appear with main selected image , next and prev functional icons and all images on the navigation part. I am trying to center active selected image by floating to the left side of the screen.

Image:

Code:

JS

<script type="text/javascript">
    function openModal() {
        document.getElementById("myModal").style.display = "block";
      }

      function closeModal() {
        document.getElementById("myModal").style.display = "none";
      }

      var slideIndex = 1;
      showSlides(slideIndex);

      function plusSlides(n) {
        showSlides(slideIndex += n);
      }

      function currentSlide(n) {
        showSlides(slideIndex = n);
      }

      function showSlides(n) {
        var i;
        var slides = document.getElementsByClassName("mySlides");
        var dots = document.getElementsByClassName("demo");
        if (n > slides.length) {slideIndex = 1}
        if (n < 1) {slideIndex = slides.length}
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
        }
        for (i = 0; i < dots.length; i++) {
            dots[i].className = dots[i].className.replace(" active", "");
        }
        slides[slideIndex-1].style.display = "block";
        dots[slideIndex-1].className += " active";
    }
</script>

{% endblock %}

HTML

<div id="myModal" class="modal">
    <div class="close-modal-container">
        <a href="#" class="btn d-flex align-items-center text-light" onclick="closeModal()" aria-label="{% trans "Close" %}">
            <span class="close-icon">{% icon 'CLOSE' 20 version='v2' %}</span>
            <span class="gr-link2 ml-2">{% trans "Close" %}</span>
        </a>
    </div>
    <div class="body-container">
        {% for file in files %}
            {% if file.is_image %}
                <div class="mySlides">
                    <div class="image-icon-cont">
                        <div class="d-flex flex-column">
                            <img class="modal-main-img" src="{{ file.file.url }}" alt="{{ file.tag }}">
                            <div class="my-1 text-light">
                                <span class="mr-1 subtitle1">{{ forloop.counter }} / {{ files|length }}</span>
                                <span class="subtitle1">{{ file.tag }}</span>
                            </div>
                        </div>
                        <a class="prev" onclick="plusSlides(-1)">{% icon "ARROW_LEFT" 24 version='v2' %}</a>
                        <a class="next" onclick="plusSlides(1)">{% icon "ARROW_RIGHT" 24 version='v2' %}</a>
                    </div>
                </div>
            {% endif %}
        {% endfor %}


        <div class="image-file-bottom-slides">
            {% for file in files %}
                {% if file.is_image %}
                    <img class="demo cursor slide-image mx-2" src="{{ file.file.url }}" alt="{{ file.tag }}" onclick="currentSlide({{ forloop.counter }})">
                {% endif %}
            {% endfor %}
        </div>
    </div>
</div>

CSS

/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  left: 50%;
  top: 50%;
  width: 100vw;
  height: 100vh;
  overflow: auto;
  background-color: #212121;
  transform: translate(-50%, -50%);
  max-height: none;
  max-width: 100%;
  ::-webkit-scrollbar{
    display: none !important;
  }
}




/* Next & previous buttons */
.prev {
  position: absolute;
  cursor: pointer;
  padding: 10px;
  background-color: #FFFFFF;
  color: #212121;
  border-radius: 3px;
  left: 15px;
  top: 50%;
  transform: translate(-50%, -50%);
}
.next {
  position: absolute;
  cursor: pointer;
  padding: 10px;
  background-color: #FFFFFF;
  color: #212121;
  border-radius: 3px;
  right: -30px;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: #F2F2F2;
}

.modal-main-img {
  width: 70vw;
  height: 70vh;
  object-fit: cover;
}


.active,
.demo:hover {
  opacity: 0.6 !important;
}

.modal-main-img.hover-shadow {
  transition: 0.3s;
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.slide-image{
  width: 137.67px;
  height: 94px;
  cursor: pointer;
  opacity: 1;
  border-radius: 3px;

}

.image-file-bottom-slides{
  display: flex;
  background-color: #212121;
  flex-wrap: nowrap;
  overflow-y: hidden;
  overflow-x: scroll;
  justify-content: flex-end;
  
}
.image-file-bottom-slides::-webkit-scrollbar {
  display: none;
}

.mySlides{
  background-color: #212121;
}
.image-icon-cont{
  position: relative;
  display: flex;
  justify-content: center;
}
.body-container{
  padding: 40px;
}

How can I center active selected image and float images to the left in images navigation part.

Answer 1

I'm trying to fully understand your question, do you mean you want to be able to move the selected image from any index to index 0 when selected?

If that's it, you can prepend the element to its parent $(this).parent().prepend(this)