grumpybc
-
Posts
6 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Posts posted by grumpybc
-
-
would there be another way because I don't want to have to change 200 photos very time I add 10 more ?
-
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 ?
-
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> -
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
-
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>
Lightbox reverse
in General
Posted
ok thanks for all of your help