Question : populate a div dynamically for jquery processing

Hello,

I'm trying to implement a gallery slideshow (galleriffic) and I'm running into issues making the image list dynamic.  This is a really small application written in javascript and minimal php....not a java server side framework app.

The opensource jquery javascript that builds the image gallery (see jquery.galleriffic.js) is pulling in all <li> elements from the <div id="thumbs"> element in order to lead the images.  The problem is I don't want to hard code all my images in an html file.  I have a ajax based javascript function and some php (runs on window.onload) that goes and fetches all my images from the server and sets the <div id="thumbs"> innerHtml property, but that will only work if there are <li> elements in the <div id="thumbs"> container.  If there are two hardcoded <li>'s then only two of my dynamic images show up.  

The goal is to somehow either change the jquery code (addImage: function(listItem, thumbExists, insert, position) in the  jquery.galleriffic.js or populate the <div id="thumbs"> differently.  Any ideas are welcome.  I've attached all the code....    

jquery.galleriffic.js (31 KB) (File Type Details) 

gallery specific jquery js source code

jquery-1.3.2.js (117 KB) (File Type Details) 

jquery 1.3.2

example-2.html (6 KB) (File Type Details) 

html file that displays the image gallery and dynamically fetches the images

Answer : populate a div dynamically for jquery processing

I would say that the problem with your current code, if you don't want to change the PHP as blueghozt suggested, is that you are assigning

var gallery = $('#thumbs').galleriffic(...)

once the page has loaded, not once the <li>s are returned by your ajax call.

Instead of putting this code in $(document).ready, try putting it at the end of your getImages() function.