PDA

View Full Version : PHP Photo Album script - Script isn't working for me?



Tommisauce
07-31-2007, 01:23 PM
1) Script Title:
PHP Photo Album script

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

3) Describe problem:

Hi folks,

Please forgive me as I can envisage getting slated, I'm not sure if I'm being blonde day today or if Gremlins are at work, however please read on. I have followed the instructions of how to implement the PHP Photo Album script, however it simply isn't working? I have tried other scripts on the DD website and they work fine however I am having difficulties with the PHP Photo Album script. My host supports PHP, so that side of things is completely OK.

When I upload my page in the browser http://www.vipink.co.uk/Gallery%202/Gallery_B.html - absolutely nothing shows up? I thought at least my thumbnails would show up on the page but - nada, not a thing? Am I missing something? Any comments or aid would be greatly appreciated.

Many thanks.

jscheuer1
07-31-2007, 03:33 PM
Your server doesn't like getpics.php - (this error comes from the server and is one of many for the getpics.php file):


Warning: Unexpected character in input: '\' (ASCII=92) state=1 in /homepages/29/d151227417/htdocs/vipink/Gallery 2/getpics.php on line 7

It may be one error being repeated though, as getpics.php does loop.

As a result the galleryarray never gets defined. If you didn't edit getpics.php then it may be able to be changed to please your server. If you did edit it, you shouldn't have - get a fresh copy and start over without editing it.

If you haven't edited getpics, try just getting rid of (red):


$pattern="\.(jpg|jpeg|png|gif|bmp)$";

Tommisauce
07-31-2007, 07:29 PM
Hi John,

Thanks for getting back to me so quickky. The good news is that - your suggestion works! Insomuch that 'something' actually happens. However on testing in FF the wording 'Page 1' shows within the site however when it's clicked the thumbnail images appear above the box which should hold them and makes a gap between the site navi buttons and just 'flash' the thumbnails, the thumbnails dont actually stay on the page. I've placed a #div tag called <loadarea> which you suggested on my initial thread on which gallery I would best suit my needs:

here's the testing URL: http://www.vipink.co.uk/Gallery2/ImageGallery.html

Many thanks in advance.

jscheuer1
08-01-2007, 03:26 AM
Your main problem now is (in the main script):


var imagepath="http://www.vipink.co.uk/gallery2/getpics.php" //Absolute path to image directory. Include trailing slash (/)

That part should be:


var imagepath="http://www.vipink.co.uk/gallery2/" //Absolute path to image directory. Include trailing slash (/)

There are numerous other problems, but these are mostly just a matter of layout. Once you take care of the above, at least you will be able to see things, and hopefully move them about so that they look like you would want them to.

Your images could stand to be optimized too (reduced in byte size).

Tommisauce
08-01-2007, 04:15 PM
John - you're a genius! That worked a treat. OK we're nearly there, I've just one small question for you which does relate to the layout. I am using Dreamweaver 8 and where the thumbnails are (above where they should be) I cannot see them within my programme, I only see them when viewed in the browser. Obviously this makes it difficult to get my page 100&#37; right. Any ideas how I can actually see the thumbnails. In addition to that, the clicked thumbnails should appear within the 'loadarea' #div but it isn't.

Once again thanks for all your help - you're a lifesaver, I'd be pulling my hair out - if I had any hair left !

jscheuer1
08-01-2007, 05:37 PM
I was trying to avoid getting into laying out your page for you and/or helping you layout your page. I do understand the limitations you face with DW though.

Short of actually designing the page for you, I would suggest two possible avenues of approach. Before starting, make a backup of your page in case anything goes drastically wrong, then either:

1 ) Open the page in a text editor such as notepad and make changes there, while keeping the page loaded in the browser. After each change, save it in notepad and refresh the browser to see the effect you are having.

Or:

2 ) Stick with DW. The script acts very much like a division. So, you could save a copy of your now working script somewhere and substitute for it a division with an image in it. Then you will be able to see it in DW and move it around. Once you get it where you want it, replace it with the script. When moving it in DW, make sure you are moving the entire division, not just the image inside of it.

