Slideshow with descriptions from mysql

dropfaith · January 26, 2009

this code below gets everything and displays it properly how i want it im new at javascript so im wondering how i can make a slideshow using the data coming out of my database..

ive seen some slideshow codes from google but none of them cover a php and mysql playlist of sorts

<h2>Portfolio</h2>
<?
// includes
include("template/conf.php");
// open database connection
$connection = mysql_connect($host, $user, $pass) or die ("Unable to connect!");
// select database
mysql_select_db($db) or die ("Unable to select database!");
// generate and execute query
$query = "SELECT * FROM gallery WHERE Spotlight = 'Yes'";
$result = mysql_query($query) or die ("Error in query: $query. " . mysql_error());
if (mysql_num_rows($result) > 0)
{
// iterate through resultset
// print article titles
while($row = mysql_fetch_object($result))
{
?>
   		 						   	 		 		   		   	   		<img class="spotlight"  src="portfolio/<? echo $row->Image; ?>" alt="<? echo $row->Title; ?>" title="<? echo $row->Title; ?>" />
																	<p><? echo $row->About; ?></p>

														<h2><a href="<? echo $row->Website; ?>">Click Here For Website</a></h2>
<?
}
}
// if no records present
// display message
else
{
?>
<?
}
// close database connection
mysql_close($connection);
?>

webster08 · January 26, 2009

uses mysql & php too put all of the images (that come out of your db) into an array; then let your slideshow script do the rest. this is how it is usually done with sever side and client side combination.

RichardRotterdam · January 26, 2009

Usually what I see with javascript galleries are list elements or nested divs

for example

<ul>
  <li><img src="somethumb1.jpg" /></li>
  <li><img src="somethumb2.jpg" /></li>
  <li><img src="somethumb2.jpg" /></li>
</ul

or

<div id="gallery">
  <div><img src="somethumb1.jpg" /></div>
  <div><img src="somethumb2.jpg" /></div>
  <div><img src="somethumb3.jpg" /></div>
</div>

something like that is easily created with a php loop.

Then you can use javascript to build a gallery from it.

dropfaith · January 26, 2009

my javascript slideshow



<html>

<head>



<script>


var SlideShowSpeed = 3000;

// Set the duration of crossfade (in seconds)
var CrossFadeDuration = 3;

var Picture = new Array(); // don't change this
var Caption = new Array(); // don't change this
var Website = new Array(); // don't change this


Picture[1]  = 'portfolio/Imagesbytroy.jpg';
Picture[2]  = 'Image002.jpg';
Picture[3]  = 'Image003.jpg';
Picture[4]  = 'Image004.jpg';
Picture[5]  = 'Image005.jpg';
Picture[6]  = 'Image006.jpg';
Picture[7]  = 'Image007.jpg';
Picture[8]  = 'Image008.jpg';
Picture[9]  = 'Image009.jpg';
Picture[10] = 'Image010.jpg';



Caption[1]  = "This is the first caption.";
Caption[2]  = "This is the second caption.";
Caption[3]  = "This is the third caption.";
Caption[4]  = "This is the fourth caption.";
Caption[5]  = "This is the fifth caption.";
Caption[6]  = "This is the sixth caption.";
Caption[7]  = "This is the seventh caption.";
Caption[8]  = "This is the eighth caption.";
Caption[9]  = "This is the ninth caption.";
Caption[10] = "This is the tenth caption.";


Website[1]  = "Website 1.";
Website[2]  = "This is the second caption.";
Website[3]  = "This is the third caption.";
Website[4]  = "This is the fourth caption.";
Website[5]  = "This is the fifth caption.";
Website[6]  = "This is the sixth caption.";
Website[7]  = "This is the seventh caption.";
Website[8]  = "This is the eighth caption.";
Website[9]  = "This is the ninth caption.";
Website[10] = "This is the tenth caption.";

// =====================================
// Do not edit anything below this line!
// =====================================

var tss;
var iss;
var jss = 1;
var pss = Picture.length-1;

var preLoad = new Array();
for (iss = 1; iss < pss+1; iss++){
preLoad[iss] = new Image();
preLoad[iss].src = Picture[iss];}

function runSlideShow(){
if (document.all){
document.images.PictureBox.style.filter="blendTrans(duration=2)";
document.images.PictureBox.style.filter="blendTrans(duration=CrossFadeDuration)";
document.images.PictureBox.filters.blendTrans.Apply();}
document.images.PictureBox.src = preLoad[jss].src;
if (document.getElementById) document.getElementById("CaptionBox").innerHTML= Caption[jss];
if (document.getElementById) document.getElementById("Websites").innerHTML= Website[jss];
if (document.all) document.images.PictureBox.filters.blendTrans.Play();
jss = jss + 1;
if (jss > (pss)) jss=1;
tss = setTimeout('runSlideShow()', SlideShowSpeed);
}

</script>

</head>


<body onload=runSlideShow() bgcolor=#000000>

	<img class="spotlight"  src="portfolio/Image001.jpg" name="PictureBox" />
	<p id="CaptionBox"><? echo $row->About; ?></p>
	<h2 id="Websites"></h2>


</body>

</html>

php that works proplerly

<?
// includes
include("template/conf.php");
// open database connection
$connection = mysql_connect($host, $user, $pass) or die ("Unable to connect!");
// select database
mysql_select_db($db) or die ("Unable to select database!");
// generate and execute query
$query = "SELECT * FROM gallery WHERE Spotlight = 'Yes'";
$result = mysql_query($query) or die ("Error in query: $query. " . mysql_error());
if (mysql_num_rows($result) > 0)
{
// iterate through resultset
// print article titles
while($row = mysql_fetch_object($result))
{
?>

all i cant fiqure out is how to populate the javascript arrays

Website[1]  = "Website 1.";
Website[2]  = "This is the second caption.";
Website[3]  = "This is the third caption.";
Website[4]  = "This is the fourth caption.";
Website[5]  = "This is the fifth caption.";
Website[6]  = "This is the sixth caption.";
Website[7]  = "This is the seventh caption.";
Website[8]  = "This is the eighth caption.";
Website[9]  = "This is the ninth caption.";
Website[10] = "This is the tenth caption.";

RichardRotterdam · January 26, 2009

Do you mind if I gave you a link of a script that does that? I remember making one from scratch one and the part where fading from one image to another was a pain in the butt to get working properly

dropfaith · January 26, 2009

sure i can atleast reference it if not use most of it

RichardRotterdam · January 26, 2009

here is one using jquery with a tutorial

http://jonraasch.com/blog/a-simple-jquery-slideshow

and one build with mootools that uses a javascript array to build the slideshow(check the source)

http://www.electricprism.com/aeron/slideshow/example1.html

hope that helps

Sign In

Slideshow with descriptions from mysql

Recommended Posts

dropfaith

Link to comment

Share on other sites

webster08

Link to comment

Share on other sites

RichardRotterdam

Link to comment

Share on other sites

dropfaith

Link to comment

Share on other sites

RichardRotterdam

Link to comment

Share on other sites

dropfaith

Link to comment

Share on other sites

RichardRotterdam

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information