Lightbox Javascript not working

[grumpybc]

does anyone know why this doesn't work? it shows the picture but when I hit on it to maximise it, its not there. please help

 

<div class="galleryrow">

<div class="column">

<img src="images/gallery image 10.jpg" style="width:90%" onclick="openModal();currentSlide(10)" class="hover-shadow cursor" height="195px">

</div>

<div class="column">

<img src="images/gallery image 9.jpg" style="width:90%" onclick="openModal();currentSlide(9)" class="hover-shadow cursor" height="195px">

</div>

<div class="column">

<img src="images/gallery image 8.jpg" style="width:90%" onclick="openModal();currentSlide(8)" class="hover-shadow cursor" height="195px">

</div>

<div class="column">

<img src="images/gallery image 7.jpg" style="width:90%" onclick="openModal();currentSlide(7)" class="hover-shadow cursor" height="195px">

</div>

<div class="column">

<img src="images/gallery image 6.jpg" style="width:90%" onclick="openModal();currentSlide(6)" class="hover-shadow cursor" height="195px">

</div>

<div class="column">

<img src="images/gallery image 5.jpg" style="width:90%" onclick="openModal();currentSlide(5)" class="hover-shadow cursor" height="195px">

</div>

<div class="column">

<img src="images/gallery image 4.jpg" style="width:90%" onclick="openModal();currentSlide(4)" class="hover-shadow cursor" height="195px">

</div>

<div class="column">

<img src="images/gallery image 3.jpg" style="width:90%" onclick="openModal();currentSlide(3)" class="hover-shadow cursor" height="195px">

</div>

<div class="column">

<img src="images/gallery image 2.jpg" style="width:90%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor" height="195px">

</div>

<div class="column">

<img src="images/gallery image 1.jpg" style="width:90%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor" height="195px">

</div>

</div>

<div id="myModal" class="modal">

<span class="close cursor" onclick="closeModal()">×</span>

<div class="modal-content">

<div class="mySlides">

<img src="images/gallery image 10.jpg" style="width:100%" height="700px">

</div>

<div class="mySlides">

<img src="images/gallery image 9.jpg" style="width:100%" height="700px">

</div>

<div class="mySlides">

<img src="images/gallery image 8.jpg" style="width:100%" height="700px">

</div>

<div class="mySlides">

<img src="images/gallery image 7.jpg" style="width:100%" height="700px">

</div>

<div class="mySlides">

<img src="images/gallery image 6.jpg" style="width:100%" height="700px">

</div>

<div class="mySlides">

<img src="images/gallery image 5.jpg" style="width:100%" height="700px">

</div>

<div class="mySlides">

<img src="images/gallery image 4.jpg" style="width:100%" height="700px">

</div>

<div class="mySlides">

<img src="images/gallery image 3.jpg" style="width:100%" height="700px">

</div>

<div class="mySlides">

<img src="images/gallery image 2.jpg" style="width:100%" height="700px">

</div>

<div class="mySlides">

<img src="images/gallery image 1.jpg" style="width:100%" height="700px">

</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="column">

<img class="demo cursor" src="images/gallery image 10.jpg" style="width:100%" onclick="currentSlide(10)" alt="Home extenshion">

</div>

<div class="column">

<img class="demo cursor" src="images/gallery image 9.jpg" style="width:100%" onclick="currentSlide(9)" alt="Home extenshion">

</div>

<div class="column">

<img class="demo cursor" src="images/gallery image 8.jpg" style="width:100%" onclick="currentSlide(8)" alt="Home extenshion">

</div>

<div class="column">

<img class="demo cursor" src="images/gallery image 7.jpg" style="width:100%" onclick="currentSlide(7)" alt="Home extenshion">

</div>

<div class="column">

<img class="demo cursor" src="images/gallery image 6.jpg" style="width:100%" onclick="currentSlide(6)" alt="Home extenshion">

</div>

<div class="column">

<img class="demo cursor" src="images/gallery image 5.jpg" style="width:100%" onclick="currentSlide(5)" alt="Home extenshion">

</div>

<div class="column">

<img class="demo cursor" src="images/gallery image 4.jpg" style="width:100%" onclick="currentSlide(4)" alt="Home extenshion">

</div>

<div class="column">

<img class="demo cursor" src="images/gallery image 3.jpg" style="width:100%" onclick="currentSlide(3)" alt="Home extenshion">

</div>

<div class="column">

<img class="demo cursor" src="images/gallery image 2.jpg" style="width:100%" onclick="currentSlide(2)" alt="Home extenshion">

</div>

<div class="column">

<img class="demo cursor" src="images/gallery image 1.jpg" style="width:100%" onclick="currentSlide(1)" alt="Home">

</div>

</div>

</div>

<script>

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");

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.style.display = "none";

}

for (i = 0; i < dots.length; i++) {

dots.className = dots.className.replace(" active", "");

}

slides[slideIndex-1].style.display = "block";

dots[slideIndex-1].className += " active";

captionText.innerHTML = dots[slideIndex-1].alt;

}

</script>

[justsomeguy]

What do you mean, what exactly happens? Are there errors in the browser's console?

[grumpybc]

I haven't hosted the website yet, I have a gallery page and I can see all of the photos but when I click them to view them in the Lightbox they don't show up

Edited January 13, 2017 by grumpybc

[justsomeguy]

What about error messages? You need to figure out if there are any Javascript error messages telling you what the problems are before you try to just guess. When I ask what exactly happens, I mean saying "they don't show up" doesn't really help. If it's supposed to run the openModal function and make an element on the page visible, are you seeing that? If that element does become visible, what else happens? Again, make sure you check for error messages.

[dsonesuk]

You should avoid spaces in image filename and use '-' or '_' instead, else you will have to add encoded characters for space '%20' each time.