Yankman30 Posted August 19, 2005 Posted August 19, 2005 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: ><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <link href="Layout.css" rel="stylesheet" type="text/css" /> <script language="JavaScript" type="text/JavaScript"> <!-- function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> </script> </head> <body onload="MM_preloadImages('NextPrev/joe_1.jpg','NextPrev/joe_2.jpg','NextPrev/joe_3.jpg','NextPrev/joe_4.jpg','NextPrev/joe_5.jpg')"> <div id="top"> <div align="center"> Previous Next </div> <div id="center"> <div id="bottom"> <div align="center"><a href="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> </div> <div align="center"><img src="NextPrev/joe_1.jpg" name="target" id="target" /></div> </div> </div> </body> </html> Thanks for any help or advice! I can't seem to find any good tutorials on this matter. Quote
TCH-Don Posted August 21, 2005 Posted August 21, 2005 I found a gallery script from codewalkers that seems similar to what you are trying to so. Maybe you can get some ideas from this code. Quote
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.