Develop Reference

How to create a for loop based lightbox gallery with django

(Newbie Django dev here, with no Javascript knowledge)
I'm building a Django website designed to display one page for each notice in the db.
Some images can be attached to the notices: sometimes none, sometimes a few, up to maximum a dozen.
I'd like to display these images on top of the detail.html page, following the example shown here:
https://www.w3schools.com/howto/howto_js_lightbox.asp
I understood that I need to adapt the code to use a for loop. I did my best to adapt it but I'm stuck with a non working gallery.
Here is my code right now, adapted from the tutorial:
detail.html:
<div id="illustrations" class="galerie">
{% for image in object.illustration_objet_archi.all %}
<div class="row">
<div class="column">
<img src="{{ image.image_thumbnail.url }}" onclick="openModal();currentSlide({{ forloop.counter }})" class="hover-shadow">
</div>
</div>
<!-- The Modal/Lightbox -->
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext"> {{ forloop.counter }} / {{ image.image.count }} </div>
<img src="{{ image.image.url }}" style="width:100%">
</div>
<!-- Next/previous controls -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<!-- Caption text -->
<div class="caption-container">
<p id="caption">{{ image.legende }}</p>
</div>
<!-- Thumbnail image controls -->
<div class="column">
<img class="demo" src="{{ image.image.url }}" onclick="currentSlide({{ forloop.counter }})">
</div>
</div>
</div>
{% endfor %}
</div>
style.css (the body refers to a text area following the gallery):
body {
font: 16px/1.5em "Overpass", "Open Sans", Helvetica, sans-serif;
color: #333;
font-weight: 300;
}
.galerie {
width: 80%;
}
.row > .column {
padding: 0 8px;
}
.row:after {
content: "";
display: table;
clear: both;
}
/* Create four equal columns that floats next to eachother */
.column {
float: left;
width: 20%;
}
/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
width: 80%;
max-width: 900px;
}
/* The Close Button */
.close {
color: white;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
/* Hide the slides by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* Caption text */
.caption-container {
text-align: center;
background-color: black;
padding: 2px 16px;
color: white;
}
img.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
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);
}
lightbox.js:
// Open the Modal
function openModal() {
document.getElementById("myModal").style.display = "block";
}
// Close the Modal
function closeModal() {
document.getElementById("myModal").style.display = "none";
}
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);a
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
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";
captionText.innerHTML = dots[slideIndex-1].alt;
}

Your loop is in wrong div. You only need a image to be in loop so use loop only outside a img tag where you need dynamic image. Can you try replacing your detail.html code with the following code.
<div id="illustrations" class="galerie">
<div class="row">
{% for image in object.illustration_objet_archi.all %}
<div class="column">
<img src="{{ image.image_thumbnail.url }}" onclick="openModal();currentSlide({{ forloop.counter }})" class="hover-shadow">
</div>
{% endfor %}
</div>
<!-- The Modal/Lightbox -->
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
{% for image in object.illustration_objet_archi.all %}
<div class="mySlides">
<div class="numbertext"> {{ forloop.counter }} / {{ image.image.count }} </div>
<img src="{{ image.image.url }}" style="width:100%">
</div>
{% endfor %}
<!-- Next/previous controls -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<!-- Caption text -->
<div class="caption-container">
<p id="caption">{{ image.legende }}</p>
</div>
<!-- Thumbnail image controls -->
{% for image in object.illustration_objet_archi.all %}
<div class="column">
<img class="demo" src="{{ image.image.url }}" onclick="currentSlide({{ forloop.counter }})">
</div>
{% endfor %}
</div>

Multiple slideshows in html/css/js

