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); ?> 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. 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. 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."; 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 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 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 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
Archived
This topic is now archived and is closed to further replies.