dropfaith Posted January 26, 2009 Share Posted 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); ?> Quote Link to comment https://forums.phpfreaks.com/topic/142432-slideshow-with-descriptions-from-mysql/ Share on other sites More sharing options...
webster08 Posted January 26, 2009 Share Posted 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. Quote Link to comment https://forums.phpfreaks.com/topic/142432-slideshow-with-descriptions-from-mysql/#findComment-746332 Share on other sites More sharing options...
RichardRotterdam Posted January 26, 2009 Share Posted 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. Quote Link to comment https://forums.phpfreaks.com/topic/142432-slideshow-with-descriptions-from-mysql/#findComment-746378 Share on other sites More sharing options...
dropfaith Posted January 26, 2009 Author Share Posted 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."; Quote Link to comment https://forums.phpfreaks.com/topic/142432-slideshow-with-descriptions-from-mysql/#findComment-746382 Share on other sites More sharing options...
RichardRotterdam Posted January 26, 2009 Share Posted 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 Quote Link to comment https://forums.phpfreaks.com/topic/142432-slideshow-with-descriptions-from-mysql/#findComment-746393 Share on other sites More sharing options...
dropfaith Posted January 26, 2009 Author Share Posted January 26, 2009 sure i can atleast reference it if not use most of it Quote Link to comment https://forums.phpfreaks.com/topic/142432-slideshow-with-descriptions-from-mysql/#findComment-746394 Share on other sites More sharing options...
RichardRotterdam Posted January 26, 2009 Share Posted 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 Quote Link to comment https://forums.phpfreaks.com/topic/142432-slideshow-with-descriptions-from-mysql/#findComment-746396 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.