I am trying to make multiple slideshows on my website, making use of some old w3schools code. The issue with their code is that it only allows a single slideshow per page which is not quite what i'm going for. To make it clear, I want to be able to have an infinite amount of slideshows per page but I don't want to copy and paste my code multiple times if possible
CSS:
* {
box-sizing: border-box;
}
/* Position the image container (needed to position the left and right arrows) */
.container2 {
position: relative;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Add a pointer when hovering over the thumbnail images */
.cursor {
cursor: pointer;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 40%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* Container for image text */
.caption-container {
text-align: center;
background-color: #222;
padding: 2px 16px;
color: white;
}
.row:after {
content: "";
display: table;
clear: both;
}
/* Six columns side by side */
.column {
float: left;
width: 16.66%;
}
/* Add a transparency effect for thumnbail images */
.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
JS:
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
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";
captionText.innerHTML = dots[slideIndex-1].alt;
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
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";
captionText.innerHTML = dots[slideIndex-1].alt;
}
HTML:
<h3>Minigame Mania:</h3>
<div class = "container2" >
<div class ="mySlides">
<div class ="numberText">1/3</div>
<img src="assets/img/SameLevelPrototypeGameplay1.png" style="width: 100%">
</div>
<div class ="mySlides">
<div class ="numberText">2/3</div>
<img src="assets/img/SameLevelPrototypeGameplay2.png" style="width: 100%">
</div>
<div class ="mySlides">
<div class ="numberText">3/3</div>
<img src="assets/img/SameLevelPrototypeGameplay3.png" style="width: 100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class ="caption-container">
<p id="caption"></p>
</div>
<div class="row">
<div class ="column">
<img class ="demo cursor" src="assets/img/SameLevelPrototypeGameplay1.png" style="width:100%" onclick="currentSlide(1)" alt="Gameplay">
</div>
<div class ="column">
<img class ="demo cursor" src="assets/img/SameLevelPrototypeGameplay2.png" style="width:100%" onclick="currentSlide(2)" alt="Gameplay">
</div>
<div class ="column">
<img class ="demo cursor" src="assets/img/SameLevelPrototypeGameplay3.png" style="width:100%" onclick="currentSlide(3)" alt="Gameplay">
</div>
</div>
</div>
<!-- Same Level Prototype info, description etc -->
<h3>Same Level Prototype:</h3>
<div class = "container2">
<div class ="mySlides">
<div class ="numberText">1/3</div>
<img src="assets/img/SameLevelPrototypeGameplay1.png" style="width: 100%">
</div>
<div class ="mySlides">
<div class ="numberText">2/3</div>
<img src="assets/img/SameLevelPrototypeGameplay2.png" style="width: 100%">
</div>
<div class ="mySlides">
<div class ="numberText">3/3</div>
<img src="assets/img/SameLevelPrototypeGameplay3.png" style="width: 100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class ="caption-container">
<p id="caption"></p>
</div>
<div class="row">
<div class ="column">
<img class ="demo cursor" src="assets/img/SameLevelPrototypeGameplay1.png" style="width:100%" onclick="currentSlide(1)" alt="Gameplay">
</div>
<div class ="column">
<img class ="demo cursor" src="assets/img/SameLevelPrototypeGameplay2.png" style="width:100%" onclick="currentSlide(2)" alt="Gameplay">
</div>
<div class ="column">
<img class ="demo cursor" src="assets/img/SameLevelPrototypeGameplay3.png" style="width:100%" onclick="currentSlide(3)" alt="Gameplay">
</div>
</div>
I have tried a few methods such as adding gallery ID's but they weren't successful. I'm rather new to html, css and js so that's why i'm stumped on a problem that probably seems simple to some of you. Any help is greatly appreciated, thanks in advance!

Automatic slideahow [duplicate]

This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 2 years ago.
Ive been working on this for a while now and I can't seem to get the javascript to fire the for loop to work. I've been using w3Schools as reference and Been doing a lot of research and still cam up empty. Please if anyone has any insight or an alternative way please let me know.
The aspx side
<style>
.mySlides {
display: none;
}
</style>
<script>
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) { myIndex = 1 }
x[myIndex - 1].style.display = "block";
setTimeout(carousel, 10000); // Change image every 10 seconds
}
</script>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="content section" style="max-width: 100%;">
<img class="mySlides" src="img/personel.png" style="width: 100%; height: 800px" />
<img class="mySlides" src="img/integration.png" style="width: 100%; height: 800px" />
<img class="mySlides" src="img/tech_background.png" style="width: 100%; height: 800px" />
</div>
</div>
</div>
CSS
.content {
max-width: 980px
}
.section, .code {
margin-top: 16px !important;
margin-bottom: 16px !important
}
.code, .codespan {
font-family: Consolas,"courier new";
font-size: 16px
}
.code {
width: auto;
background-color: #fff;
padding: 8px 12px;
border-left: 4px solid #4CAF50;
word-wrap: break-word
}
.codespan {
color: crimson;
background-color: #f1f1f1;
padding-left: 4px;
padding-right: 4px;
font-size: 110%
}

