Take the 2-minute tour ×

When i am on the single.php page, i show the first image attachment. then i would like to load the next (and previous) image attachments without reloading the page.

so in single.php i started with this to retrieve an array with the images html:

      $attachments = get_posts($args);
  if ($attachments) {
            foreach ( $attachments as $attachment ) {
                 $my_image = wp_get_attachment_image($attachment->ID, large) );
         $attachments_list[] = $my_image;
  $first_image = current($attachments_list);
  echo $first_image; 

and then in the script.js file i would like to get the value of my php array $attachments_list to do something like this :

    var count = attachments_list.lenght();
    var init = 0;
    var current = init;

    if (count > 1) {
        $('#next-img').click(function() {
            if (current+1 < count) {
            } else if (current+1 === count) {
                current = init;
        $('#previous-img').click(function() {
            if (current > init) {
            } else if (current === init) {
                current = count-1;

how can i retrieve the value of the php $attachments_list array to attachments_list inside the script.js file ? Json maybe ?

thanks for your attention

share|improve this question
Just use a slider or Tabs for your gallery instead. This makes it look like a single view and you can switch through the images. –  kaiser Oct 25 '11 at 21:01
good idea, but the images are quite big and i don't want to load them all together. that's why i was looking for a more ajax-style solution. –  rogaroga Oct 25 '11 at 21:17
try this technique for passing an array to a script via wp_localize_script. –  Milo Oct 25 '11 at 21:36

2 Answers 2

@milo thanks ! i used a technique found on the page you sent.

it's almost working.

I added this at the end of the previous single.php code :

wp_localize_script('myscript', 'attachments_list', $attachments_list);

To work, this code must be called before wp_head(). Then, for a mysterious reason, the first element (with the index 0) is printed after the JS array in the html head. That's why i had to unshift an empty string in the array before to send it with wp_localize_script. 

Last thing:

var count = attachments_list.length;

is undefined. Everything is working fine when i replace count with a number, i can even access to the elements of the array with attachments_list[index], but the length of the array is undefined.

any idea about this ? thank you

share|improve this answer

I just ran into your problem @rogaroga, and I believe resolved it in a less hackish manner. I was attempting to attach an array of settings via wp_localize_script, where the array was constructed with repeated calls to array_push( $array, $value ), so the array was, if var_dump'd, like { [0] => { "stuff" }, [1] => { "etc" } }, and then on a line all by his poor little lonesome after the var'd object of the settings in the little <script> tag printed by wp_localize_script was "stuff", breaking my script. Same problem. So, what I did was simply specify the indices of the array with the values of the array (definitely hackish), and wp_localize_script didn't append stuff after the var'd settings, which were happily now including that first setting, stuff. So, the error-apparent is that wp_localize_script mishandles data passed to it whose index is 0; I haven't the foggiest why, but there's an empirically unfounded yet functional answer for you.

share|improve this answer
I edited your answer to remove your signature. This is expressly prohibited in the wpse FAQ. –  m0r7if3r Apr 29 '12 at 22:41

Your Answer


