Modifying PHP Photo Album script

**Nokonium** · 10-20-2006, 08:47 AM

1) Script Title:PHP Photo Album script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...photoalbum.htm

3) Describe problem: I am trying to convert PHP Photo Album to a simple smilie gallery, I have (maybe clumsily) stopped the 'onclick' loading 'target' and want to integrate two other javascripts into PHP Photo Album, onmousedown to insert the url into a form and onclick to clear the form. I have been using the javascript on pages with the smilies set into tables with an onmousedown for each image, but I don't have the knowlege to get it to work in the PHP Photo Album html page. I managed to stop the scripts fighting each other and the PHP Photo Album ones work OK.

This is where I have got to:

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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Mr Black Cat's Gallery</title>

<style type="text/css">

.slideshow{ /*CSS for DIV containing each image*/
float: left;
margin-top: 25px;
margin-bottom: 25px;
margin-left: 45px;
margin-right: 45px;
width: 10px;
height: 10px;
font-size: 80%;
}
.slideshow img{ /*CSS for each image tag*/
border: 0;
}

#navlinks{ /*CSS for DIV containing the navigational links*/
align: center;
width: 625px;
margin-top: 10px;
margin-left: 8px;
margin-right: 8px;
margin-bottom: 3px;
word-spacing: 5px;
}

#navlinks a{ /*CSS for each navigational link*/

font-size: 100%;
}

#navlinks a.current{ /*CSS for currently selected navigational link*/
background-color: #522994;
color: #CCCCFF;
font-weight:bold;
}
body
{
background-image: url(../black-cat-background.gif);
background-color: #CCCCFF;
vertical-align: bottom;

}
.h2
{
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000066;
align: center;
font-size: 24pt;
}
body,td,th
{
font-family: Arial, Helvetica, sans-serif;
color: #000066;
align: center;
font-size: 100%;
}
</style>

</head>

<body onload="isReady=true">


<table width="625">
<tr><td>
<span class="h2">Angry Smilies</span></td></tr>
<tr><td>

<script src="http://nokonium.co.uk/mr_black_cat_2/angry/getpics.php" type="text/javascript"></script>

<script type="text/javascript">

/***********************************************
* PHP Photo Album script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

var dimension="5x5" //Specify dimension of gallery (number of images shown), such as 4x2, 3x1 etc
var imagepath="http://nokonium.co.uk/mr_black_cat_2/angry/" //Absolute path to image directory. Include trailing slash (/)
var href_target="" //Enter target attribute of links, if applicable

//Toggle popup link setting: popupsetting[0 or 1, "pop up window attributes" (if 1)]
var popupsetting=[0, "width=100px, height=100px, scrollbars, resizable"]

//Toggle image description: descriptionprefix[0 or 1, "Text to show" (if 1)]
var descriptionprefix=[0, "Angry "]

//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="asc"

//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=""

/////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=''
tempcontainer+='<img src="'+imagepath+galleryarray[i][0]+'" title="'+galleryarray[i][0]+' ['+galleryarray[i][1]+']" onmousedown="showAddress(this.src)" />'
tempcontainer+='<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"
}

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[0])
popwin.focus()
return false
}
else
return true
}


</script>
<script type="text/javascript">
var isReady = false;



function showAddress(this.src){

  if (isReady){

    document.Which.Where.value = What;

    document.Which.Where.focus();

    document.Which.Where.select();

  }else{

    alert("This page is not fully loaded yet...\nPlease wait for the page to finish loading.");

  }

}



function clearAddress(){

  if (isReady){

    document.Which.Where.value = '';

  }else{

    alert("This page is not fully loaded yet...\nPlease wait for the page to finish loading.");

  }

}
</script>
</td></tr><tr><td>
<table><tr>
            <td colspan="3" height="10" valign="middle" align="center">
</td>
          </tr>
          <tr>
            <td align="center" valign="top" height="30" width="84"> <p><font face="Arial" size="1" color="#663300"><b>Image
                URL:</b></font></p></td>
            <td align="center" valign="top" height="30" width="360"> <form name="Which">
                <input type="text" size="60" name="Where" maxlength="80">
              </form></td>
            <td align="center" valign="top" height="30" width="76"><b><font
	 face="Arial" size="1"> <a href="#" onclick="clearAddress()" class="js"> Clear</a></font></b></td>
          </tr></table></td></tr>




<tr><td><!--Below HTML code refers to the navigational links for the gallery-->

<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+')\">Angry '+i+'</a> ')
document.getElementById("navlink1").className="current"
</script>
</div>
</td></tr></table>
</body>

</html>

**Nokonium** · 10-24-2006, 06:23 PM

Awwwww come on guys and gals, surely it cannot be that difficult....

How about opening the image in a new page with the url in a box then?

Thread: Modifying PHP Photo Album script

Thread Tools

Search Thread

Modifying PHP Photo Album script

Bookmarks

Bookmarks

Posting Permissions