Onclick close popup on a DD PHP photo album script

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...

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

Code:

---

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
}

---

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

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

I would do the title like so:

Code:

---

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:

Code:

---

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

---

instead of:

Code:

---

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.

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....

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.

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

Code:

---

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.

it works on Firfox... cool

thank you very much

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

Petri

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:

Code:

---

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:

Code:

---

<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>

---

oh yeah !.... it works very well... :-) except that you have to press the close button to close the window.. in Lightbox 1 you could click anywhere... is that something to change in the js folder ? is it possible ?

Yes but, if you click anywhere above or below the image, it still does that. The image itself and the areas adjacent to it excluding the close button needed to be reserved for the next/previous functions. However, since those are relatively meaningless in this situation and in fact, not used in this implementation we can fudge it. Find this section in lightbox.js and add the line in red:

Code:

---

                var objLightbox = document.createElement("div");
                objLightbox.setAttribute('id','lightbox');
                objLightbox.style.display = 'none';
                objLightbox.onclick = function() { myLightbox.end(); return false; }
                objBody.appendChild(objLightbox);

---

I would caution against it though, it likely will cause a problem that could be very hard to trace down if you decided to try out the next/previous feature later with your edited version. If you do make the change please remember to use a fresh copy of the script for any other implementations that might use the next/previous feature.

ok I will write a little note in the script about it...

Thank you very much John....you can see the results on this page, I think it looks good :

www.coquille.org/cellpics

Petri

Quote:

---

Originally Posted by petri71

ok I will write a little note in the script about it...

Thank you very much John....you can see the results on this page, I think it looks good :

www.coquille.org/cellpics

Petri

---

Yeah, a note in the script should be good. The main thing is that you remember about it. I like the page but I would have kept some form of highlighting of the page links so that the user won't lose track of which page they are on. Instead of the comparatively garish highlighting, perhaps just a change in the text color. Also, it would be pretty easy to convert the the first letter of the image names to upper case, convert underline characters to spaces and convert characters after underlines to upper case as well as to have the date be used on the lightbox. Let me know if you are interested.

It is true that it is not very easy to see on which page you are.... maybe a change of color...like #FFCC33 could do...where do I change that ?

Can we transform the title ? that would be great !!! just as you said...

Name Name / Date

Petri

PS : I answered a message asking the same questions about the closing problem on Huddletogether, I added a link to this thread....

Parts of this turned out to be a little trickier than I thought. Let's start with the easy stuff. You've taken control of the links with this:

Code:

---

a:link {
        color: #FF6600;
        text-decoration: none;
}
a:visited {
        text-decoration: none;
        color: #FF6600;
}
a:hover {
        text-decoration: none;
        color: #FF6600;
}
a:active {
        text-decoration: none;
        color: #FF6600;
}

---

in the page's style section, you really don't need it but, it wouldn't be a problem if you had not removed this (red - near the bottom of the page):

Code:

---

      <!--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></div>

---

Once you restore that, you can do this:

Code:

---

#navlinks a{ /*CSS for each navigational link*/
margin-right: 8px;
margin-bottom: 3px;
font-size: 110%;
        color: #FF6600;
        text-decoration: none;
}

#navlinks a.current { /*CSS for currently selected navigational link*/
color:#ff9933;
}

---

in place of the current styles for those on the page. I see a potential problem here:

Code:

---

#navlinks{ /*CSS for DIV containing the navigational links*/
width: 400px;
}

---

If you get too many pages, that wont be wide enough. It can be removed.

While we are still in the on page style section, add this:

Code:

---

#imageDataContainer, #caption {
position:relative;
z-index:10;
top:0;
left:0;
}
#caption {
top:-5px;
}
* html #imageDataContainer {
position:static;
z-index:0;
}

---

Now come the two tricky parts. In the album script, replace this:

Code:

---

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
}

---

with this:

Code:

---