One very important change that you should make right off is to move this:


<div id="Container">

from its current location following the main script in your source code to just after this:


<div id="Content"><!-- InstanceBeginEditable name="MainContent" -->

Which will place it before the opening script tag. That way, at least the script's generated content will appear in the container.

Now, about the larger version images not appearing in the division you made for them. I bet that they are, it is the location of this division that is not where you would like it to be. Once again, you can try to fix this in notepad as outlined above (method 1) or put an image in it so that you can see where it is in DW.

Tommisauce
08-02-2007, 08:34 AM
Thanks very much for this John. I know this forum is about the scripts and getting them to work and not neccessarily helping out on bespoke sites. So I am very very grateful for the time you've taken to get me on the right path.

I shall give your suggestions a go.

Once again thanks very much - it's very much appreciated.

Tommisauce
08-02-2007, 10:50 AM
John,

I've tried your suggestions and once again - you've come up trumps !! They worked a treat.

I still can't 'see' the thumbnails within DW however I placed the script within the #navlinks so that gives me some control to where they are. Also the #loadarea placement is working now - I just kinda messed around with the code on that and hey presto!

Just a couple of points - is there a way to remove the type which says "Photo 1, Photo 2" etc?

Lastly although this isn't imperitive as I think you've helped me beyond the call of duty - is there a way for the picture to 'fade in' when the thumbnail is clicked?

Once again many, many thanks for all your help. It is truly very much appreciated. :) you're a life saver!

jscheuer1
08-02-2007, 03:32 PM
OK, to get rid of the nav links, comment this out like so:


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

You could just remove it, but if you get more images you will want it, and will want to style it so that it goes with the rest of the page.

Now to do the fading, add this script to the head:


<script type="text/javascript">

/* Cross Browser Image Fader 2007 John Davenport Scheuer
This comment must remain for Legal Use */

var faders=[];
// Preset each image's initial opacity (0 to 100):
// ex: faders[x]=['image_id', initial_opacity];
faders[0]=['fader', 0];

////////////// Stop Editing //////////////

function fade(el, way, op, opinc, speed){
if(!fade.prprt&&!fade.ie)
return;
var id=typeof el=='string'? el : el.id, el=typeof el=='object'? el : document.getElementById(el);
clearTimeout(fade[id+'timer']);
var op_obj=fade.ie6? el.filters[0] : el.style,
waym=way=='in'? 1 : -1, speed=speed? speed*1 : 30, opinc=opinc&&opinc>=1? opinc*(fade.ie? 1 : .01) : opinc? opinc : fade.ie? 5 : .05,
op=op&&fade.ie? op*1 : op&&op*1>=1? Math.min(op*.01, .99) : op? op : waym>0&&fade.ie? 100 : waym>0? .99 : 0;
if(!fade.ie6&&!fade[id+'yet']){
if(fade.prprt)
op_obj[fade.prprt]=Math.min(fade.preset(id)*.01, .99);
else if(fade.ie)
op_obj.filter='alpha(opacity='+fade.preset(id)+')';
fade[id+'yet']=true;
}
if(fade.prprt&&Math.abs(op*1-op_obj[fade.prprt]*1)<opinc)
op_obj[fade.prprt]=op;
else if(fade.prprt)
op_obj[fade.prprt]=fade.ie6? op_obj[fade.prprt]*1 + opinc*waym : Math.min(op_obj[fade.prprt]*1 + opinc*waym, .99);
else if (fade.ie&&Math.abs(op*1 - op_obj.filter.replace(/\D/g,'')*1)<opinc)
op_obj.filter='alpha(opacity='+op+')';
else if (fade.ie)
op_obj.filter='alpha(opacity='+[op_obj.filter.replace(/\D/g,'')*1 + opinc*waym]+')';
else
return;
if(op_obj[fade.prprt]&&op_obj[fade.prprt]*waym<op*waym||!fade.ie6&&fade.ie&&op_obj.filter.replace(/\D/g,'')*waym<op*waym)
fade[id+'timer']=setTimeout(function(){fade(el, way, op, opinc, speed)}, speed);
}
if(document.documentElement&&document.documentElement.style){
fade.d=document.documentElement, fade.t=function(o){return typeof fade.d.style[o]=='string'}; if(fade.d.filters)
document.write('<span id="ie_test" style="filter:progid:DXImageTransform.Microsoft.alpha(opacity=0);position:absolute;top:-1000px;">p<\/span>');
fade.ie=fade.d.filters&&ie_test.filters[0], fade.ie6=fade.ie&&typeof ie_test.filters[0].opacity=='number',
fade.prprt=fade.t('opacity')||fade.ie6? 'opacity' : fade.t('MozOpacity')? 'MozOpacity' : fade.t('KhtmlOpacity')? 'KhtmlOpacity' : null;
}
fade.set=function(){
var prop=fade.prprt=='opacity'? 'opacity' : fade.prprt=='MozOpacity'? '-moz-opacity' : '-khtml-opacity';
document.write('\n<style type="text/css">\n')
for (var i = 0; i < faders.length; i++)
document.write('#'+faders[i][0]+' {\n'+
(fade.ie? 'filter:progid:DXImageTransform.Microsoft.alpha(opacity='+faders[i][1]+')' : prop+':'+Math.min(faders[i][1]*.01, .99))+';\n}\n');
document.write('<\/style>\n')
}
fade.preset=function(id){
for (var i = 0; i < faders.length; i++)
if (id==faders[i][0])
return faders[i][1];
return 0;
}
if(fade.prprt||fade.ie)
fade.set();
</script>

