Jump to content

Lightbox Javascript not working


grumpybc
 Share

Recommended Posts

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>
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...