Jump to content

grumpybc

Members
  • Posts

    6
  • Joined

  • Last visited

Posts posted by grumpybc

  1. 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 ?

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