function buildimage(i){
var imagecompletepath=(targetlinkdir!="")? targetlinkdir+galleryarray[i][0] : imagepath+galleryarray[i][0]
var ttite='', lbtitle=galleryarray[i][0].replace(/\.[^.]*$/, '');
for (var i_tem = 0; i_tem < lbtitle.length; i_tem++)
ttite+=i_tem==0? lbtitle.charAt(i_tem).toUpperCase() : lbtitle.charAt(i_tem)=='_'? ' '+lbtitle.charAt([1+i_tem++]).toUpperCase() : lbtitle.charAt(i_tem);
lbtitle=ttite+'<br>'+galleryarray[i][1];
var tempcontainer='<a href="'+imagecompletepath+'" rel="lightbox" title="'+lbtitle+'">'
tempcontainer+='<img src="'+imagepath+galleryarray[i][0]+'" title="'+ttite+' ['+galleryarray[i][1]+']" />'
tempcontainer+='</a><br />'
tempcontainer+=(descriptionprefix[0]==1)? descriptionprefix[1]+(i+1) : ""
return tempcontainer
}

---

In the lightbox.js file replace this:

Code:

---

        updateDetails: function() {
       
                Element.show('caption');
                Element.setInnerHTML( 'caption', imageArray[activeImage][1]);
               
                // if image is part of set display 'Image x of x'

---

with this:

Code:

---

        updateDetails: function() {
        if(!document.body.filters)
                Element.hide('caption')
                else
                Element.show('caption')
                Element.setInnerHTML( 'caption', imageArray[activeImage][1]);
        if(!document.body.filters)
                setTimeout(function(){Element.show('caption');}, 1000);
               
                // if image is part of set display 'Image x of x'

---

Works great !!! thousand thanx...

I tryed to put a link of Dynamic but couldn't because of the link script I guess, so I just put the address...

One last (very last) question :

How can I centre the thumbnails ? I tried to put the code into a centered cell but it centres only the navigation...

Petri

Tables are usually a bad idea. This layout is a bit tricky because the thumbnails are floated and have a right hand margin. This makes the block of them wider on the right than it really looks like. We can cut that off like so:

Code:

---

<div align="center">
  <p class="style1"><br>
      <strong>Please wait until page is fully dowloaded before clicking on a picture.</strong></p>
  <p class="style1">&nbsp;</p>
</div>
<div align="center">      <script src="http://www.coquille.org/cellpics/getpics.php" type="text/javascript"></script>
 
<div style="width:753px;overflow:hidden;"><div style="width:800px;">      <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="4x2" //Specify dimension of gallery (number of images shown), such as 4x2, 3x1 etc
var imagepath="http://www.coquille.org/cellpics/" //Absolute path to image directory. Include trailing slash (/)
var href_target="new" //Enter target attr . . .

. . .en(imgsrc.href, "popwin", popupsetting[1])
popwin.focus()
return false
}
else
return true
}

      </script>
</div></div>
 
      <!--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></div></div>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp; </p>

---

Oh, and if you get rid of these link definitions (I thought you wanted them for something, possibly in the future):

Code:

---

a:link {
        color: #FF6600;
        text-decoration: none;
}
a:visited {
        text-decoration: none;
        color: #FF6600;
}
a:hover {
        text-decoration: none;
        color: #FF6600;
}
a:active {
        text-decoration: none;
        color: #FF6600;
}

---

And change these definitions:

Code:

---

    <style type="text/css">
<!--
.style1 {color: #FF6600}
.style2 {font-size: 10px}
.style3 {color: #FFFFFF}
-->
    </style>

---

to:

Code:

---

    <style type="text/css">
<!--
.style1 {color: #FF6600}
.style2 {font-size: 10px}
.style3 {color: #FFFFFF}
.style1 a {color: #FF6600}
.style2 a {font-size: 10px}
.style3 a {color: #FFFFFF}
-->
    </style>

---

You can use this as the credit:

HTML Code:

---

<p align="center" class="style2">powered by <span class="style3"><a href="http://www.dynamicdrive.com/">DynamicDrive.com</a></span> and <span class="style3"><a href="http://huddletogether.com/">Huddletogether.com</a></span></p>

---

I got a bit carried away with this one, you might like this version better still:

Attachment 562

Well it seems to be perfect for me.... at least for the moment...

Thanx for everything John... seems you never stop working !