By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,594 Members | 3,291 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,594 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+
10 Replies


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

Post your reply

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