PDA

View Full Version : PHP Photo Album v2



calumogg
06-02-2007, 07:59 PM
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:

<!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">&nbsp;</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">&nbsp;</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>

mburt
06-02-2007, 11:01 PM
Hmm... seems because the script uses a framework the tables may be impossible, but to make it align center replace the following line:

document.write('<div id="slide'+curimage+'" class="slideshow" align="center">'+buildimage(curimage)+'</div>')
Or change the slideshow class in your CSS file adding "text-align:center".

calumogg
06-03-2007, 09:50 AM
Thanks for the reply I tired the methods said, and they didnt work, I have tried some other stuff on it e.g playing with this line and removing the style but leaving the <br/>

document.write('<br style="clear: left" />')
but when this is removed it changes the layout of the pictures so they are not 4x5
Any other ideas?