PDA

View Full Version : Combining PHP with my javascript Slide show



npsari
04-13-2007, 11:11 AM
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
04-14-2007, 02:50 AM
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
04-14-2007, 01:08 PM
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
04-14-2007, 02:15 PM
Are you sure PHP is enabled on your hosting service?

jscheuer1
04-14-2007, 02:31 PM
Are you sure PHP is enabled on your hosting service?

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

npsari
04-14-2007, 02:44 PM
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
04-14-2007, 02:47 PM
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
04-14-2007, 07:04 PM
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
04-14-2007, 07:11 PM
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
04-14-2007, 07:32 PM
Hey. now it works

Thanks much for the new info

thetestingsite
04-14-2007, 07:38 PM
No problem, glad to hear it is working for you. :)

npsari
04-14-2007, 07:41 PM
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