Can I change items in jquery dynamically?

Question

I have the following jquery.

$(function() {
$('div#slideshow').append('<img src="images/forsiden/grans_julebrus.jpg" /><img src="images/forsiden/cappelen_hippo.jpg" /><img src="images/forsiden/capplen_grandmarap.jpg" /><img src="images/forsiden/agm_peace.jpg" /><img src="images/forsiden/cappelein_aboriginee.jpg" />');
...
...

I want to add all the image dynamically with php.

<?php echo $images; ?>

Is there any way I can do it?

Answer 1

$(function() {
$('div#slideshow').append("<?php echo $images; ?>");
});

Answer 2

If the JS function is in it's own .js file, then by default you cannot inject PHP code inside.

One way to do it is to hide the filenames in the document using hidden input fields (or hidden divs etc) and use jQuery to get them, or you can use jQuery's AJAX functions to request filenames from a PHP handler.

Answer 3

DISCLAIMER: I forgot how to write PHP code over time, so you'll have to figure that part out for yourself.

I'd write JavaScript inside of PHP. For instance:

echo "myImages = new Array();";

Then you create a for loop which write this for every picture there is

echo "myImages[".$i."] = ".$TheImageSrc;

When the js File is loaded, Javascript can access that Array and load the images from it via

var images = '';
for (var i=0;i<myImages.length;i++){
   images .= '<img src="'+myImages[i]+'" />';
}
$('div#slideshow').append(images);

Edit 1

Optimised the JS portion