Images instead of Pages

[inmygarden]

Hi,

I am trying to use the Photo Album script and I want to use it so that it displays 10 images on my page. If I have 100 images - I would like to have two arrows (Left and Right) to navigate between the pages. Currently - the script is setup to generate pages. How can I recode it so that all I have to do is click on a Next button or Previous button? I really need some help here as I am still learning this. I had a good idea (at the end of the script) but it only works for the first two pages - and I am stuck after that.

Here is the code:
<script type="text/javascript">


var dimension="5x2" //Specify dimension of podcast (number of images shown), such as 4x2, 3x1 etc

//Specify images:
//podcastarray[x]=["path_to_image", "optional_title_attribute", "optional_link"]
var podcastarray=new Array()
podcastarray[0]=["images/lizphairic.jpg", "alt", "url"]
podcastarray[1]=["images/eatfeedic.jpg", "alt", "url"]
podcastarray[2]=["images/laneyic.jpg", "alt", "url"]
podcastarray[3]=["images/marilynmic.jpg", "alt", "url"]
podcastarray[4]=["images/craftychicaic.jpg", "alt", "url"]
podcastarray[5]=["images/ilnzic.jpg", "alt", "url"]
podcastarray[6]=["images/familymattersic.jpg", "alt", "url"]
podcastarray[7]=["images/parrotchatic.jpg", "alt", "url"]
podcastarray[8]=["images/dawndrewic.jpg","alt", "url""]


var href_target="_new" //Enter target attribute of links, if applicable

var totalslots=dimension.split("x")[0]*dimension.split("x")[1]

function buildimage(i){
var tempcontainer=podcastarray[i][3]!=""? '<a href="'+podcastarray[i][2]+'" target="'+href_target+'">' : ""
tempcontainer+='<img src="'+podcastarray[i][0]+'" border="1" title="'+podcastarray[i][1]+'">'
tempcontainer=podcastarray[i][3]!=""? tempcontainer+'</a>' : tempcontainer
return tempcontainer
}

function jumptopage(p){
var startpoint=(p-1)*totalslots
var y=1;
for (i=0; i<totalslots; i++){
document.getElementById("slide"+i).innerHTML=(typeof podcastarray[startpoint+i]!="undefined")? buildimage(startpoint+i) : ""
}
while(document.getElementById("funPersonName"+y)!=null){
document.getElementById("funPersonName"+y).className=""
y++
}
document.getElementById("funPersonName"+p).className="current"
}

var curimage=0
for (y=0; y<dimension.split("x")[1]; y++){
for (x=0; x<dimension.split("x")[0]; x++){
if (curimage<podcastarray.length)
document.write('<div id="slide'+curimage+'" class="slideshow">'+buildimage(curimage)+'</div>')
curimage++
}
document.write('<br style="clear: left" />')
}

</script>

<!--Below HTML code refers to the navigational links for the podcast-->
<div id="slide'+curimage+'" class="funPersonName">
<script type="text/javascript">
for (i=1; i<Math.ceil(podcastarray.length/totalslots)+1; i++)
document.write('<a id="funPersonName'+i+'" href="javascript:jumptopage('+i+')\">'+i+'\&nbsp;&nbsp; </a> ')
document.getElementById("funPersonName1").className="current"
</script>
<img src="images/previous.gif" alt="Previous" onclick="jumptopage(1)">
<img src="images/next.gif" alt="Next" onclick="jumptopage(2)">

[jscheuer1]

Please provide a link to the demo page where you got this script.

[jscheuer1]

If this is from the script that I think that it is, working from the default script, you would comment out or remove this line:


document.getElementById("navlink"+p).className="current"

Add this variable and function to the end of the main script:


var curpage=1;
function turn_page(d){
var pages=Math.ceil(galleryarray.length/totalslots);
curpage=d=='f'&&curpage<pages? curpage+1 : d=='f'? 1 : curpage>1? curpage-1 : pages;
jumptopage(curpage);
}

Replace this stuff:


<script type="text/javascript">
for (i=1; i<Math.ceil(galleryarray.length/totalslots)+1; i++)
document.write('<a id="navlink'+i+'" href="javascript:jumptopage('+i+')\">Page'+i+'</a> ')
document.getElementById("navlink1").className="current"
</script>

With:


<img src="backward.gif" style="cursor:pointer;" onclick="turn_page('r');"> &nbsp; <img src="forward.gif" style="cursor:pointer;" onclick="turn_page('f');">

[inmygarden]

the link to the js that I am using is: http://www.dynamicdrive.com/dynamicindex4/photoalbum.htm

and I tried to use the new script - but no luck so far...with showing my images - just shows the two arrows now...and I get a galleryarray is undefined msg.

[inmygarden]

PERFECT! Your code works like a champ! Thanks so much!!

[jscheuer1]

You're welcome. To have the code validate (by adding the 'required' alt attribute) and to give the users additional clues as to what your arrows do (by adding the optional title attribute), you could do this:


<img src="backward.gif" alt="backward control" title="Click to go Back" style="cursor:pointer;" onclick="turn_page('r');"> &nbsp; <img alt="forward control" title="Click to go Forward" src="forward.gif" style="cursor:pointer;" onclick="turn_page('f');">