Jump to content

Lightbox reverse


grumpybc

Recommended Posts

I whenever I hit on an image on the Lightbox the image is always loading in reverse to what it should be so when I hit image 4 it is showing image 1, please help me

 

here is the code

 

<div class="galleryrow">
<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 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 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>
Edited by grumpybc
Link to comment
Share on other sites

???? IF you add image above current images, meaning you have to change the index everytime, and since it requires JavaScript, you can use JavaScript to add onclick event with reference to functions and increment index ref as you loop through each image.

 

IF images added to bottom you just manually increase index ref as you add each image.

Link to comment
Share on other sites

remove onclick="openModal();currentSlide(n);" where n equals a number from image ('img' tags) with class "hover-shadow",

 

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

will become

 

<img src="images/gallery image 4.jpg" style="width:90%" class="hover-shadow cursor" height="195">

remove onclick="currentSlide(n);" where n equals a number from image ('img' tags) with class "demo"

 

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

will become

 

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

 

add following script to current

            window.onload = function() {

                var classImg1 = document.getElementsByClassName('hover-shadow');
                var classImg2 = document.getElementsByClassName('demo');

                for (var i = 0; i < classImg1.length; i++) {
                    incrementImgIndex(i);
                }

                function incrementImgIndex(i) {
                    classImg1[i].onclick = function() {
                        openModal();
                        currentSlide(i + 1);
                    }
                    classImg2[i].onclick = function() {
                        
                        currentSlide(i + 1);
                    }

                }



            }
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
×
×
  • Create New...