showing a set # of images at a time, out of many.

[comartg]

I have several photos of a property, I want to show only 3 at a time, with next/previous buttons to bring up the next group of 3.
New to this, and not sure if this is where I should post this...someone please help with code examples or point me in the right direction?

[DrDoc]

Welcome to WebmasterWorld!

Are all the images of the same size? Do you have exactly 3X images, or is the number of images fluctuating? What will happen once you get to the end, or back to the beginning? Should it loop, or just stop?

We will start with something like this:

<a href="" onclick="previmg()">Prev</a> 
<img id="imga" src="image1.jpg" alt=""> 
<img id="imgb" src="image2.jpg" alt=""> 
<img id="imgc" src="image3.jpg" alt=""> 
<a href="" onclick="nextimg()">Next</a>

[comartg]

Thanks, for replying...when it gets to the end it will just stop. all the pics are the same size, then when you click on one of the pics, it opens in a new window with the original size pic. (that part I've got.) Most will have between 6-10 small pics to "scroll" through, but only 3 showing at any one time. you click "next" and get the next 3 images.

[DrDoc]

Based on the HTML structure I started with, you will need to do the following:

• Preload the images, assigned to an array with 3X records. If you have 10 images, slots 11 and 12 will be filled with a "blank" image.
  
• Keep a counter which keeps track of which set of "3" should be displayed.
  
• When

  previmg()

  or

  nextimg()

  is called, decrease or increase the counter by 3. If you go below 0, set to 0. If you go beyond the number of records, reduce to "3X - 3".
  
• Display images by setting the

  src

  .
  

[comartg]

thank you very much for the info...is there a site that would have the code for that that I could cut and paste, do you know?
Can write HTML, but javascript loses me.

[DrDoc]

Well, how about this:

<script type="text/javascript"> 
/* 
  Assumptions: 
  The images associated with each page are sequentially named. 
  (image1.jpg, image2.jpg, etc) 
  You also have a blank gif, called blank.gif. 
*/ 
// How many images? 
var intNumOfImgs = 10; 
// What is the path to the images? 
var strPathToImg = "./imgs/"; 
// What is the first part of the image name? 
var strImgPrefix = "image"; 
// What is the image suffix (i.e. type)? 
var strImgSuffix = ".jpg"; 
/* 
  YOU DO NOT NEED TO CHANGE ANYTHING BELOW THIS POINT! 
*/ 
var intImgPerSet = 3; 
var intCurImgSet = 1; 
var intTotImgSet = (intNumOfImgs + intImgPerSet - (intNumOfImgs % intImgPerSet)) / intImgPerSet; 
var arrImgSrc = new Array(intNumOfImgs + intImgPerSet - (intNumOfImgs % intImgPerSet)); 
for(var i = 0; i < intNumOfImgs + intImgPerSet - (intNumOfImgs % intImgPerSet); i++) { 
  arrImgSrc[i] = new Image(); 
  if(i < intNumOfImgs) { 
    arrImgSrc[i].src = strPathToImg + strImgPrefix + (i + 1) + strImgSuffix; 
  } 
  else { 
    arrImgSrc[i].src = strPathToImg + "blank.gif"; 
  }//end if 
}//end for 
function previmg() { 
  intCurImgSet--; 
  if(intCurImgSet < 1) { 
    intCurImgSet = 1; 
  }//end if 
  return setimages(); 
}//end previmg() 
function nextimg() { 
  intCurImgSet++; 
  if(intCurImgSet > intTotImgSet) { 
    intCurImgSet = intTotImgSet; 
  }//end if 
  return setimages(); 
}//end nextimg() 
function setimages() { 
  document.getElementById(imga).src = arrImgSrc[((intCurImgSet - 1) * intImgPerSet) + 1].src; 
  document.getElementById(imgb).src = arrImgSrc[((intCurImgSet - 1) * intImgPerSet) + 2].src; 
  document.getElementById(imgc).src = arrImgSrc[((intCurImgSet - 1) * intImgPerSet) + 3].src; 
  /* 
    If you ever want to use more than three images per page, do the following: 
    1) Edit the value for the intImgPerSet variable above 
    2) Add more <img> tags with IDs imgd, imge, imgf, etc. 
    3) Add more lines above: 
       document.getElementById(imgd).src = arrImgSrc[((intCurImgSet - 1) * intImgPerSet) + 4].src; 
       document.getElementById(imge).src = arrImgSrc[((intCurImgSet - 1) * intImgPerSet) + 5].src; 
       document.getElementById(imgf).src = arrImgSrc[((intCurImgSet - 1) * intImgPerSet) + 6].src; 
       etc. 
  */ 
  return true; 
}//end setimages() 
</script>

[comartg]

thank you so much, you have no idea. I'll try it in the morning.

[comartg]

I've got this loaded up, and it looks like it did before, which is good, it just doesn't move. I must be missing something, and also, in the <a href=""> for the previous and next I don't know what to put there, I don't want either to pull up an individual photo or a page, "next" goes to the next group of 3 photos, "previous" would go back to the original one.

I am going to check some tutorials to see if I can make sense of this. Thanks again, and if you don't mind helping just a bit more it would be a godsend!

Sorry to be such a pain.

[edited by: coopster at 3:13 pm (utc) on April 6, 2009]
[edit reason] no personal urls please TOS [webmasterworld.com] [/edit]

[DrDoc]

Using

return false

will cancel the normal navigation.

<a href="" onclick="previmg(); return false;">Prev</a>  
<img id="imga" src="image1.jpg" alt="">  
<img id="imgb" src="image2.jpg" alt="">  
<img id="imgc" src="image3.jpg" alt="">  
<a href="" onclick="nextimg(); return false;">Next</a>