grumpybc Posted January 15, 2017 Share Posted January 15, 2017 (edited) 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 January 15, 2017 by grumpybc Link to comment Share on other sites More sharing options...
dsonesuk Posted January 15, 2017 Share Posted January 15, 2017 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 Link to comment Share on other sites More sharing options...
grumpybc Posted January 16, 2017 Author Share Posted January 16, 2017 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 ? Link to comment Share on other sites More sharing options...
dsonesuk Posted January 16, 2017 Share Posted January 16, 2017 ???? 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 More sharing options...
grumpybc Posted January 17, 2017 Author Share Posted January 17, 2017 would there be another way because I don't want to have to change 200 photos very time I add 10 more ? Link to comment Share on other sites More sharing options...
dsonesuk Posted January 18, 2017 Share Posted January 18, 2017 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 More sharing options...
grumpybc Posted January 18, 2017 Author Share Posted January 18, 2017 ok thanks for all of your help Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now