Onclick close popup on a DD PHP photo album script

[petri71]

1) Script Title:
PHP photo album

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

3) Describe problem:
How could I add a close onclick to the pop up of the script, with an alt tag saying"click to close" ? I have been trying many ways but nothing seems to work. I don't know if I should change the popupsettings or the function...or what !

Thanx in advance...

[jscheuer1]

Find the function popuplinkfunc(imgsrc) from step3 on the demo page and change it to this:

function popuplinkfunc(imgsrc){
if (popupsetting[0]==1){
var popwin=open('', "popwin", popupsetting[1])
popwin.document.write('<a href="javascript:self.close();"><img src='+imgsrc.href+' title="Click to Close" border="0"></a>')
popwin.document.close();
popwin.focus()
return false
}
else
return true
}

[petri71]

Thanx John.... but now I have one problem... the title of the pop up does not show the name of the picture any more....

[Twey]

The filename?
You can set it with popwin.title.

[jscheuer1]

I would do the title like so:

function popuplinkfunc(imgsrc){
if (popupsetting[0]==1){
var popwin=open('', "popwin", popupsetting[1])
popwin.document.write('<title>'+imgsrc.href.toString(10).replace(/^.*\/|\.[^.]*$/g, '')+'</title>\n')
popwin.document.write('<a href="javascript:self.close();"><img src='+imgsrc.href+' title="Click to Close" border="0"></a>')
popwin.document.close();
popwin.focus()
return false
}
else
return true
}

Even so IE will show the path too but, it was doing that already. But there could be other problems. If the images are of varying dimensions, you might want to lose the window name:

var popwin=open('', "_blank", popupsetting[1])

instead of:

var popwin=open('', "popwin", popupsetting[1])

That will create a new window for every pop up but, allow each to be set to whatever the dimension settings (if any) are. A named window that hangs around, when populated with new content, will not resize itself - and many browsers will not allow windows to be resized by javascript after opening.

[petri71]

Thanx again John, but it does not seem to work, on mac (Safari or Firefox) at least.
I have been through the archives to find a solution and I came accross the mixing between the lightbox1 and php album,
http://www.dynamicdrive.com/forums/a...hp/t-7667.html
but dont understand at all what to do, cuz this would be the perfect solution for me as I upload my images with my mobile phone, and as the light box 1 has a very nice way to show and close the pictures...
I have seen that you have been working on it.
Do you have the exact code I should put in my page ? knowing that I need to download the getpics.php and the lightbox.zip files and put them in the same folder as the pictures and the index....

[jscheuer1]

If you are going to go that route, at least look at the full version:

http://www.dynamicdrive.com/forums/s...ead.php?t=7667

It is easier to understand.

I'm not sure what the problem could be with the code I supplied, it tested out OK here. I'll do some more testing.

[jscheuer1]

I see, I made a typo, use this (tested with the actual script):

function popuplinkfunc(imgsrc){
if (popupsetting[0]==1){
var popwin=open('', "popwin", popupsetting[1])
popwin.document.write('<title>'+imgsrc.href.toString(10).replace(/^.*\/|\.[^.]*$/g, '')+'</title>\n')
popwin.document.write('<a href="javascript:self.close();"><img src='+imgsrc.href+' title="Click to Close" border="0"></a>')
popwin.document.close();
popwin.focus()
return false
}
else
return true
}

Forget what I said about using _blank if you have images of varying dimensions. The script doesn't support that.

[petri71]

it works on Firfox... cool

thank you very much

I'll check for the combination of Lightbox and PHP album

Petri

[jscheuer1]

If you want to use lightbox, use v2.02 from the author:

http://www.huddletogether.com/projects/lightbox2/

Use the php script's style in the head of your page, then under that put this (red) part:

margin-right: 8px;
margin-bottom: 3px;
font-size: 110%;
}

#navlinks a.current{ /*CSS for currently selected navigational link*/
background-color: yellow;
}
</style>
	<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
	
	<script src="js/prototype.js" type="text/javascript"></script>
	<script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
	<script src="js/lightbox.js" type="text/javascript"></script>
</head>
<body>

Make sure to unzip the files from the lightbox archive and place them in folders as indicated relative to your page.

Use this version of the PHP script in the body, change the paths (red) to your own:

<script src="http://www.dynamicdrive.com/dynamicindex4/phpgallery/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="3x2" //Specify dimension of gallery (number of images shown), such as 4x2, 3x1 etc
var imagepath="http://www.dynamicdrive.com/dynamicindex4/phpgallery/" //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=[0, "width=500px, height=400px, scrollbars, resizable"]

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

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

//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='<a href="'+imagecompletepath+'" rel="lightbox" title="'+galleryarray[i][0].replace(/\.[^.]*$/, '')+'">'
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++
}
initLightbox();
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[1])
popwin.focus()
return false
}
else
return true
}

</script>

<!--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+')\">Page'+i+'</a> ')
document.getElementById("navlink1").className="current"
</script>