Bj
Addon Developer
- Joined
- Oct 16, 2007
- Messages
- 1,886
- Reaction score
- 11
- Points
- 0
- Location
- USA-WA
- Website
- www.orbiter-forum.com
Trying to get this working;
http://www.dynamicdrive.com/dynamicindex4/php-photoalbum.htm
It works fine when viewing the demos on the web page.
But it will not display anything when it is on my computer or on my web server (PHP is installed, I checked for broken links and all appear intact) The PHP file returns the proper pictures and such.
So just to try getting it working, I make up this (attached includes all files and pictures with preserved directory structure)
relevant HTML
Any guesses to why this is not working?
...And just in case you wanna take a look at the java script (though unedited);
http://www.dynamicdrive.com/dynamicindex4/php-photoalbum.htm
It works fine when viewing the demos on the web page.
But it will not display anything when it is on my computer or on my web server (PHP is installed, I checked for broken links and all appear intact) The PHP file returns the proper pictures and such.
So just to try getting it working, I make up this (attached includes all files and pictures with preserved directory structure)
relevant HTML
HTML:
<script type="text/javascript" src="pics/getalbumpics.php?id=test"></script>
<script type="text/javascript">
//Optional, manual description for particular pictures inside album
//Syntax: albumid.desc[index]="Picture description here"
//eg: myvacation.desc[2]="This is description for the 3rd picture in the album"
//eg: myvacation.desc[6]="This is description for the 7th picture in the album" http://www.dynamicdrive.com/dynamicindex4/php-photoalbum.htm
</script>
<script type="text/javascript" src="ddphpalbum.js">
/***********************************************
* PHP Photo Album script v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
<link rel="stylesheet" type="text/css" href="ddphpalbum.css" />
</head>
<body>
testing
<script type="text/javascript">
new phpimagealbum({
albumvar: test, //ID of photo album to display (based on getpics.php?id=xxx)
dimensions: [3,2],
sortby: ["file", "asc"], //["file" or "date", "asc" or "desc"]
autodesc: "Photo %i", //Auto add a description beneath each picture? (use keyword %i for image position, %d for image date)
showsourceorder: true, //Show source order of each picture? (helpful during set up stage)
onphotoclick:function(thumbref, thumbindex, thumbfilename){
thumbnailviewer.loadimage(thumbref.src, "fit2screen")
}
})
</script>
</body>
PHP:
<?
Header("content-type: application/x-javascript");
function returnimages($dirname=".") {
$pattern="\.(jpg|jpeg|png|gif|bmp)$";
$files = array();
$curimage=0;
if($handle = opendir($dirname)) {
while(false !== ($file = readdir($handle))){
if(eregi($pattern, $file)){
$filedate=date ("M d, Y H:i:s", filemtime($file));
echo " [$curimage, \"$file\", \"$filedate\"],\n";
$curimage++;
}
}
echo " [\"placeholder\"]\n";
closedir($handle);
}
return($files);
}
$photovar=$_GET['id'];
if (!eregi("^[a-zA-Z0-9_]+$", $photovar)){
echo "alert(\"Photo Album ID must contain only letters, numbers, or underscore, and cannot start with a number\")";
die();
}
echo "var $photovar={\n";
echo " baseurl: \"http://" . $_SERVER["SERVER_NAME"] . dirname($_SERVER['PHP_SELF']) . "/\",\n";
echo " images: [\n";
returnimages();
echo " ],\n";
echo " desc: []\n";
echo "}\n";
?>Any guesses to why this is not working?
...And just in case you wanna take a look at the java script (though unedited);
Code:
/* PHP Photo Album script v2.11
* Last updated: Aug 10th, 2009. This notice must stay intact for usage
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/
//** v2.11:
//1) Fade animation now a function of time (default=500 milliseconds)
//2) Fixed sort by "desc" not working in IE
function phpimagealbum(setting){
this.albumvar=setting.albumvar
this.albumvar.images.pop() //remove last "dummy" array element
for (var i=0; i<this.albumvar.images.length; i++){
if (this.albumvar.desc[i]) //if a manual desc exists for this image
this.albumvar.images[i][3]=this.albumvar.desc[i] //extend image array with desc
}
this.albumdivid='phpphotoalbum'+(++phpimagealbum.routines.albumcount)
this.dimensions=setting.dimensions || [3,3]
this.sortby=setting.sortby || ["file", "asc"],
this.autodesc=setting.autodesc
this.showsourceorder=setting.showsourceorder
this.onphotoclick=setting.onphotoclick || function(){}
this.photodivs=[] //array referencing each DIV that contains a slide
this.navlinks=null //HTML collection
if (setting.sortby[0]=="file") //sort by filename (asc)
this.albumvar.images.sort(function(a,b){return a[1].localeCompare(b[1])})
else //sort by date (asc)
this.albumvar.images.sort(function(a,b){return new Date(a[2])-new Date(b[2])})
if (setting.sortby[1]=="desc"){
this.albumvar.images.reverse()
}
this.buildgallery()
this.buildnav()
}
phpimagealbum.prototype={
buildgallery:function(){
var thisalbum=this
var curimage=0
document.write('<div id="'+this.albumdivid+'">')
for (var rows=0; rows<this.dimensions[1]; rows++){
for (var cols=0; cols<this.dimensions[0]; cols++){
if (curimage<this.albumvar.images.length)
document.write('<div class="photodiv">' + phpimagealbum.routines.buildimage(this.albumvar, curimage, this.autodesc, this.showsourceorder) + '</div>')
curimage++
} //end cols loop
document.write('<br style="clear: left" />')
} //end rows loop
document.write('</div>')
var albumdiv=document.getElementById(this.albumdivid)
var alldivs=albumdiv.getElementsByTagName('div')
for (var i=0; i<alldivs.length; i++){
if (alldivs[i].className=="photodiv")
this.photodivs.push(alldivs[i])
}
phpimagealbum.routines.addEvent(albumdiv, function(e){
var e=window.event || e
var target=e.srcElement || e.target
if (target.tagName=="IMG" && target.getAttribute('data-index')){
thisalbum.onphotoclick(target, thisalbum.albumvar.images[parseInt(target.getAttribute('data-index'))][0], thisalbum.albumvar.images[parseInt(target.getAttribute('data-index'))][1])
}
}, "click")
},
buildnav:function(){
var thisalbum=this
var navid=this.albumdivid + '_paginate'
document.write('<div id="' + navid +'" class="albumnavlinks">')
for (var i=1; i<Math.ceil(this.albumvar.images.length/this.photodivs.length)+1; i++){
document.write('<a href="#Page' + i+ '" rel="'+i+'">Page'+i+'</a> ')
}
document.write('</div>')
var navdiv=document.getElementById(navid)
phpimagealbum.routines.addEvent(navdiv, function(e){
var e=window.event || e
var target=e.srcElement || e.target
if (target.tagName=="A"){
thisalbum.gotopage(target.getAttribute('rel'))
if (e.preventDefault)
e.preventDefault()
else
return false
}
}, "click")
this.navlinks=navdiv.getElementsByTagName('a')
this.navlinks[0].className="current"
},
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"
}
}
phpimagealbum.routines={
albumcount: 0,
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 src="' + albumvar.baseurl + albumvar.images[i][1] + '" data-index="' + i +'" />' + (albumvar.images[i][3]? '<br />'+albumvar.images[i][3] : (desc)? desc : '')
},
addEvent:function(target, functionref, tasktype){
if (target.addEventListener)
target.addEventListener(tasktype, functionref, false);
else if (target.attachEvent)
target.attachEvent('on'+tasktype, function(){return functionref.call(target, window.event)});
}
}
/////////Following is thumbnailviewer(), a plugin to PHP Photo Album for enlarging thumbnail images/////////////////
var thumbnailviewer={
enableAnimation: true, //Enable fading animation?
fadeDuration: 500, //duration of fade animation in milliseconds
definefooter: '<div class="footerbar">CLOSE X</div>', //Define HTML for footer interface
defineLoading: '<img src="loading.gif" /> Loading Image...', //Define HTML for "loading" div
/////////////No need to edit beyond here/////////////////////////
opacitystring: 'filter:progid:DXImageTransform.Microsoft.alpha(opacity=10); -moz-opacity: 0.1; opacity: 0.1',
animateobj: {curdegree:0, starttime:null, opacitytimer:null},
createthumbBox:function(){
//write out HTML for Image Thumbnail Viewer plus loading div
document.write('<div id="thumbBox" onClick="thumbnailviewer.closeit()"><div id="thumbImage"></div>'+this.definefooter+'</div>')
document.write('<div id="thumbLoading">'+this.defineLoading+'</div>')
this.thumbBox=document.getElementById("thumbBox")
this.thumbImage=document.getElementById("thumbImage") //Reference div that holds the shown image
this.thumbLoading=document.getElementById("thumbLoading") //Reference "loading" div that will be shown while image is fetched
this.sbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body //create reference to common "body" across doctypes
},
centerDiv:function(divobj){ //Centers a div element on the page
var winattrs={x:window.pageXOffset || this.sbody.scrollLeft, y:window.pageYOffset || this.sbody.scrollTop, w:window.innerWidth || this.sbody.clientWidth, h:window.innerHeight || this.sbody.clientHeight}
this.winattrs=winattrs
var divattrs={w:divobj.offsetWidth, h:divobj.offsetHeight}
divobj.style.left=winattrs.x + winattrs.w/2 - divattrs.w/2 + "px"
divobj.style.top=winattrs.y + (winattrs.h>divattrs.h? winattrs.h/2 - divattrs.h/2 : 10) + "px"
divobj.style.visibility="visible"
},
showthumbBox:function(fit2screen){ //Show ThumbBox div
if (fit2screen && parseInt(this.featureImage.offsetWidth)>(this.winattrs.w-70)){
this.featureImage.style.width=this.winattrs.w-70+"px"
}
thumbnailviewer.thumbLoading.style.visibility="hidden" //Hide "loading" div
if (this.enableAnimation) //if animation enabled, hide image first before applying opacity
this.featureImage.style.visibility="hidden"
this.centerDiv(this.thumbBox)
if (this.enableAnimation){ //If fading animation enabled
this.animateobj.curdegree=0
this.featureImage.style.visibility="visible"
this.animateobj.starttime=new Date().getTime() //get time just before animation is run
this.animateobj.opacitytimer=setInterval("thumbnailviewer.opacityanimation()", 10)
}
},
loadimage:function(imgsrc, imgw, imgh){ //Load image function that gets attached to each link on the page with rel="thumbnail"
if (this.thumbBox.style.visibility=="visible") //if thumbox is visible on the page already
this.closeit() //Hide it first (not doing so causes triggers some positioning bug in Firefox
var styled=(this.enableAnimation? this.opacitystring+';' : '') +(imgw && imgh? 'width:'+parseInt(imgw)+'px; height:'+parseInt(imgh)+'px;' : '')
var imageHTML='<img src="'+imgsrc+'" style="'+styled+'" />' //Construct HTML for shown image
this.centerDiv(this.thumbLoading, imgw, imgh) //Center and display "loading" div while we set up the image to be shown
this.thumbImage.innerHTML=imageHTML //Populate thumbImage div with shown image's HTML (while still hidden)
this.featureImage=this.thumbImage.getElementsByTagName("img")[0] //Reference shown image itself
if (this.featureImage.complete)
thumbnailviewer.showthumbBox(imgw=="fit2screen"? true : false)
else{
this.featureImage.onload=function(){ //When target image has completely loaded
thumbnailviewer.showthumbBox(imgw=="fit2screen"? true : false) //Display "thumbbox" div to the world!
}
}
if (document.all && !window.createPopup) //Target IE5.0 browsers only. Address IE image cache not firing onload bug: panoramio.com/blog/onload-event/
this.featureImage.src=imgsrc
this.featureImage.onerror=function(){ //If an error has occurred while loading the image to show
thumbnailviewer.thumbLoading.style.visibility="hidden" //Hide "loading" div, game over
}
},
setopacity:function(el, value){
el.style.opacity=value
if (typeof el.style.opacity!="string"){ //if it's not a string (ie: number instead), it means property not supported
el.style.MozOpacity=value
if (el.filters){
el.style.filter="progid:DXImageTransform.Microsoft.alpha(opacity="+ value*100 +")"
}
}
},
opacityanimation:function(){ //Gradually increase opacity function
var elapsed=new Date().getTime()-this.animateobj.starttime //get time animation has run
if (elapsed<this.fadeDuration){
this.setopacity(this.featureImage, this.animateobj.curdegree)
}
else{
clearInterval(this.animateobj.opacitytimer)
this.setopacity(this.featureImage, 1)
}
this.animateobj.curdegree=(1-Math.cos((elapsed/this.fadeDuration)*Math.PI)) / 2
},
closeit:function(){ //Close "thumbbox" div function
if (typeof this.animateobj.opacitytimer!="undefined")
clearInterval(this.animateobj.opacitytimer)
this.thumbBox.style.left="-4000px"
this.thumbBox.style.top="-4000px"
this.thumbBox.style.visibility="hidden"
this.thumbImage.innerHTML=""
}
}
thumbnailviewer.createthumbBox() //Output HTML for the image thumbnail viewer
window.onresize=function(){
if (thumbnailviewer && thumbnailviewer.thumbBox.style.visibility=="visible")
thumbnailviewer.centerDiv(thumbnailviewer.thumbBox)
}
