How to create a for loop based lightbox gallery with django

How to create a for loop based lightbox gallery with django - javascript

(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>

Related

Problem with my slider, it does not appear

I'm trying to make a slider for my website, but the slider I created is not rendering.
I attempted to write only the slider's markup, which worked, however, it is not working on my webpage.
Here is the code:
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("custom-slider");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex-1].style.display = "block";
}
.custom-slider {
display: none;
}
.slide-container {
max-width: 800px;
position: relative;
margin: 50px auto;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: white;
font-size: 30px;
background-color: rgba(0,0,0,0);
transition: background-color 0.6s ease;
}
.prev{
left: 15px;
}
.next {
right: 15px;
}
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.5);
}
.slide-text {
position: absolute;
color: #ffffff;
font-size: 15px;
padding: 15px;
bottom: 15px;
width: 100%;
text-align: center;
}
.slide-img{
width: 100%;
height: 500px;
object-fit: cover;
object-position: center;
}
<div class="section3">
<h1 class="titre" id="realisations">REALISATIONS</h1>
<div class="slide-container">
<div class="custom-slider fade">
<img class="slide-img" src="imgr/Batiment.jpg">
<div class="slide-text">text1</div>
</div>
<div class="custom-slider fade">
<img class="slide-img" src="imgr/emmanchement2.jpg">
<div class="slide-text">text2</div>
</div>
<div class="custom-slider fade">
<img class="slide-img" src="imgr/Emmanchement_goupilles.jpg">
<div class="slide-text">text3</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
</div>
If I change the display on the custom-slider, the slider appears, but with an image above, and an image below. When I click the button for swap pic, the display works as expected.

Here are some notes that may help:
CSS can be added to the <head> section by wrapping the css in <style> tags
The <script> tag can be placed in the <head> section of your HTML or in the <body> section, depending on when you want the JavaScript to load
In your case... Your Javascript file needs to get some informations from your html document. Like this : var slides = document.getElementsByClassName("custom-slider"); so your html should be ready before your js codes. When you include your js in <head> , your html document wont load compeletly . So your js file have nothing to get the information that it needs.
You can also read this :
script doesnt load when on head

How to animate a js filtering

I'm using Bootstrap and I get the JavaScript code for the filterable div elements from W3Schools. It's an easy mode to filter but it's a bit bored without animations.
Because of this, I'm trying to add some animations by CSS or js in my filter code and I don't know how to run it. I tried CSS and js animations but nothing, it's not working.
HTML
<div class="container-fluid">
<div id="myBtnContainer">
<ul>
<li class="list-inline-item"><button class="btn active" onclick="filterSelection('all')">All</button></li>
<li class="list-inline-item"><button class="btn" onclick="filterSelection('category1')">Category1</button></li>
<li class="list-inline-item"><button class="btn" onclick="filterSelection('category2')">Category2</button></li>
</ul>
</div>
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 g-3 pt-2 pb-5">
<div class="col fade-in-image filterDiv category1 show">
<a href="http://localhost:8888/test01/projects/project1/">
<div class="card">
<img width="480" height="320" src="http://localhost:8888/test01/wp-content/uploads/2021/06/img1.jpeg" class="img-fluid wp-post-image" alt="" loading="lazy">
<div class="hover-project">
<h3 class="titol-projecte">Project 1</h3>
<p class="location pb-4">Location 1</p>
<p class="category">Category 1</p>
</div>
</div>
</a>
</div>
<div class="col fade-in-image filterDiv category-2 show">
<a href="http://localhost:8888/test01/projects/project2/">
<div class="card">
<img width="480" height="320" src="http://localhost:8888/test01/wp-content/uploads/2021/06/img2.jpeg" class="img-fluid wp-post-image" alt="" loading="lazy">
<div class="hover-project">
<h3 class="titol-projecte">Project 2</h3>
<p class="location pb-4">Location 2</p>
<p class="category">Category 2</p>
</div>
</div>
</a>
</div>
</div>
</div>
The JavaScript I used:
filterSelection("all")
function filterSelection(c) {
var x, i;
x = document.getElementsByClassName("filterDiv");
if (c == "all") c = "";
// Add the "show" class (display:block) to the filtered elements, and remove the "show" class from the elements that are not selected
for (i = 0; i < x.length; i++) {
w3RemoveClass(x[i], "show");
if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
}
}
// Show filtered elements
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];
}
}
}
// Hide elements that are not selected
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 control button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
The CSS i used
.filterDiv {
display: none; /* Hidden by default */
visibility: hidden;
opacity: 0;
}
/* The "show" class is added to the filtered elements */
.show {
display: block;
visibility: visible;
opacity: 1;
}
Thank you!!

