By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
463,121 Members | 648 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 463,121 IT Pros & Developers. It's quick & easy.

How to make images change using next and previous buttons.

Mary Seelye
P: 14
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:

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>Townhouse</title>
  6. <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
  7. <link rel="stylesheet" href="pineknoll_styles.css" type="text/css" />
  8. <script type="text/javascript">
  9. /* <![CDATA[ */
  10. var curImage = "townhouse";
  11. var cImages = [
  12. 'townhouse.jpg',
  13. 'townhouse2.jpg',
  14. 'townhouse3.jpg',
  15. 'townhouse4.jpg',
  16. 'townhouse5.jpg'
  17. ];
  18. function townhousePics() {
  19. if (curImage =="townhouse.jpg") {
  20. document.images[0].src = "townhouse2.jpg";
  21. curImage = "townhouse2";
  22. }
  23. else {
  24. document.images[0].src = "townhouse2.jpg";
  25. curImage = "townhouse2";
  26. }
  27. }
  28. /* ]]> */
  29. </script>
  30. </head>
  31. <body>
  32. <table width="350">
  33. <tr>
  34. <td>Townhouse: <strong>$319,000</strong></td>
  35. <td><a href="" onclick="self.close();">Close Window</a></td>
  36.  
  37. </tr>
  38. </table>
  39. <img src="townhouse.jpg" height="233" width="350"
  40. onclick="townhousePics();" alt="photo of a townhouse" /><br />
  41. <p>4 bed, 2 bath, 17,33 square feet, .42 acres</p>
  42. <td><a href="" onclick="button;">Next</a></td>
  43. <td><a href="" onclick="button;">Previous</a></td>
  44.  
  45. </body>
  46. </html>
Oct 16 '10 #1

✓ answered by gits

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:

Expand|Select|Wrap|Line Numbers
  1. var curImage = 0;
  2. var cImages = [
  3.     'townhouse.jpg',
  4.     'townhouse2.jpg',
  5.     'townhouse3.jpg',
  6.     'townhouse4.jpg',
  7.     'townhouse5.jpg'
  8. ];
  9.  
  10. function townHousePics(direction) {
  11.     if (direction == 'next') {
  12.         curImage++;
  13.  
  14.         if (curImage == 5) {
  15.             curImage = 0;
  16.         }
  17.     } else {
  18.         curImage--;
  19.         // even reset the counter here when
  20.         // its getting 0
  21.     }
  22.  
  23.     document.images[0].src = cImages[curImage];
  24. }
  25.  
and in your links call the function like:

Expand|Select|Wrap|Line Numbers
  1. <a href="" onclick="townHousePics('next'); return false;">Next</a>
  2. <a href="" onclick="townHousePics('previous'); return false;">Previous</a>

Share this Question
Share on Google+
11 Replies

gits
Expert Mod 5K+
P: 5,390
so do you just want to use 2 pictures or more?
Oct 17 '10 #2

Mary Seelye
P: 14
I'd like to use 5
Oct 17 '10 #3

gits
Expert Mod 5K+
P: 5,390
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:

Expand|Select|Wrap|Line Numbers
  1. var curImage = 0;
  2. var cImages = [
  3.     'townhouse.jpg',
  4.     'townhouse2.jpg',
  5.     'townhouse3.jpg',
  6.     'townhouse4.jpg',
  7.     'townhouse5.jpg'
  8. ];
  9.  
  10. function townHousePics(direction) {
  11.     if (direction == 'next') {
  12.         curImage++;
  13.  
  14.         if (curImage == 5) {
  15.             curImage = 0;
  16.         }
  17.     } else {
  18.         curImage--;
  19.         // even reset the counter here when
  20.         // its getting 0
  21.     }
  22.  
  23.     document.images[0].src = cImages[curImage];
  24. }
  25.  
and in your links call the function like:

Expand|Select|Wrap|Line Numbers
  1. <a href="" onclick="townHousePics('next'); return false;">Next</a>
  2. <a href="" onclick="townHousePics('previous'); return false;">Previous</a>
Oct 17 '10 #4

Mary Seelye
P: 14
Thank you so much again! You are awesome, I really appreciate all the help!
Oct 17 '10 #5

gits
Expert Mod 5K+
P: 5,390
no problem :) ... that's why we're here for ...

kind regards
Oct 17 '10 #6

P: 3
@gits
Hi,
I have to put images in the folder. How can we implement this method?
Apr 12 '19 #7

gits
Expert Mod 5K+
P: 5,390
what folder? you need to explain more what you want to achieve and what you have already - else any answer would just be guesswork.
Apr 12 '19 #8

P: 3
@gits
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.
Apr 23 '19 #9

gits
Expert Mod 5K+
P: 5,390
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 programmatically - 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.
Apr 23 '19 #10

P: 3
oh ok I will try. thank you
Apr 23 '19 #11

P: 49
HTML

Expand|Select|Wrap|Line Numbers
  1. <section id="modal">
  2.         <section class="modal-background">
  3.             <div class="close-btn">&times;</div>
  4.             <figure>
  5.                 <img class="img-main" src="public/images/bird.jpg" alt="Bird on a tree">
  6.             </figure>
  7.             <figure class="modal-gallery">
  8.                 <img src="public/images/bird.jpg" alt="Bird on a tree">
  9.                 <img src="public/images/boat.jpg" alt="Boat at night">
  10.                 <img src="public/images/dog.jpg" alt="Dog sitting">
  11.                 <img src="public/images/fox.jpg" alt="Fox sitting">
  12.                 <img src="public/images/island.jpg" alt="Island">
  13.                 <img src="public/images/table-flowers.jpg" alt="Flowers on a table">
  14.                 <img src="public/images/city.jpg" alt="Village during the day">
  15.                 <img src="public/images/prague.jpg" alt="City of Prague at night">
  16.                 <img src="public/images/ducks.jpg" alt="Ducks in a pond">
  17.                 <img src="public/images/squirrel.jpg" alt="Squirrel in the snow">
  18.                 <img src="public/images/lemon.jpg" alt="Lemon slice">
  19.                 <img src="public/images/church.jpg" alt="Small church at night">
  20.             </figure>
  21.             <section class="modal-btns">
  22.                 <button class="modal-btn prev-btn">&lt;</button>
  23.                 <button class="modal-btn next-btn">&gt;</button>
  24.             </section>
  25.         </section>
  26.     </section>
JS

Expand|Select|Wrap|Line Numbers
  1. // TOGGLE IMAGE GALLERY MODAL ON CLICK //
  2.  
  3. var imgOverlays = document.querySelectorAll(".imgs section div");
  4. var mainImg = document.querySelector(".img-main");
  5. var allModalImgs = document.querySelectorAll(".modal-gallery img");
  6. var modal = document.querySelector(".modal-background");
  7. var closeBtn = document.querySelector(".close-btn");
  8. var opacity = 0.4;
  9.  
  10. function resetOpacity() {
  11.     for (i = 0; i < allModalImgs.length; i++) {
  12.         allModalImgs[i].style.opacity = 1;
  13.     }
  14. }
  15.  
  16. document.querySelector("#gallery .imgs").addEventListener("click", function (e) {
  17.     for (i = 0; i < imgOverlays.length; i++) {
  18.         if (e.target == imgOverlays[i]) {
  19.             modal.style.display = "block";
  20.             mainImg.src = e.target.previousElementSibling.src;
  21.         }
  22.     }
  23. });
Apr 17 '20 #12

Post your reply

Sign in to post your reply or Sign up for a free account.