As mentioned in the comment, you simply have to move your <script></script> block after the slideshow HTML (usually you place it at the very end of the body, right before the closing </body>) so that it is executed after the elements you are trying to select are loaded into the DOM:
.content {
max-width: 980px
}
.section,
.code {
margin-top: 16px !important;
margin-bottom: 16px !important
}
.code,
.codespan {
font-family: Consolas, "courier new";
font-size: 16px
}
.code {
width: auto;
background-color: #fff;
padding: 8px 12px;
border-left: 4px solid #4CAF50;
word-wrap: break-word
}
.codespan {
color: crimson;
background-color: #f1f1f1;
padding-left: 4px;
padding-right: 4px;
font-size: 110%
}
<style>
.mySlides {
display: none;
}
</style>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="content section" style="max-width: 100%;">
<img class="mySlides" alt="personel" src="img/personel.png" style="width: 100%; height: 800px" />
<img class="mySlides" alt="integration" src="img/integration.png" style="width: 100%; height: 800px" />
<img class="mySlides" alt="tech_background" src="img/tech_background.png" style="width: 100%; height: 800px" />
</div>
</div>
</div>
<script>
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {
myIndex = 1
}
x[myIndex - 1].style.display = "block";
setTimeout(carousel, 10000); // Change image every 10 seconds
}
</script>

Image filter plugin works in one project but not in another

I am using a plugin from w3schools to filter elements. It works perfectly in one of my projects. But now I am trying to use it in another project of mine but it doesn't work. Here is the code pen:
https://codepen.io/zakero/pen/mZYBPz
can anyone find an issue in this, please?
Javascript:
filterSelection("all")
function filterSelection(c) {
var x, i;
x = document.getElementsByClassName("work-images");
if (c == "all") c = "";
for (i = 0; i < x.length; i++) {
w3RemoveClass(x[i], "show");
if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
}
}
function w3AddClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
}
}
function w3RemoveClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
while (arr1.indexOf(arr2[i]) > -1) {
arr1.splice(arr1.indexOf(arr2[i]), 1);
}
}
element.className = arr1.join(" ");
}
// Add active class to the current button (highlight it)
// change is-checked class on buttons
$('.button-group').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'button', function() {
$buttonGroup.find('.is-checked').removeClass('is-checked');
$( this ).addClass('is-checked');
});
});

Sorry, but it was much easier to write a new filter, than to troubleshoot one.
I changed the HTML (added a data-filtertype attribute), and wrote a jQuery click function that callst the filter (filterByType).
Much simpler code, less places to err. If the only thing your wanted was simply filtering the images, then this will do. (This is why it's suggested to write out what you want as a result - the way to that result is not always what you had in mind.)
$(".button").on('click', function(e) {
e.preventDefault();
filterByType($(this).attr('data-filtertype'))
})
function filterByType(type) {
$('.work-images').each(function(i, e) {
if (type !== 'all' && !$(e).hasClass(type)) {
$(e).hide()
} else {
$(e).show()
}
})
}
* {
box-sizing: border-box;
}
.button {
display: inline-block;
padding: 10px 40px;
background: #FF6760;
border: none;
font-weight: bold;
color: #fff;
font-family: lato_lightregular;
font-size: 14px;
cursor: pointer;
text-transform: uppercase;
}
.button:hover {
background: #616161;
color: #fff;
}
.button:active,
.button.is-checked {
background-color: #616161;
outline: 0;
}
.button.is-checked {
color: white;
text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8);
}
.button:active {
box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);
}
.button-group {
margin-bottom: 20px;
}
.button-group:after {
content: '';
display: block;
clear: both;
}
.button-group .button {
border-radius: 5px;
margin-left: 0;
margin-right: 8px;
}
.grid {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: 10px -16px;
}
/* clear fix */
.grid:after {
content: '';
display: block;
clear: both;
}
.work-images {
-ms-flex: 25%;
flex: 25%;
max-width: 25%;
border: 11px solid #fff;
}
.work-images img {
vertical-align: middle;
width: 100%;
height: 210px;
}
.work-images img:hover {
filter: none;
}
.close {
text-decoration: none;
float: right;
font-size: 24px;
font-weight: bold;
color: white;
}
.content {
display: inline-block;
}
.show {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="portfoliosection">
<div class="container">
<div class="myworks text-center">
<h2>Our Featured Works</h2>
<p>Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum.</p>
<div class="work-filter">
<div id="filters" class="button-group">
<button class="button is-checked" data-filtertype="all"> All</button>
<button class="button" data-filtertype="web"> Web Design</button>
<button class="button" data-filtertype="mob"> Mobile Design</button>
<button class="button" data-filtertype="photo"> Photography</button>
</div>
<div class="grid">
<div class="work-images web">
<img src="https://i.imgur.com/FZED8Yb.jpg" onclick="onClick(this)" alt="Web Design">
</div>
<div class="work-images mob">
<img src="https://i.imgur.com/Jzts3Bm.jpg" onclick="onClick(this)" alt="Mobile Design">
</div>
<div class="work-images photo">
<img src="https://i.imgur.com/IC4tsi0.jpg" onclick="onClick(this)" alt="Photography">
</div>
<div class="work-images mob">
<img src="https://i.imgur.com/1x1X5S6.jpg" onclick="onClick(this)" alt="Mobile Design">
</div>
<div class="work-images web">
<img src="https://i.imgur.com/RckvhDi.jpg" onclick="onClick(this)" alt="Web Design">
</div>
<div class="work-images photo">
<img src="https://i.imgur.com/zjteEnm.jpg" onclick="onClick(this)" alt="Photography">
</div>
<div class="work-images web">
<img src="https://i.imgur.com/i34YqDD.jpg" onclick="onClick(this)" alt="Web Design">
</div>
<div class="work-images photo">
<img src="https://i.imgur.com/2qwcGam.jpg" onclick="onClick(this)" alt="Photography">
</div>
<div class="work-images mob">
<img src="https://i.imgur.com/CoEb43e.jpg" onclick="onClick(this)" alt="Mobile Design">
</div>
<div class="work-images photo">
<img src="https://i.imgur.com/EemBYgT.jpg" onclick="onClick(this)" alt="Photography">
</div>
<div class="work-images web">
<img src="https://i.imgur.com/RdDfJUp.jpg" onclick="onClick(this)" alt="Web Design">
</div>
<div class="work-images photo">
<img src="https://i.imgur.com/FeKM3fp.jpg" onclick="onClick(this)" alt="Photography">
</div>
</div>
</div>
</div>
</div>
</section>

It seems you have forgotten display: none; in .work-images.
And for the is-checked class. Simply use the w3school code if you do not want to use jQuery.
var btnContainer = document.getElementById("filters");
var btns = btnContainer.getElementsByClassName("button");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("is-checked");
current[0].className = current[0].className.replace(" is-checked", "");
this.className += " is-checked";
});
}

