Photo Album script v2.0 javascript errors in MSIE 2nd page creation

[ClassickJR]

1) Script Title: PHP Photo Album script v2.0

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

3) Describe problem:

This problem is only noticeable through MS Internet Explorer, im not sure if it makes a difference which version, but i have ver 8.0.6, which i believe to be the latest, and it still errors. I have tested in FireFox up to version 3.0.1 and it works flawlessly.

The error is visible here: http://sgtclassick.com/gallery/default.php?id=SF_Independent_Spirits_Festival

if you go to that page, youll notice that the layers are all messed up.

This is due to a java script error thrown, which states:


Message: 'images[...].1' is null or not an object

Line: 112
Char: 3
Code: 0
URI: http://sgtclassick.com/gallery/ddphpalbum.js

This is lines 108 - 112 of ddphpalbum.js just to give some context:

buildimage:function(albumvar, i, desc, showorder){
var desc=(desc && desc!="")? '<br />' + desc.replace(/(%i)|(%d)|(%s)/g, function(m){
return (m=="%i")? i+1 : (m=="%d")? albumvar.images[i][2] : ""
}) : ''
return (showorder? '<b style="color:red">Source Order: '+albumvar.images[i][0]+'</b><br />' : '') + '<img rel="facebox" onclick = "document.getElementById(\'fade\').style.display=\'block\'" src="' + albumvar.baseurl + albumvar.images[i][1] + '" data-index="' + i +'" />' + (albumvar.images[i][3]? '<br />'+albumvar.images[i][3] : (desc)? desc : '')

Now, i have been racking my brain about this error and have discovered its source, but i cant for the life of me figure a solution, because as i said, the error is only in IE.

The error is thrown because there are only 8 image files in the directory. If you add one more image to the directory, some how the photodivs.length gets processed correctly, and the 2nd page is created no problems... if there are only 9 images in the directory, then a 2nd page gets created, but it will be empty.

I believe it also has to do with this section of code from ddphpalbum.js ( line 89-99)

gotopage:function(p){
var startpoint=(p-1)*this.photodivs.length
var y=1;
for (var i=0; i<this.photodivs.length; i++){
this.photodivs[i].innerHTML=null
this.photodivs[i].innerHTML=(typeof this.albumvar.images[startpoint+i]!="undefined")? phpimagealbum.routines.buildimage(this.albumvar, startpoint+i, this.autodesc, this.showsourceorder) : ""
}
for (var i=0; i<this.navlinks.length; i++)
this.navlinks[i].className=''
this.navlinks[p-1].className="current"
}

because the javascript error keeps alluding to the fact that images[...].1 is null.

For the time being i suppose i could just make sure i always have 9 or more images in the folders... but if, for example, i changed the images display to show 12 images per page instead of 9, and the folder only had 9 images total, i assume the same problem would occur, because the 1 page wouldnt have enough items to generate a "complete" album page.

Any help is greatly appreciated.

[ClassickJR]

damn... oh well im glad i looked around more... issue was solved by the same update made in this thread

http://www.dynamicdrive.com/forums/showthread.php?t=47453

adding



this.albumvar.images.pop() //remove last "dummy" array element

did the trick.

Cheers

[ClassickJR]

Incidentally... i made some additions to your script to make it work better with Facebox. Since you included a facebox example in your instructions, ill assume its supposed to be a feature.

I found that when using instead of the built in lightbox feature, the "matte" or the opaque black overlay was only affecting a small portion of my overall page, instead of its intended effect ( making everything but the clicked image black)

So i played around with it and upgraded it.

NOTE: the Facebox script (http://www.dynamicdrive.com/dynamicindex4/facebox/index.htm) of course has to be installed for this to work

I added this selector to "facebox.css"


.black_overlay{
display: none;
position: absolute;
top:0px;
left:0px;
width: 100%;
height: 120%;
background-color: black;
z-index:99;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);

}

Added this to facebox.js


<div class="footer"> \
<a href="#" class="close" onclick = "document.getElementById(\'fade\').style.display=\'none\'"> \
<img src="'+this.close_image+'" title="close" class="close_image" /> \
</a> \
</div> \

Added this to ddphpalbum.js


return (showorder? '<b style="color:red">Source Order: '+albumvar.images[i][0]+'</b><br />' : '') + '<img rel="facebox" src="' + albumvar.baseurl + albumvar.images[i][1] + '" data-index="' + i +'" onclick = "document.getElementById(\'fade\').style.display=\'block\'" />' + (albumvar.images[i][3]? '<br />'+albumvar.images[i][3] : (desc)? desc : '')
},

and this extra "div" just above the facebox div in facebox.js


$.facebox.settings = {
loading_image : 'facefiles/loading.gif',
close_image : 'facefiles/closelabel.gif',
image_types : [ 'png', 'jpg', 'jpeg', 'gif' ],
facebox_html : '\
<div id="fade" class="black_overlay"></div> \
<div id="facebox" style="display:none;"> \
<div class="popup"> \

[ddadmin]

damn... oh well im glad i looked around more... issue was solved by the same update made in this thread

http://www.dynamicdrive.com/forums/showthread.php?t=47453


Don't forget to also use the updated .php file on the script page; otherwise, in IE the last image within the gallery won't be shown.

[ClassickJR]

i saw that.. thanks

[kkn]

I created the first album successfully on one page but I can't seem to create a second different album on another page. Basically I copied the hmtl source from the first one and change directory to point to new ablum.

photos.html
src="http://.../album1/getalbumpics.php?id=myfirst"

roster.html
src="http://.../ablum2/getalbumpics.php?id=myfirst"

I also copy getalbumpics.php to the first second album directory. The page would copy up empty

Thanks
kkn