Here is one ready example you can use for your code, its pretty amazing in my opinion
<div class="wrap">
<div class="container">
<div class="row">
<div class="twelve columns">
<h4>Filter Programs</h4>
</div>
</div><!-- end of row -->
<div class="row">
<div class="twelve columns">
<div class="programs">
<button class="filter-btn" data-filter="all">All</button>
<button class="filter-btn" data-filter=".undergraduate">Undergraduate</button>
<button class="filter-btn" data-filter=".graduate">Graduate</button>
<button class="filter-btn" data-filter=".phd">PhD</button>
</div>
</div>
</div><!-- end of row -->
<div class="row">
<div class="columns twelve">
<h4>Sort Programs</h4>
</div>
</div><!-- end of row -->
<div class="row">
<div class="columns twelve">
<div class="programs">
<button class="sort-btn" data-sort="default:asc">Default</button>
<button class="sort-btn" data-sort="random">Random</button>
<button class="sort-btn" data-sort="order:asc">Ascending</button>
<button class="sort-btn" data-sort="year:desc order:desc">Descending<span
class="multi">(Multi)</span></button>
</div>
</div>
</div><!-- end of row -->
<div class="row">
<div class="twelve columns">
<h4>Programs List</h4>
</div>
</div><!-- end of row -->
<div class="row">
<div class="twelve columns">
<ul class="courses" id="mix-wrapper">
<li class="mix-target undergraduate" data-order="5" data-year="4">Economics<span>(U)</span></li>
<li class="mix-target graduate" data-order="14" data-year="2">Pharmacology<span>(G)</span></li>
<li class="mix-target graduate" data-order="7" data-year="1">Informatics<span>(G)</span></li>
<li class="mix-target phd" data-order="4" data-year="3">Criminology<span>(P)</span>
</li>
<li class="mix-target undergraduate" data-order="16" data-year="3">Sociology<span>(U)</span></li>
<li class="mix-target undergraduate" data-order="6" data-year="4">Greek<span>(U)</span></li>
<li class="mix-target phd" data-order="1" data-year="3">Astrophysics<span>(P)</span>
</li>
<li class="mix-target undergraduate" data-order="12" data-year="4">Nursing<span>(U)</span></li>
<li class="mix-target undergraduate" data-order="10" data-year="5">Microbiology<span>(U)</span></li>
<li class="mix-target undergraduate" data-order="9" data-year="4">Mathematics<span>(U)</span></li>
<li class="mix-target graduate" data-order="11" data-year="3">Nanoscience<span>(G)</span></li>
<li class="mix-target phd" data-order="2" data-year="2">Biochemistry<span>(P)</span>
</li>
<li class="mix-target phd" data-order="13" data-year="3">Pathology<span>(P)</span>
</li>
<li class="mix-target graduate" data-order="8" data-year="1">Management<span>(G)</span></li>
<li class="mix-target graduate" data-order="3" data-year="2">Biostatistics<span>(G)</span></li>
<li class="mix-target phd" data-order="15" data-year="4"><a href="#">Public
Health<span>(P)</span></a></li>
</ul>
</div>
</div>
</div>
</div>
The CSS:
#import url(https://fonts.googleapis.com/css?family=Alegreya+Sans+SC);
body {
background: #ededed;
font-family: 'Alegreya Sans SC', sans-serif;
}
h4 {
font-size: 21px;
border-radius: 5px;
margin: 0 auto;
text-align: center;
background: #d2d2d2;
color: white;
font-weight: 700;
padding: 3px 0;
}
li {
margin: 0;
}
a {
font-size: 18px;
text-decoration: none;
}
span {
display: block;
font-size: .75em;
font-style: italic;
position: relative;
top: 5px;
}
.multi {
display: inline;
top: 0;
left: 3px;
}
img {
max-width: 100%;
}
.programs,
.courses {
margin: 8px 0 0 0;
}
.programs {
font-size: 0;
margin-bottom: 15px;
}
.programs button {
outline: none;
margin-bottom: 0;
background: whitesmoke;
width: 50%;
height: auto;
font-weight: normal;
border: 1px solid #ededed;
color: #000000;
font-size: 14px;
padding: 4px 0;
text-shadow: 0px 0px 0px #2f6627;
}
.programs button:hover {
background: #99cfe0;
}
.programs button.programs-filter-btn-active,
.programs button.programs-sort-btn-active {
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5) inset, 0px 0px 1px transparent;
background: #3a9fbf;
color: white;
}
.courses {
margin-bottom: 15px;
font-size: 0;
background: whitesmoke;
}
.courses li {
text-align: center;
font-size: 14px;
display: inline-block;
width: 46%;
margin: 0 2%;
}
.courses a {
display: block;
height: 60px;
margin: 15px 0;
padding-top: 12.5px;
background: whitesmoke;
color: black;
border: 1px solid white;
transition: all .4s ease;
}
.courses a:hover {
background: #99cfe0;
}
.p, .p a {
font-family: Arial, sans-serif;
font-size: 14px;
text-align: center;
}
/* MEDIA QUERIES STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#media only screen and (min-width: 750px) {
.container {
width: 95%;
}
.courses a {
background: #EBEBEB;
border: none;
}
h4 {
width: 50%;
margin-top: 12px;
}
img {
margin-bottom: 0;
}
.programs {
margin-bottom: 0;
}
.programs button {
width: 25%;
margin-bottom: 15px;
}
.courses li {
width: 21%;
}
}
The JS:
mixitup('#mix-wrapper', {
load: {
sort: 'order:asc'
},
animation: {
effects: 'fade rotateZ(-180deg)',
duration: 700
},
classNames: {
block: 'programs',
elementFilter: 'filter-btn',
elementSort: 'sort-btn'
},
selectors: {
target: '.mix-target'
}
});

Clicking on Slideshow works, but the auto run still runs

Essentially, my website's next arrow for the slideshow is working, but when you click on it, the image moves on and the timer still continues instead of stopping. If you keep clicking the next button, it skips the second image and then after stopping, it continues on very quickly in switching images. It is a peculiar bug and here it is in action: https://codepen.io/kush2610/pen/bGNYBPe
HTML CODE
<section class="pictures">
<h2 >Product Portfolio</h2 >
<!-- Slideshow container -->
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<img src="https://images.unsplash.com/photo-1508138221679-760a23a2285b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1567&q=80" style="width:100%">
</div>
<div class="mySlides fade">
<img src="https://images.unsplash.com/photo-1494253109108-2e30c049369b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3900&q=80" style="width:100%">
</div>
<div class="mySlides fade">
<img src="https://images.unsplash.com/photo-1485550409059-9afb054cada4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2598&q=80" style="width:100%">
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<!-- The dots/circles -->
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
</section>
Sorry if this sounds really strange what I am describing but it is such a strange bug I honestly do not know what else to say.

Don't use the same name for both showSlides functions. Overloading functions is not an option in JavaScript.
/* The SlideShow */
var slideIndex = 0;
// 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("dot");
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";
}
function showNextSlide() {
var i;
var slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1
}
slides[slideIndex - 1].style.display = "block";
setTimeout(showNextSlide, 7000); // Change image every 7 seconds
}
showNextSlide();
.pictures {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
;
}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
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);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active,
.dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
#keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
<!--Slideshow of the area
================================================== -->
<section class="pictures">
<h2>Product Portfolio</h2>
<!-- Slideshow container -->
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<img src="https://images.unsplash.com/photo-1508138221679-760a23a2285b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1567&q=80" style="width:100%">
</div>
<div class="mySlides fade">
<img src="https://images.unsplash.com/photo-1494253109108-2e30c049369b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3900&q=80" style="width:100%">
</div>
<div class="mySlides fade">
<img src="https://images.unsplash.com/photo-1485550409059-9afb054cada4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2598&q=80" style="width:100%">
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<!-- The dots/circles -->
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
</section>

