Page 1 of 2

Image slide show with PHP and MYSQL

Posted: Wed Jan 25, 2012 3:07 pm
by crf121359
Hi,

I have a php code that allows me to upload images on my server. it will rename the image and saves the image names and some texts on the mysql databse.

I just need to know how I can pull those images and texts related to each image and make an slideshow on a PHP page?

here is my current code for display.php

Code: Select all

<?php
 // Connects to your Database
 mysql_connect("localhost", "databaseusernam", "password") or die(mysql_error()) ;
 mysql_select_db("database") or die(mysql_error()) ;
 
 //Retrieves data from MySQL
 $data = mysql_query("SELECT * FROM employees LIMIT 3") or die(mysql_error());
 
 //Puts it into an array
 while($info = mysql_fetch_array( $data ))
 {
 
 //Outputs the image and other data
 Echo "<img src=images22/".$info['uploaded'] ."> <br>";
 Echo "<b>Name:</b> ".$info['name'] . "<br> ";
 Echo "<b>Email:</b> ".$info['email'] . " <br>";
 Echo "<b>Phone:</b> ".$info['phone'] . " <hr>";
 }
 ?> 
the page above will show the images but its not a slideshow.


I look forward to your replies.

Thanks

Re: Image slide show with PHP and MYSQL

Posted: Wed Jan 25, 2012 3:49 pm
by social_experiment
http://www.justin-cook.com/wp/2007/10/1 ... avascript/
You'll need to use javascript for a slideshow

Hth

Re: Image slide show with PHP and MYSQL

Posted: Wed Jan 25, 2012 3:57 pm
by crf121359
Thanks. I know that I have to use javascript for a slideshow and I have found this: http://snook.ca/archives/javascript/sim ... -slideshow

but I really don't know how to pull the images and texts from the mysql databse using this slideshow!!!

I thought there miust be an easy to follow tutorial or some sort so I can follow!?

Re: Image slide show with PHP and MYSQL

Posted: Wed Jan 25, 2012 4:00 pm
by social_experiment

Code: Select all

<?php
//Outputs the image and other data
 Echo "<img src=images22/".$info['uploaded'] ."> <br>";
 Echo "<b>Name:</b> ".$info['name'] . "<br> ";
 Echo "<b>Email:</b> ".$info['email'] . " <br>";
 Echo "<b>Phone:</b> ".$info['phone'] . " <hr>";
 }
?>
Aren't you already printing to the browser here?

Re: Image slide show with PHP and MYSQL

Posted: Wed Jan 25, 2012 4:09 pm
by crf121359
yes but it will only show 3 images ("SELECT * FROM employees LIMIT 3")

I can change that to 1 or 10 if I wanted to but that is not a slideshow. it just pulls the images from the database and shows them all on the page at the same time. slideshow shows images one by one!

Re: Image slide show with PHP and MYSQL

Posted: Wed Jan 25, 2012 5:27 pm
by social_experiment
Ok, i understand what you have in mind. For this i would use ajax; each time a button is clicked (prev or next) you could pass in the query string prev or next for example. Depending which value is passed you would subtract or add one to the value you currently have. The new value is then passed to the sql query and the new image selected. I haven't tested this but in my mind it seems like it could work.

Re: Image slide show with PHP and MYSQL

Posted: Wed Jan 25, 2012 5:43 pm
by crf121359
Thanks for the reply. I need it to shuffle through the images automatically.

Re: Image slide show with PHP and MYSQL

Posted: Wed Jan 25, 2012 5:56 pm
by Celauran
The web page you linked spells it out step by step. Just dump your images in a div.

Code: Select all

<?php
...
$query = "SELECT image FROM tablename WHERE whatever";
$result = $sql->query($query)->fetchAll();
...
?>

<div class="fadein">
<?php foreach ($result as $image): ?>
    <img src="/some/path/<?php echo $image->path; ?>" alt="Some text" />
<?php endforeach; ?>
</div>

Re: Image slide show with PHP and MYSQL

Posted: Wed Jan 25, 2012 6:13 pm
by crf121359
i'm not sure how to use this code!! any chance you could explain it further? how can I use it with my current code?

Re: Image slide show with PHP and MYSQL

Posted: Wed Jan 25, 2012 6:27 pm
by Celauran

Code: Select all

<?php
// Connects to your Database
mysql_connect("localhost", "databaseusernam", "password") or die(mysql_error()) ;
mysql_select_db("database") or die(mysql_error()) ;

//Retrieves data from MySQL
$data = mysql_query("SELECT * FROM employees LIMIT 3") or die(mysql_error());

echo "<div class=\"fadein\">";
while($info = mysql_fetch_array( $data ))
{
    //Outputs the image and other data
    echo "<img src=images22/{$info['uploaded']} />"
}
echo "</div>";
?>
You'll need to tweak it a little to get the name display, but that's the general idea.

Re: Image slide show with PHP and MYSQL

Posted: Wed Jan 25, 2012 6:47 pm
by crf121359
I did try the code and I get this error:
Parse error: syntax error, unexpected '}', expecting ',' or ';' in /home/display.php on line 14

I did add a ; on line 14 and still the same.

any suggesstions?

Re: Image slide show with PHP and MYSQL

Posted: Wed Jan 25, 2012 6:51 pm
by Celauran
Yes, line 13 is missing a ;

Re: Image slide show with PHP and MYSQL

Posted: Wed Jan 25, 2012 6:59 pm
by crf121359
Thanks for the prompt reply bud. That resolved the issue with erro but the images are displyed next to eachother and no slideshow!!

I know you guys probably are busy so I don't want to enoy you by asking so many questions. but is there any tutorial(s) that I can watch specifically related to what I am looking for? i have been serching youtube and google and haven't found anything that is suitable to what I am trying to do. I know it is not hard but I am new to PHP.

cheers

Re: Image slide show with PHP and MYSQL

Posted: Wed Jan 25, 2012 7:33 pm
by Celauran
Please post your complete code and we can take a look.

Re: Image slide show with PHP and MYSQL

Posted: Wed Jan 25, 2012 7:38 pm
by crf121359
I am using this code:

Code: Select all

<script>
$(function(){
    $('.fadein img:gt(0)').hide();
    setInterval(function(){
      $('.fadein :first-child').fadeOut()
         .next('img').fadeIn()
         .end().appendTo('.fadein');},
      3000);
});
</script>

<style type="text/css">
<!--
.fadein { position:relative; width:500px; height:332px; }
.fadein img { position:absolute; left:0; top:0; }
}
-->
</style>
<?php
// Connects to your Database
mysql_connect("localhost", "databaseusername", "password") or die(mysql_error()) ;
mysql_select_db("database") or die(mysql_error()) ;

//Retrieves data from MySQL
$data = mysql_query("SELECT * FROM employees LIMIT 3") or die(mysql_error());

echo "<div class=\"fadein\">";
while($info = mysql_fetch_array( $data ))
{
    //Outputs the image and other data
    echo "<img src=images22/{$info['uploaded']} />";
}
echo "</div>";
?>