Onclick close popup on a DD PHP photo album script

**petri71** · 09-21-2006, 10:10 AM

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 ?

**jscheuer1** · 09-21-2006, 01:38 PM

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.

**petri71** · 09-21-2006, 10:14 PM

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

**jscheuer1** · 09-22-2006, 04:06 AM

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.

**petri71** · 09-22-2006, 05:00 AM

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

**jscheuer1** · 09-22-2006, 07:27 AM

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'

**petri71** · 09-22-2006, 08:06 AM

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

**jscheuer1** · 09-22-2006, 08:44 AM

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>

**jscheuer1** · 09-22-2006, 09:00 AM

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>

**jscheuer1** · 09-22-2006, 10:09 AM

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

Attachment 562

Thread: Onclick close popup on a DD PHP photo album script

Thread Tools

Search Thread

Bookmarks

Bookmarks

Posting Permissions