Combining PHP with my javascript Slide show

[npsari]

I have this javascript Slide-Show, and I want display the images-URLs saved in mySQL databse...

Example: $row[image1]

Can this be done?

how plz


<table border="0" cellpadding="0">
<caption><strong>Air Show Photos</strong></caption>
<tr>
<td width="100%"><img src="plane1.gif" width="300" height="240" name="photoslider"></td>
</tr>
<tr>
<td width="100%"><form method="POST" name="rotater">
<div align="center"><center><p><script language="JavaScript1.1">
var photos=new Array()
var which=0

/*Change the below variables to reference your own images. You may have as many images in the slider as you wish*/
photos[0]="plane1.gif"
photos[1]="plane2.gif"
photos[2]="plane3.gif"
photos[3]="plane4.gif"
photos[4]="plane5.gif"


function backward(){
if (which>0){
window.status=''
which--
document.images.photoslider.src=photos[which]
}
}

function forward(){
if (which<photos.length-1){
which++
document.images.photoslider.src=photos[which]
}
else window.status='End of gallery'
}
</script><input type="button" value="&lt;&lt;Back" name="B2"
onClick="backward()"> <input type="button" value="Next&gt;&gt;" name="B1"
onClick="forward()"><br>
<a href="#" onClick="which=1;backward();return false"><small>Start Over</small></a></p>
</center></div>
</form>
</td>
</tr>
</table>

<p align="center"><font face="arial" size="-2">This free script provided by</font><br>
<font face="arial, helvetica" size="-2"><a href="http://javascriptkit.com">JavaScript
Kit</a></font></p>

[thetestingsite]

Try this (example only, you will have to edit the variables in the php section of the code):



<?php
$conn = mysql_connect("server","username","password");
mysql_select_db("database", $conn);

$imgs = mysql_query("SELECT * FROM `table`");

if (mysql_num_rows($imgs) > 0) {
?>

<table border="0" cellpadding="0">
<caption><strong>Air Show Photos</strong></caption>
<tr>
<td width="100&#37;"><img src="plane1.gif" width="300" height="240" name="photoslider"></td>
</tr>
<tr>
<td width="100%"><form method="POST" name="rotater">
<div align="center"><center><p><script language="JavaScript1.1">
var photos=new Array()
var which=0

/*Change the below variables to reference your own images. You may have as many images in the slider as you wish*/

<?php

$i = 0;

while ($row = mysql_fetch_array($imgs)) {

echo 'photos['.$i.']="'.$row["image"].'";

$i++;

}
?>

function backward(){
if (which>0){
window.status=''
which--
document.images.photoslider.src=photos[which]
}
}

function forward(){
if (which<photos.length-1){
which++
document.images.photoslider.src=photos[which]
}
else window.status='End of gallery'
}
</script><input type="button" value="&lt;&lt;Back" name="B2"
onClick="backward()"> <input type="button" value="Next&gt;&gt;" name="B1"
onClick="forward()"><br>
<a href="#" onClick="which=1;backward();return false"><small>Start Over</small></a></p>
</center></div>
</form>
</td>
</tr>
</table>

<p align="center"><font face="arial" size="-2">This free script provided by</font><br>
<font face="arial, helvetica" size="-2"><a href="http://javascriptkit.com">JavaScript
Kit</a></font></p>
<?php
}
?>


Not tested, but should work. Hope this helps

[npsari]

Hey, thas a good way around it

However, I tried it many times

I even used another javascript slideshows

But the javascript refuses any php into it

It always shows an error in the button task bar

You know why javascript acts like that

[mburt]

Are you sure PHP is enabled on your hosting service?

[jscheuer1]

Are you sure PHP is enabled on your hosting service?

Also, make sure your page has the .php extension.

[npsari]

Yes, it is

ad yea, i saved it as .php

I even print the resultsoutside the script to see if they show right

and they do

So, i dont know why an error shows in the script

[jscheuer1]

To debug the javascript side of the code, use your browser's view source to see the served content of the live page.

Or, give us a link to the live page and we'll take a crack at it.

[npsari]

hey, thats is true actually
I just cheked the Source code
But it seems ok

Here is the page

See the source

http://www.shynessexpress.com/images.php

And tell me if you spot the issue

The links show fine

[thetestingsite]

Ok, so I looked at the source code and found this for the images array:





photos[0]="http://i125.photobucket.com/albums/p42/tramba/22.jpg"<br>photos[1]="http://i125.photobucket.com/albums/p42/tramba/11.jpg"



So I looked at the code I posted and decided to rewrite it to fix any errors it had:



<?php
$conn = mysql_connect("server","username","password");
mysql_select_db("database", $conn);

$imgs = mysql_query("SELECT * FROM `table`");

if (mysql_num_rows($imgs) > 0) {
?>

<table border="0" cellpadding="0">
<caption><strong>Air Show Photos</strong></caption>
<tr>
<td width="100&#37;"><img src="plane1.gif" width="300" height="240" name="photoslider"></td>
</tr>
<tr>
<td width="100%"><form method="POST" name="rotater">
<div align="center"><center><p><script language="JavaScript1.1">
var photos=new Array()
var which=0

/*Change the below variables to reference your own images. You may have as many images in the slider as you wish*/

<?php

$i = 0;

while ($row = mysql_fetch_array($imgs)) {
?>
photos[<?=$i;?>]="<?=$row['image'];?>"

<?php
$i++;
}
?>

function backward(){
if (which>0){
window.status=''
which--
document.images.photoslider.src=photos[which]
}
}

function forward(){
if (which<photos.length-1){
which++
document.images.photoslider.src=photos[which]
}
else window.status='End of gallery'
}
</script><input type="button" value="&lt;&lt;Back" name="B2"
onClick="backward()"> <input type="button" value="Next&gt;&gt;" name="B1"
onClick="forward()"><br>
<a href="#" onClick="which=1;backward();return false"><small>Start Over</small></a></p>
</center></div>
</form>
</td>
</tr>
</table>

<p align="center"><font face="arial" size="-2">This free script provided by</font><br>
<font face="arial, helvetica" size="-2"><a href="http://javascriptkit.com">JavaScript
Kit</a></font></p>
<?php
}
?>


Should work, but not tested. Hope this helps.

[npsari]

Hey. now it works

Thanks much for the new info

[thetestingsite]

No problem, glad to hear it is working for you. :)

[npsari]

Related to he topic guys


$Image2 = $row['Image2']; // or the your name for location in db

if (!isset($Image2) || empty($Image2)) {
print "\n";
} else {
print ("<IMG src=\"$row[Image2]\" alt=\"Image\" align=\"top\" border=\"0\" width=\"250\" height=\"250\"><BR>\n");
}


I am using the above code to determine whether image2 exists

So, I want the Javascript-SlideShow to work if Image 2 exists

Can this be done?

Because if i put the Javascript after } else {

that would show thousands of errors