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.
