Ultimate Fade-in slideshow (v2.1) - How can we dynamically add items to slideshow

**Mitch00** · 01-26-2010, 06:18 PM

1) Script Title: Ultimate Fade-in slideshow

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nslideshow.htm

3) Describe problem: Based on the current design of putting the list of images to use as a slideshow in the <head> and not the <bodu>, I am finding it to be extremely difficult to use php to dynamically populate this list from a database. Is there a known way to populate this list dynamically from a db? I love the code, and would use it if I could fill it from my database on page load.

Any suggestions would be appreciated.
Thanks,
Mitch

**ddadmin** · 01-26-2010, 11:51 PM

It shouldn't be too difficult actually. The key is just to output the portion in red below inside your configuration code dynamically:

Code:

<script type="text/javascript">

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
["http://i30.tinypic.com/531q3n.jpg"],
["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})

</script>

The rest can remain static as is. You might end up with something like:

Code:

<script type="text/javascript">

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
<?
echo "imagearray:[\";
$query = "SELECT * FROM gallery";
$result = mysql_query($query);
while($r=mysql_fetch_array($result)){
echo "[\"$r[imagepath]\", \"$r[link]\", \"\", \"$r[descp]\"],\n";
echo "],";
?>
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})

</script>

Note that the pseudo code above does not remove the very last comma (",") that should not exist after the very last array element of the image. You'll need to do that.

Basically the idea is just to output the aforementioned chunk of code inside the script dynamically so it looks exactly as if you had manually defined it on your page.

**Mitch00** · 01-27-2010, 08:53 PM

Great! That worked like a charm, thank you. Are there any issues that you can think of with moving the php database connection script which previously lived in the beginning of the <body> section to the <head> section (to allow for this code to run?)
Thank you
Mitch

**ddadmin** · 01-28-2010, 09:24 AM

Not that I can think of, no. The code for DB connections is server side, hence it makes no difference where it appears on the page, as it's always executed first before the page itself is rendered and output to the browser. But in this case since we want the output of the db connection to be within the HEAD section of the page, that's where your code should be at.

Thread: Ultimate Fade-in slideshow (v2.1) - How can we dynamically add items to slideshow

Thread Tools

Search Thread

Ultimate Fade-in slideshow (v2.1) - How can we dynamically add items to slideshow

Bookmarks

Bookmarks

Posting Permissions