grumpybc

Lightbox reverse

7 posts in this topic

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

Share this post


Link to post
Share on other sites

Because the number in currentSlide(4) refers to index number relating to specific image, the first image has the 4th images index, put the index in correct sequence 1 to 4 from top to bottom.

1 person likes this

Share this post


Link to post
Share on other sites

thanks for responding, and thanks it worked but I wanted to do it backwards because I will be adding a lot more images monthly, but when I add them the will be placed at the bottom or the page, how would I put them to the top ?

Share this post


Link to post
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.

Share this post


Link to post
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);
                    }

                }



            }

Share this post


Link to post
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