right before your MM_swap script, and change this:


function popuplinkfunc(imgsrc){
if (popupsetting[0]==1){
var imgHTML='<img src="'+imgsrc.href+'">';
document.getElementById('loadarea').innerHTML=imgHTML;
return false
}
else
return true
}

to:


function popuplinkfunc(imgsrc){
if (popupsetting[0]==1){
if(document.getElementById('fader'))
fade(document.getElementById('fader'),'out',0,10,0);
var imgHTML='<table width="100%" height="100%"><tr><td style="border:none;background:none;"><img id="fader" src="'+imgsrc.href+'"></td></tr></table>';
setTimeout(function(){
document.getElementById('loadarea').innerHTML=imgHTML;
fade(document.getElementById('fader'),'in',100,2,40);
},200);
return false
}
else
return true
}

and change your loadarea css to:


#loadarea {
margin-top: 10px;
padding: 0px;
float: right;
height: 330px;
width: 365px;
margin-right: 10px;
}

Tommisauce
08-03-2007, 10:11 AM
Once again John - you're a magician!! Your coding is superb and on the button! The fade trick is working like a dream. OK I'm nearly out of questions for you - I took your instructions on board to include:

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

But can't figure out what it's supposed to do, I tested it in the browser and didnt notice a difference.

Also just one minor thing - how do I get rid of the wording 'Photo 1, photo 2..." etc. If the above coding was supposed to do that it didn't.

Once again sincere gratitude to you and the time you've spent helping me.

jscheuer1
08-03-2007, 12:46 PM
That code wasn't supposed to do anything. I didn't say to add it, I said to comment it out. Meaning, to add the red comment tags to the existing bit of code that you already have on your page.


OK, to get rid of the nav links, comment this out like so:


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

You could just remove it, but if you get more images you will want it, and will want to style it so that it goes with the rest of the page.

yaniv
08-09-2007, 01:39 PM
change this :
var descriptionprefix=[1, "Photo "]
to this:
var descriptionprefix=[0, "Photo "]

to remove the "photo"

jscheuer1
08-09-2007, 03:09 PM
change this :
var descriptionprefix=[1, "Photo "]
to this:
var descriptionprefix=[0, "Photo "]

to remove the "photo"

Ah, yes! I thought Tommisauce meant the pagination links, but this is what he/she really meant in this case I think.