PHP Photo Album, How to add: 'prev' and 'next' controls?

**HthrT** · 02-03-2007, 12:27 AM

Hi, I've been expanding upon the PHP Photo Album script, combining it with the 'div' adjustment I found on this forum (which is justifying because I suspected that was the solution, I'm familiar with div tags not javascript, and I didn't know how to make it happen; plus pop-ups can be so ugly).

Now: two questions to take this script further!
(and I've been looking on the forum)

1. How do I change the javascript to allow for prev and next enlarge image navigation? (it doesn't look like any of the DD Image Gallery and Viewer samples offer it). Yes, I have thumbnails to click thru but having one location to fwd or back scroll through images would be more sophisticated.

2. How do I get rid of that 'filename [upload date + time]' (OnMouse Over effect) cursor info comment? if I delete anything the script doesn't work!

I'm a newborn javascripter and only seem to learn through example!

THANK YOU SO MUCH in advance for your insight!

Heather
Please Note: I'm sorry if a repeat post is breaking forum ettiquette, I'm not sure if this belongs in PHP or Javascript discussions!
--------------------
Oh, here's a relevant excerpt of my coding (with hopefully, all the appropriate CSS); If it's messy I appreciate the comments I've been going over this alot:

<html>
<head>
.style8 {
font-size: x-small;
margin-right: 15px;
margin-left: 0px;
}
#imagearea {
padding-top:15px;
padding-bottom: 15px;
}
#container #tableport {
background-color: #333333;
width: 95%;
height: 475px;
padding: 15px;
}
.slideshow{ /*CSS for DIV containing each image*/
margin-right:15px;
margin-top:15px;
float: left;
}

.slideshow img{ /*CSS for each image tag*/
border: 0;
width: 75px;
height: 75px;
}
body {
background-color: #999999;
}
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: small;
color: #000000;
letter-spacing: 4px;
}
</head>
<body>
<table width="95%" border="0" align="center" cellpadding="0" cellspacing="0" id="tableport">
<tr>
<td valign="top"><div id="imagearea" align="center"><img src="gallery/events_enlarged/weddingA5a.jpg" width="400" height="249"/></div></td>
<td width="280" valign="top" class="style8">

<script src="http://www.heathertroy.net/tzirel/gallery/events_thumb/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="3x5" //Specify dimension of gallery (number of images shown), such as 4x2, 3x1 etc
var imagepath="http://www.heathertroy.net/tzirel/gallery/events_thumb/" //Absolute path to image directory. Include trailing slash (/)
var href_target="new" //Enter target attribute of links, if applicable

//Toggle popup link setting: popupsetting[0 or 1, "pop up window attributes" (if 1)]
var popupsetting=[1, "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="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="http://www.heathertroy.net/tzirel/gallery/events_enlarged/"

/////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+'" target="'+href_target+'" onClick="return popuplinkfunc(this)">'
tempcontainer+='<img src="'+imagepath+galleryarray[i][0]+'" title="'+galleryarray[i][0]+' ['+galleryarray[i][1]+']" />'
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"
}

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){
document.getElementById("imagearea").innerHTML='<img src="'+imgsrc+'"/>'
return false
}

</script>

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

**jscheuer1** · 02-04-2007, 04:53 AM

I'm really not all that clear on what you are looking for with this next/previous feature. Could you spell it out more precisely? One thing I am thinking is though, if you mean the pop up, I think that was worked out or at least spelled out elsewhere in the forums here. When I am through with this post I will have a look for it.

On to the thing I know I can help you with, the mouseover info. To remove that get rid of the red part in the below function:

Code:

function buildimage(i){
var imagecompletepath=(targetlinkdir!="")? targetlinkdir+galleryarray[i][0] : imagepath+galleryarray[i][0]
var tempcontainer='<a href="'+imagecompletepath+'" target="'+href_target+'" onClick="return popuplinkfunc(this)">'
tempcontainer+='<img src="'+imagepath+galleryarray[i][0]+'" title="'+galleryarray[i][0]+' ['+galleryarray[i][1]+']" />'
tempcontainer+='</a><br />'
tempcontainer+=(descriptionprefix[0]==1)? descriptionprefix[1]+(i+1) : ""
return tempcontainer
}

**jscheuer1** · 02-04-2007, 05:09 AM

OK, I found it. This will allow you to load a page into the pop up instead of an image:

Code:

function popuplinkfunc(imgsrc){
if (popupsetting[0]==1){
var popwin=open(imgsrc.href.replace(/\.[^\.]*$/,'.htm'), "popwin", popupsetting[1])
popwin.focus()
return false
}
else
return true
}

The page name will be the same as the image name and you can use whatever extension you like. I picked the most common, .htm. Once you have your pop up popping up pages, you can put whatever links on them that you like. Next/Previous is just one possibility.

**HthrT** · 02-07-2007, 02:40 PM

Thank you so much for looking into my questions!
I will let you know how it goes.

Best
Heather

**panachepad** · 02-08-2007, 04:58 AM

Thank you for showing how to get rid of that stuff, jscheuer1. I got brave and tried putting back just the
title="'+galleryarray[i][0]+'"
and that made it so the filename shows, which is what I wanted.

Thread: PHP Photo Album, How to add: 'prev' and 'next' controls?

Thread Tools

Search Thread

PHP Photo Album, How to add: 'prev' and 'next' controls?

Bookmarks

Bookmarks

Posting Permissions