Next Button In Image Gallery?

liunx

Guest
Hi, I have a basic photo gallery where there are 5 thumbnails in the Bottom div. When clicked, the full size photo will display in the Center div. In the Top div, I have Previous and Next links. I would like to be able to run though the photo gallery by clicking the Previous or Next button and having thge full size photo show up in the Center div. I used Swap Image for te thumbs but I'm not sure how the make the buttons work. Here is what I have so far:<br /><br /><!--c1--><div class='codetop'>CODE</div><div class='codemain'><!--ec1--><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><br /><title>Untitled Document</title><br /><link href=http://www.totalchoicehosting.com/forums/lofiversion/index.php/"Layout.css" rel="stylesheet" type="text/css" /><br /><script language="JavaScript" type="text/JavaScript"><br /><!--<br /><br />function MM_preloadImages() { //v3.0<br />  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();<br />    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)<br />    if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=http://www.totalchoicehosting.com/forums/lofiversion/index.php/a;}}<br />}<br /><br />function MM_findObj(n, d) { //v4.01<br />  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {<br />    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}<br />  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];<br />  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);<br />  if(!x && d.getElementById) x=d.getElementById(n); return x;<br />}<br /><br />function MM_swapImage() { //v3.0<br />  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)<br />   if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=http://www.totalchoicehosting.com/forums/lofiversion/index.php/x.src; x.src=a[i+2];}<br />}<br />//--><br /></script><br /></head><br /><br /><body onload="MM_preloadImages('NextPrev/joe_1.jpg','NextPrev/joe_2.jpg','NextPrev/joe_3.jpg','NextPrev/joe_4.jpg','NextPrev/joe_5.jpg')"><br /><div id="top"><br />  <div align="center"> Previous&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Next </div><br />  <div id="center"><br />    <div id="bottom"><br />      <div align="center"><a href=http://www.totalchoicehosting.com/forums/lofiversion/index.php/"javascript:;" onclick="MM_swapImage('target','','NextPrev/joe_1.jpg',1)"><img src="NextPrev/tjoe_1.jpg" name="Image1" width="75" height="75" border="0" class="thumb" id="Image1" /></a><a href="javascript:;" onclick="MM_swapImage('target','','NextPrev/joe_2.jpg',1)"><img src="NextPrev/tjoe_2.jpg" width="75" height="75" border="0" class="thumb" /></a><a href="javascript:;" onclick="MM_swapImage('target','','NextPrev/joe_3.jpg',1)"><img src="NextPrev/tjoe_3.jpg" width="75" height="75" border="0" class="thumb" /></a><a href="javascript:;" onclick="MM_swapImage('target','','NextPrev/joe_4.jpg',1)"><img src="NextPrev/tjoe_4.jpg" width="75" height="75" border="0" class="thumb" /></a><a href="javascript:;" onclick="MM_swapImage('target','','NextPrev/joe_5.jpg',1)"><img src="NextPrev/tjoe_5.jpg" width="75" height="75" border="0" class="thumb" /></a></div><br />    </div><br />    <div align="center"><img src=http://www.totalchoicehosting.com/forums/lofiversion/index.php/"NextPrev/joe_1.jpg" name="target" id="target" /></div><br />  </div><br /></div><br /></body><br /></html><!--c2--></div><!--ec2--><br /><br />Thanks for any help or advice! I can't seem to find any good tutorials on this matter.<!--content-->
I found a gallery script from <a href="http://codewalkers.com/seecode/574.html" target="_blank">codewalkers</a><br />that seems similar to what you are trying to so.<br />Maybe you can get some ideas from this code.<!--content-->
 
Back
Top