Menu
Community /Pin to ProfileBookmark
@NogDogApr 28.2009 — #What you could do is change the .js file to a .php file that is served up as JavaScript, then use PHP to generate the JavaScript array of files.
Obviously that will need tweaking for the actual data and identifier names you want ot use in the database if you go with this approach, but should give you the general idea of how to approach it.@NogDogApr 28.2009 — #Anything not within <?php...?> tags will be directly output to the client (browser) just as it would in a "normal" file.
The code I supplied above was missing the database connection stuff. It would be something like:
The database name would then not appear in your query.
The printf() statement will likely then need to be modified to match the actual data you retrieve. In the quoted string that has all the actual output, there needs to be a one-to-one match between place-holders ("%d" or "%s") and the values that follow. The "%d" is for an numeric integer value, and "%s" is for a generic string value. So the very first "%d" matches up with the [b]$ix++[/b] that is being used to enumerate the JS array. You'll need to massage the rest of the string to match the desired format and make sure there are no extra/missing place-holders and matching comma-separated values.
Javascript & MySQL
Hi,
Am wondering if anyone may be able to assist me and point me in the right direct please,
I have Javascript that will do a slideshow with fade in and fade out,
Also pause with mouse over,
I have the image names hardcoded into the script at the top,
But each time an image is added to the website i have to change the file,
Is it possible to change the script to read all image from a folder or all image with a prefix from a folder?
Or is it possible to make it look at my SQL Database and look at the tables for the gallery where the latest images are uploaded?
Does this make much sence? sorry
Here is the stand alone script:
.js file
[CODE]
var fadeimages=new Array()
fadeimages[0]=[“/../../../gallery/albums/userpics/10038/normal_demotiv_pic_0-20022940_1~0.jpg”, “http://www.mess-hall.co.uk/gallery/displayimage.php?album=105&pos=2”, “”] /
fadeimages[1]=[“/../../../gallery/albums/userpics/10001/normal_demotiv_pic_0-chris.jpg”, “http://www.mess-hall.co.uk/gallery/displayimage.php?album=105&pos=9”, “”]
fadeimages[2]=[“/../../../gallery/albums/userpics/10001/normal_demotiv_pic_0-14545185_1.jpg”, “http://www.mess-hall.co.uk/gallery/displayimage.php?album=105&pos=1”, “”]
var fadebgcolor=”white”
var fadearray=new Array()
var fadeclear=new Array()
var dom=(document.getElementById)
var iebrowser=document.all
function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){
this.pausecheck=pause
this.mouseovercheck=0
this.delay=delay
this.degree=10
this.curimageindex=0
this.nextimageindex=1
fadearray[fadearray.length]=this
this.slideshowid=fadearray.length-1
this.canvasbase=”canvas”+this.slideshowid
this.curcanvas=this.canvasbase+”_0″
if (typeof displayorder!=”undefined”)
theimages.sort(function() {return 0.5 – Math.random();})
this.theimages=theimages
this.imageborder=parseInt(borderwidth)
this.postimages=new Array()
for (p=0;p<theimages.length;p++){
this.postimages[p]=new Image()
this.postimages[p].src=theimages[p][0]
}
var fadewidth=fadewidth+this.imageborder*2
var fadeheight=fadeheight+this.imageborder*2
if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox)
document.write(‘<div id=”master’+this.slideshowid+'” style=”position:relative;width:’+fadewidth+’px;height:’+fadeheight+’px;overflow:hidden;”><div id=”‘+this.canvasbase+’_0″ style=”position:absolute;width:’+fadewidth+’px;height:’+fadeheight+’px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:’+fadebgcolor+'”></div><div id=”‘+this.canvasbase+’_1″ style=”position:absolute;width:’+fadewidth+’px;height:’+fadeheight+’px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:’+fadebgcolor+'”></div></div>’)
else
document.write(‘<div><img name=”defaultslide’+this.slideshowid+'” src=”‘+this.postimages[0].src+'”></div>’)
if (iebrowser&&dom||dom)
this.startit()
else{
this.curimageindex++
setInterval(“fadearray[“+this.slideshowid+”].rotateimage()”, this.delay)
}
}
function fadepic(obj){
if (obj.degree<100){
obj.degree+=10
if (obj.tempobj.filters&&obj.tempobj.filters[0]){
if (typeof obj.tempobj.filters[0].opacity==”number”)
obj.tempobj.filters[0].opacity=obj.degree
else
obj.tempobj.style.filter=”alpha(opacity=”+obj.degree+”)”
}
else if (obj.tempobj.style.MozOpacity)
obj.tempobj.style.MozOpacity=obj.degree/101
else if (obj.tempobj.style.KhtmlOpacity)
obj.tempobj.style.KhtmlOpacity=obj.degree/100
else if (obj.tempobj.style.opacity&&!obj.tempobj.filters)
obj.tempobj.style.opacity=obj.degree/101
}
else{
clearInterval(fadeclear[obj.slideshowid])
obj.nextcanvas=(obj.curcanvas==obj.canvasbase+”_0″)? obj.canvasbase+”_0″ : obj.canvasbase+”_1″
obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas)
obj.populateslide(obj.tempobj, obj.nextimageindex)
obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)? obj.nextimageindex+1 : 0
setTimeout(“fadearray[“+obj.slideshowid+”].rotateimage()”, obj.delay)
}
}
fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=””
if (this.theimages[picindex][1]!=””)
slideHTML='<a href=”‘+this.theimages[picindex][1]+'” target=”‘+this.theimages[picindex][2]+'”>’
slideHTML+='<img src=”‘+this.postimages[picindex].src+'” border=”‘+this.imageborder+’px”>’
if (this.theimages[picindex][1]!=””)
slideHTML+='</a>’
picobj.innerHTML=slideHTML
}
fadeshow.prototype.rotateimage=function(){
if (this.pausecheck==1)
var cacheobj=this
if (this.mouseovercheck==1)
setTimeout(function(){cacheobj.rotateimage()}, 100)
else if (iebrowser&&dom||dom){
this.resetit()
var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
crossobj.style.zIndex++
fadeclear[this.slideshowid]=setInterval(“fadepic(fadearray[“+this.slideshowid+”])”,50)
this.curcanvas=(this.curcanvas==this.canvasbase+”_0″)? this.canvasbase+”_1″ : this.canvasbase+”_0″
}
else{
var ns4imgobj=document.images[‘defaultslide’+this.slideshowid]
ns4imgobj.src=this.postimages[this.curimageindex].src
}
this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0
}
fadeshow.prototype.resetit=function(){
this.degree=10
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
if (crossobj.filters&&crossobj.filters[0]){
if (typeof crossobj.filters[0].opacity==”number”)
crossobj.filters(0).opacity=this.degree
else
crossobj.style.filter=”alpha(opacity=”+this.degree+”)”
}
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=this.degree/101
else if (crossobj.style.KhtmlOpacity)
crossobj.style.KhtmlOpacity=this.degree/100
else if (crossobj.style.opacity&&!crossobj.filters)
crossobj.style.opacity=this.degree/101
}
fadeshow.prototype.startit=function(){
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
this.populateslide(crossobj, this.curimageindex)
if (this.pausecheck==1){
var cacheobj=this
var crossobjcontainer=iebrowser? iebrowser[“master”+this.slideshowid] : document.getElementById(“master”+this.slideshowid)
crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
}
this.rotateimage()
}
emeded script:
[QUOTE]
<div class=”centerdiv”>
<script type=”text/javascript”>
new fadeshow(fadeimages, 500, 300, 0, 3000, 1, “R”)
</script>
A quick outline,
The script is to load the images listed at the top,
and move though them one after the over, with a smooth fade in fade out effect
My Aim is to add this script to my PHPBB Forum, at the top, Linking it to a folder or Database where i have a gallery installed
So the latest images uploaded are displaying in the script,
If this loads from a folder or database, am unsure on how to go about this, How advise can javascript go..
Thanks ?
Sign in
to post a comment4 Comments(s) ↴
0
@NogDogApr 28.2009 — #What you could do is change the .js file to a .php file that is served up as JavaScript, then use PHP to generate the JavaScript array of files.[code=php]
<?php // IMPORTANT: no space/newline before opening tag
header('Content-Type: text/javascript');
?>
var fadeimages=new Array()
<?php
$sql = "SELECT directory, file_name, album, pos FROM some_table";
$result = mysql_query($sql);
$ix = 0;
while($row = mysql_fetch_assoc($result))
{
printf(
'fadeimages[%d]=["/../../../gallery/albums/userpics/%d/%s", "http://www.mess-hall.co.uk/gallery/displayimage.php?album=%d&pos=%d", ""]',
$ix++,
$row['directory'],
$row['file_name'],
$row['album'],
$row['pos']
);
}
?>
var fadebgcolor="white"
/* rest of script... */
[/code]Obviously that will need tweaking for the actual data and identifier names you want ot use in the database if you go with this approach, but should give you the general idea of how to approach it.
0
@NogDogApr 28.2009 — #Anything not within <?php...?> tags will be directly output to the client (browser) just as it would in a "normal" file.The code I supplied above was missing the database connection stuff. It would be something like:
[code=php]
<?php
header('Content-Type: text/javascript');
mysql_connect('localhost', 'db_user_name', 'db_user_password') or die('DB connect failed');
mysql_select_db('database_name') or die('DB select failed');
?>
...etc....
[/code]The database name would then not appear in your query.
The printf() statement will likely then need to be modified to match the actual data you retrieve. In the quoted string that has all the actual output, there needs to be a one-to-one match between place-holders ("%d" or "%s") and the values that follow. The "%d" is for an numeric integer value, and "%s" is for a generic string value. So the very first "%d" matches up with the [b]$ix++[/b] that is being used to enumerate the JS array. You'll need to massage the rest of the string to match the desired format and make sure there are no extra/missing place-holders and matching comma-separated values.