Problems with my slide gallery

I have a few problems with the sliding gallery I added:
the buttons stuck below the gallery instead of its sides. (I tried to give them 'display: inline-block' (?)).
I want to divide the #gallrey div into 2. Which contain the #slideGallery & #galleryDescription. The div #galleryDescription contains <p> that is stuck at the bottom instead of top or center.
This is the format I want #gallery to have:
[button left][#slideGallery DIV][button right][#galleryDescription DIV]
Hope you understand me. :)
Here is my code:
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = x.length
}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex - 1].style.display = "block";
}
.mySlides {
height: 300px;
width: 300px;
}
#gallery {
width: 620px;
border: 1px solid black;
margin: 0 auto;
}
#gallerySlide {
display: inline-block;
width: 49%;
top: 0;
left: 0;
}
#galleryDescription {
display: inline-block;
width: 49%;
top: 0;
right: 0;
}
#glryDesc {
/* (glryDesc = gallery description) */
padding-left: 5px;
width: 90%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="gallery">
<div id="gallerySlide">
<img class="mySlides" src="images/slide1.png" />
<img class="mySlides" src="images/slide2.png" />
<img class="mySlides" src="images/slide3.jpg" />
<img class="mySlides" src="images/slide4.jpg" />
<button class="btn" onclick="plusDivs(-1)">❮</button>
<button class="btn" onclick="plusDivs(1)">❯</button>
</div>
<div id="galleryDescription">
<p id="glryDesc">This is gonna be the description of the slide gallery. The gallery is very nice. Also the description !</p>
</div>
</div>

Is this what you wanted?
You had way too many widths that were contradicting with each other. I had to compromise a little on the different sizes. Try adjusting them yourself.
left, top and right are properties do not work on elements that do not have a specific position set (relative, absolute or fixed). Default position is static.
I used flex containers and justify-content, align-items to align the items accordingly. Read up on them.
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
.mySlides {
height: 280px;
width: 280px;
display: none;
}
#gallery{
display: flex;
justify-content: center;
align-items: center;
width: 660px;
border: 1px solid black;
margin:0 auto;
}
#gallerySlide {
display: flex;
width: 49%;
}
#glryDesc { /* (glryDesc = gallery description) */
padding-left: 5px;
}
<div id="gallery">
<div id="gallerySlide">
<button class="btn" onclick="plusDivs(-1)">❮</button>
<img class="mySlides" src="images/slide1.png" />
<img class="mySlides" src="images/slide2.png" />
<img class="mySlides" src="images/slide3.jpg" />
<img class="mySlides" src="images/slide4.jpg" />
<button class="btn" onclick="plusDivs(1)">❯</button>
</div>
<div id="galleryDescription">
<p id="glryDesc">This is gonna be the description of the slide gallery. The gallery is very nice. Also the description !</p>
</div>
</div>