It looks like your showSlides() function is setting a timeout which advances the slides. When you click your next button, another function is called, plusSlides(), which in turn calls showSlides() again. Thus, starting another timeout. The more you click the next button, the more timeouts you'll have running, and the more frequently you'll see your slides advance.
I don't have time to write the code right now, but I'd suggest killing any existing timeouts when you click the next button so you only have one running at a time.

How to use JS to build a slideshow [duplicate]

This question already has answers here:
Making a slideshow with arrays Javascript
(3 answers)
Closed 3 years ago.
I'm trying to finish my first website, I have short deadline, I know html css and a bit of JQuery, but right JS is still difficult for me
I would like to have a slideshow in my website, that's why I went to the w3school and tried to replicate the example in my visual studio code.
$(document).ready(() => {
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("myslides");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex - 1].style.display = "block";
}
});
.slideshow-container {
max-width: 100%;
position: relative;
margin: auto;
}
.myslides {
display: none;
}
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
.fade {
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slideshow-container">
<div class="myslides fade">
<img src="./IMAGENS/CASA A (1).jpg" width="100%">
</div>
<div class="myslides fade">
<img src="./IMAGENS/CASA B (3).jpg" width="100%">
</div>
<div class="myslides fade">
<img src="./IMAGENS/MUDA_L11_02_FINAL.jpg" width="100%">
</div>
<div class="myslides fade">
<img src="./IMAGENS/MUDA_L11_05_FINAL.jpg" width="100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
When I try to refresh the page everything looks fine but when I click in the button to change slides nothing happens. What you think should I do?
I tried to make a slideshow with arrays and it didn´t work. So I think it´s a problem with my VSCODE not assuming these two elements.
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
In my program when I do onclick="plusSlides(-1)" the first quote appears in yellow but the second one in white it seems that onclick is not asssigned

Just as #edinhajdarevic said, using an array is a better approach due to many advantages, some of those are the following:
Rendering your slides in the DOM using an array makes your structure dynamic. Dynamic means, everytime you want to add a new slide, you could append a new slide object to your array of slides, instead of writting an HTML and a JavaScript every slide by hand.
Once you have all of your slide code defined, you will be able to mantain your code with ease, instead of reading multiple lines, you just have to care about your JavaScript code.
Less error prone, every time you copy/paste HTML or JavaScript to build another slide, you will have to change values based on the new slide, sometimes this turns into a messy work causing bugs in a future.
A nice tutorial can be found in the following W3Schools link:
Slideshow Tutorial

Your functions are declared on scope of $(document).ready's callback, so onclick cannot reach them.
Solution 1: Move your declarations outside $(document).ready's callback.
var slideIndex = 1;
$(document).ready(() => {
showSlides(slideIndex);
});
function plusSlides(n) {
showSlides(slideIndex += n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("myslides");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex - 1].style.display = "block";
}
.slideshow-container {
max-width: 100%;
position: relative;
margin: auto;
}
.myslides {
display: none;
}
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
.fade {
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slideshow-container">
<div class="myslides fade">
<img src="https://via.placeholder.com/400x200&text=image+1" width="100%">
</div>
<div class="myslides fade">
<img src="https://via.placeholder.com/400x200&text=image+2" width="100%">
</div>
<div class="myslides fade">
<img src="https://via.placeholder.com/400x200&text=image+3" width="100%">
</div>
<div class="myslides fade">
<img src="https://via.placeholder.com/400x200&text=image+4" width="100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
Solution 2: Remove onclick attributes and add click listeners in $(document).ready's callback
$(document).ready(() => {
var slideIndex = 1;
showSlides(slideIndex);
$(".prev").click(function() {
plusSlides(-1);
});
$(".next").click(function() {
plusSlides(1);
});
function plusSlides(n) {
showSlides(slideIndex += n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("myslides");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex - 1].style.display = "block";
}
});
.slideshow-container {
max-width: 100%;
position: relative;
margin: auto;
}
.myslides {
display: none;
}
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
.fade {
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slideshow-container">
<div class="myslides fade">
<img src="https://via.placeholder.com/400x200&text=image+1" width="100%">
</div>
<div class="myslides fade">
<img src="https://via.placeholder.com/400x200&text=image+2" width="100%">
</div>
<div class="myslides fade">
<img src="https://via.placeholder.com/400x200&text=image+3" width="100%">
</div>
<div class="myslides fade">
<img src="https://via.placeholder.com/400x200&text=image+4" width="100%">
</div>
<a class="prev">❮</a>
<a class="next">❯</a>
</div>

How to display Image in slider

I am trying to display images in slider. But my images are displaying one below the other.
View:
#if (Model.Photos.Count > 0)
{
<div style="padding:10px">
<div class="slide-content" style="max-width:800px">
#foreach (var photos in Model.Photos)
{
<img class="mySlides" src="#Url.Content(#photos.photo_url)" style="width:100%">
}
<div class="w3-center">
<div class="w3-section">
<button class="w3-button w3-light-grey" onclick="plusDivs(-1)">❮ </button>
<button class="w3-button w3-light-grey" onclick="plusDivs(1)"> ❯</button>
</div>
</div>
</div>
</div>
}
</div>
CSS :
javascript:

I recreated the carousel using the code you provided. The only issue I found was that there are no dots being provided in the HTML. Once I removed all references to the dots in the JavaScript everything worked as expected.
If you are still experiencing the issue, I would recommend posting the rendered HTML as I didn't encounter any issues related to image positioning.
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
//var dots = document.getElementsByClassName("Slides");
if (n > x.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = x.length
}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
/*
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" w3-red", "");
}
*/
x[slideIndex - 1].style.display = "block";
//dots[slideIndex - 1].className += " w3-red";
}
.slide-content {
max-width: 300px;
margin: auto;
position: relative;
}
.mySlides {
display: block;
}
.slide-content {
margin: auto;
}
.w3-center {
text-align: center !important;
}
.w3-section,
.w3-code {
margin-top: 16px !important;
margin-bottom: 16px !important;
}
.w3-light-grey,
.w3-hover-light-grey:hover,
.w3-light-gray,
.w3-hover-light-gray:hover {
/* color: #000 !important; */
background-color: #f1f1f1 !important;
}
.w3-btn,
.w3-button {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.w3-btn,
.w3-button {
border: none;
display: inline-block;
padding: 8px 16px;
vertical-align: middle;
overflow: hidden;
text-decoration: none;
color: inherit;
background-color: inherit;
text-align: center;
cursor: pointer;
white-space: nowrap;
}
button,
html [type=button],
[type=reset],
[type=submit] {
-webkit-appearence: button;
}
/* Custom styles for testing */
img {
max-height: 300px;
margin-left: auto;
margin-right: auto;
}
<div style="padding:10px">
<div class="slide-content" style="max-width:800px">
<img class="mySlides" src="https://i.ytimg.com/vi/5Nj2BngIko0/maxresdefault.jpg">
<img class="mySlides" src="https://images-na.ssl-images-amazon.com/images/I/51IwmuOPQyL._SL1052_.jpg">
<img class="mySlides" src="http://i0.kym-cdn.com/entries/icons/original/000/016/546/hidethepainharold.jpg">
<div class="w3-center">
<div class="w3-section">
<button class="w3-button w3-light-grey" onclick="plusDivs(-1)">❮ </button>
<button class="w3-button w3-light-grey" onclick="plusDivs(1)"> ❯</button>
</div>
</div>
</div>
</div>

Try using "Owl Carousel 2" plugin, it's great and very simple.

Develop Reference

JavaScript is the programming language of the Web.

How to create a for loop based lightbox gallery with django - javascript

Related

Problem with my slider, it does not appear

How to animate a js filtering

Clicking on Slideshow works, but the auto run still runs

How to use JS to build a slideshow [duplicate]

How to display Image in slider

Categories

Resources