How to make images change using next and previous buttons.

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Mary Seelye
    New Member
    • Oct 2010
    • 14
    #1

    How to make images change using next and previous buttons.

    This is what I have so far -
    I cannot get my next link to work, but my previous link works after you change the pic by clicking on it. I'd like to take the "onclick" out and just use the next and previous links to change the pictures. I have 5 pictures and I can only get two to 'almost' work:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Townhouse</title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<link rel="stylesheet" href="pineknoll_styles.css" type="text/css" />
<script type="text/javascript">
/* <![CDATA[ */
var curImage = "townhouse";
var cImages = [
'townhouse.jpg',
'townhouse2.jpg',
'townhouse3.jpg',
'townhouse4.jpg',
'townhouse5.jpg'
];
function townhousePics() {
if (curImage =="townhouse.jpg") {
document.images[0].src = "townhouse2.jpg";
curImage = "townhouse2";
}
else {
document.images[0].src = "townhouse2.jpg";
curImage = "townhouse2";
}
}
/* ]]> */
</script>
</head>
<body>
<table width="350">
<tr>
<td>Townhouse: <strong>$319,000</strong></td>
<td><a href="" onclick="self.close();">Close Window</a></td>

</tr>
</table>
<img src="townhouse.jpg" height="233" width="350"
onclick="townhousePics();" alt="photo of a townhouse" /><br />
<p>4 bed, 2 bath, 17,33 square feet, .42 acres</p>
<td><a href="" onclick="button;">Next</a></td>
<td><a href="" onclick="button;">Previous</a></td>

</body>
</html>
    Last edited by gits; Oct 17 '10, 09:09 AM. Reason: added code tags
    Tags: javascript, multiple images, next button, onclick function, previous button
    • gits
      Recognized Expert Moderator Expert
      • May 2007
      • 5388
      #2
      so do you just want to use 2 pictures or more?

        Comment

        • Mary Seelye
          New Member
          • Oct 2010
          • 14
          #3
          I'd like to use 5

            Comment

            • gits
              Recognized Expert Moderator Expert
              • May 2007
              • 5388
              #4
              then you might use a simple logic that we already used in your previous thread here. you could use a counter to make use of the image-sources in the array:

              Code:
              var curImage = 0;
var cImages = [
    'townhouse.jpg',
    'townhouse2.jpg',
    'townhouse3.jpg',
    'townhouse4.jpg',
    'townhouse5.jpg'
];

function townHousePics(direction) {
    if (direction == 'next') {
        curImage++;

        if (curImage == 5) {
            curImage = 0;
        }
    } else {
        curImage--;
        // even reset the counter here when
        // its getting 0
    }

    document.images[0].src = cImages[curImage];
}
              and in your links call the function like:

              Code:
              <a href="" onclick="townHousePics('next'); return false;">Next</a>
<a href="" onclick="townHousePics('previous'); return false;">Previous</a>

                Comment

                • Mary Seelye
                  New Member
                  • Oct 2010
                  • 14
                  #5
                  Thank you so much again! You are awesome, I really appreciate all the help!

                    Comment

                    • gits
                      Recognized Expert Moderator Expert
                      • May 2007
                      • 5388
                      #6
                      no problem :) ... that's why we're here for ...

                      kind regards

                        Comment

                        • Gowth
                          New Member
                          • Apr 2019
                          • 3
                          #7
                          Originally posted by gits
                          no problem :) ... that's why we're here for ...

                          kind regards
                          Hi,
                          I have to put images in the folder. How can we implement this method?

                            Comment

                            • gits
                              Recognized Expert Moderator Expert
                              • May 2007
                              • 5388
                              #8
                              what folder? you need to explain more what you want to achieve and what you have already - else any answer would just be guesswork.
                              Last edited by gits; Apr 12 '19, 01:19 PM.

                                Comment

                                • Gowth
                                  New Member
                                  • Apr 2019
                                  • 3
                                  #9
                                  Originally posted by gits
                                  what folder? you need to explain more what you want to achieve and what you have already - else any answer would just be guesswork.
                                  As in the above code you took 5 images in the list right, for my work I have to take images from the systems file folder and use click next and previous links to change images.

                                    Comment

                                    • gits
                                      Recognized Expert Moderator Expert
                                      • May 2007
                                      • 5388
                                      #10
                                      well - the list is just the image's names in some folder since we setting the src-attribute of the img-element here. basically the names in the cImages-array are to be seen as paths to the corresponding images. in case you dont want to hardcode that list you would need to create that list programmaticall y - for example you could send a request where a serverside script would read the folder and returns the paths to fill in the array.

                                      you could even go another way and write a service that passes the current image source and the 'direction' as params to the server and the server just delivers the next or previous image source. then this would be a request per click and then you set the src of the image with the response of your service.

                                        Comment

                                        • Gowth
                                          New Member
                                          • Apr 2019
                                          • 3
                                          #11
                                          oh ok I will try. thank you

                                            Comment

                                            • Sherin
                                              New Member
                                              • Jan 2020
                                              • 77
                                              #12
                                              HTML

                                              Code:
                                              <section id="modal">
        <section class="modal-background">
            <div class="close-btn">&times;</div>
            <figure>
                <img class="img-main" src="public/images/bird.jpg" alt="Bird on a tree">
            </figure>
            <figure class="modal-gallery">
                <img src="public/images/bird.jpg" alt="Bird on a tree">
                <img src="public/images/boat.jpg" alt="Boat at night">
                <img src="public/images/dog.jpg" alt="Dog sitting">
                <img src="public/images/fox.jpg" alt="Fox sitting">
                <img src="public/images/island.jpg" alt="Island">
                <img src="public/images/table-flowers.jpg" alt="Flowers on a table">
                <img src="public/images/city.jpg" alt="Village during the day">
                <img src="public/images/prague.jpg" alt="City of Prague at night">
                <img src="public/images/ducks.jpg" alt="Ducks in a pond">
                <img src="public/images/squirrel.jpg" alt="Squirrel in the snow">
                <img src="public/images/lemon.jpg" alt="Lemon slice">
                <img src="public/images/church.jpg" alt="Small church at night">
            </figure>
            <section class="modal-btns">
                <button class="modal-btn prev-btn">&lt;</button>
                <button class="modal-btn next-btn">&gt;</button>
            </section>
        </section>
    </section>
                                              JS

                                              Code:
                                              // TOGGLE IMAGE GALLERY MODAL ON CLICK //

var imgOverlays = document.querySelectorAll(".imgs section div");
var mainImg = document.querySelector(".img-main");
var allModalImgs = document.querySelectorAll(".modal-gallery img");
var modal = document.querySelector(".modal-background");
var closeBtn = document.querySelector(".close-btn");
var opacity = 0.4;

function resetOpacity() {
    for (i = 0; i < allModalImgs.length; i++) {
        allModalImgs[i].style.opacity = 1;
    }
}

document.querySelector("#gallery .imgs").addEventListener("click", function (e) {
    for (i = 0; i < imgOverlays.length; i++) {
        if (e.target == imgOverlays[i]) {
            modal.style.display = "block";
            mainImg.src = e.target.previousElementSibling.src;
        }
    }
});

                                                Comment

                                                Previous template Next
                                                Working...