PHP Photo Album v2
1) Script Title: PHP Photo Album script
2) Script URL (on DD): www.calumogg.co.uk/test
3) Describe problem:
Hi all, I was looking for a new photo album for m site and liked the look of the PHP one since it loads it all automatically, so I had a play and managed to get it working with the Lightbox script, but there are two things that I cant manage to do and have had a look on the forum but cant find any answers, please just post a link if I have missed it though.
Firstly I would like the photos to be displayed in the middle of the page.
Secondly is there a way the photos can be added into a table.
Below is the code I am working with:
HTML Code:<!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=utf-8" /> <title>Test Gallery</title> <link href="../res/styles.css" rel="stylesheet"> <style type="text/css"> body { background-image: url(../res/bg.gif); background-repeat: repeat-x; } .button {background-color: rgb(128,128,128); color:#ffffff; font-size: 8pt;} .inputc {font-size: 8pt;} </style> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="js/lightbox.js"></script> </head> <body> <CENTER> <TABLE border="0" align="center" cellpadding="0" cellspacing="0" style="height:54px;"> <TR> <TD valign="middle" class="comment"><a href="../index.html">Home</a> | <a href="../about.html">About</a> | <a href="../contact/contact.htm">Contact</a></TD> <TD valign="middle" class="dirname style5"> </TD> <TD valign="middle"> <!-- Header of index pages --> <TABLE width="100%" border="0" cellpadding="0" cellspacing="0" style="width:722px;"> <TR> <TD style="width:20px;"><IMG SRC="../res/hdr_left.gif" border="0" alt=""></TD> <TD align="left" valign="middle" style="background:url(../res/hdr_mid.gif);" class="title" nowrap="nowrap"><div align="center"><span class="style4"><u>Calum Ogg's Photography</u></span></div></TD> <TD style="width:20px;"><IMG SRC="../res/hdr_right.gif" border="0" alt=""></TD> </TR></TABLE></TD> <TD valign="middle" class="dirname style5"> </TD> <TD valign="middle" class="comment"><a href="../shop/shop.html">Shop</a> | <a href="../guestbook/index.htm">Guestbook</a> | <a href="../links/photographerlinks.html">Links</a></TD> </TR></TABLE> <script src="http://www.calumogg.co.uk/test/thumbs/getpics.php" type="text/javascript"></script> <script type="text/javascript"> var dimension="6x4" //Specify dimension of gallery (number of images shown), such as 4x2, 3x1 etc var imagepath="http://www.calumogg.co.uk/test/thumbs/" //Absolute path to image directory. Include trailing slash (/) //Toggle popup link setting: popupsetting[0 or 1, "pop up window attributes" (if 1)] var popupsetting=[0, "width=500px, height=400px, scrollbars, resizable"] //Toggle image description: descriptionprefix[0 or 1, "Text to show" (if 1)] var descriptionprefix=[0, ""] //Sort images by date? ("asc", "desc", or "") //"desc" for example causes the newest images to show up first in the gallery //"" disables this feature, so images are sorted by file name (default) var gsortorder="" //By default, each image hyperlinks to itself. //However, if you wish them to link to larger versions of themselves //Specify the directory in which the larger images are located //The file names of these large images should mirror those of the original //Enter a blank string ("") to disable this option var targetlinkdir="http://www.calumogg.co.uk/test/large/" /////No need to edit beyond here/////////////////// function sortbydate(a, b){ //Sort images function if (gsortorder=="asc") //sort by file date: older to newer return new Date(a[1])-new Date(b[1]) else if (gsortorder=="desc") //sort by file date: newer to older return new Date(b[1])-new Date(a[1]) } if (gsortorder=="asc" || gsortorder=="desc") galleryarray.sort(sortbydate) var totalslots=dimension.split("x")[0]*dimension.split("x")[1] function buildimage(i){ var imagecompletepath=(targetlinkdir!="")? targetlinkdir+galleryarray[i][0] : imagepath+galleryarray[i][0] var tempcontainer='<a href="'+imagecompletepath+'" rel="lightbox[landscape]">' tempcontainer+='<img src="'+imagepath+galleryarray[i][0]+'"/>' tempcontainer+='</a><br />' tempcontainer+=(descriptionprefix[0]==1)? descriptionprefix[1]+(i+1) : "" 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 galleryarray[startpoint+i]!="undefined")? buildimage(startpoint+i) : "" } while(document.getElementById("navlink"+y)!=null){ document.getElementById("navlink"+y).className="" y++ } document.getElementById("navlink"+p).className="current" initLightbox(); } var curimage=0 for (y=0; y<dimension.split("x")[1]; y++){ for (x=0; x<dimension.split("x")[0]; x++){ if (curimage<galleryarray.length) document.write('<div id="slide'+curimage+'" class="slideshow">'+buildimage(curimage)+'</div>') curimage++ } document.write('<br style="clear: left" />') } function popuplinkfunc(imgsrc){ if (popupsetting[0]==1){ var popwin=open(imgsrc.href, "popwin", popupsetting[1]) popwin.focus() return false } else return true } </script> <div id="navlinks"> <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> <script type="text/javascript" src="js/scriptaculous.js?load=effects"></script> </div> </body> </html>
CSS Codes
Reply With Quote
Bookmarks