appending images from php to document with javascript/jquery

Question

    <?php
$imgDir =   'images/';
$images =   glob($imgDir . '*.{jpg,jpeg,png,gif}',GLOB_BRACE);
echo json_encode($images);  
?>

<script>
jQuery(function(){
    var phpvar  =   '<?php echo json_encode($images) ?>';
        jQuery('body').append('<img src="' + phpvar + '"/>');
    });
</script>

The top php scans the folder 'images' and echoes all the file pathnames. However i want to use the array formed from this and append it to the document/body to display the images using . But i'm not sure how to pass the php variable '$images' to jquery/javascript

The question Why comes to mind. Unless you ajax the php created JSON, why not just use the php to write the image tags? — mplungjan
– mplungjan, Commented Jan 1, 2014 at 11:06
@mplungjan i did this: echo '<img src="/uploads/'.json_encode($images).'"/>'; and it fails to find the images. When i right click the blank image and try to save it, it gives me "[.htm" — jn025
– jn025, Commented Jan 1, 2014 at 11:17

duellsy · Accepted Answer · 2014-01-01 11:26:32Z

1

The phpvar that you're creating is actually an array (provided you remove the quotes), so you need to loop through this array and add each image separately, like this:

jQuery(function(){
    var phpvar = <?php echo json_encode($images) ?>;
    $.each(phpvar, function(id, image){
        jQuery('body').append('<img src="' + image + '"/>');
    });
});

answered Jan 1, 2014 at 11:26

duellsy

8,6432 gold badges38 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

mplungjan · Accepted Answer · 2014-01-01 13:56:47Z

1

In my opinion you are wasting processing and a needless framework for simple PHP array processing.

No need for either JSON, JSONEncode or jQuery:

foreach (glob('images/*.{jpg,jpeg,png,gif}',GLOB_BRACE) as $filename) {
  echo '<img src=".$filename.'" alt="" />'."\n";
}

answered Jan 1, 2014 at 13:56

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Comments

user2106107 · Accepted Answer · 2014-01-02 05:28:47Z

-1

<?php
$imgDir =   'images/';
$images =   glob($imgDir . '*.{jpg,jpeg,png,gif}',GLOB_BRACE);
$image_var ="";
foreach($images as $img)
{
$image_var.="<img src=".$img.">";
}

echo json_encode($image_var);
?>

<script>
jQuery(function(){
var phpvar  =   <?php echo json_encode($image_var) ?>;
    jQuery('body').append(phpvar);
});
</script>

edited Jan 2, 2014 at 5:28

answered Jan 1, 2014 at 11:38

user2106107

93 bronze badges

1 Comment

mplungjan Over a year ago

No need whatsoever to encode that string nor to put it in quotes in the script nor to use jQuery

Collectives™ on Stack Overflow

appending images from php to document with javascript/jquery

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related