How to load previous or next attachment with jquery ?

Question

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:

<?php $args = array('post_type' => 'attachment', 'post_mime_type' => 'image', 'order'=> 'ASC', 'numberposts' => -1, 'post_status' => null, 'post_parent' => $post->ID ); 
      $attachments = get_posts($args);
  if ($attachments) {
            foreach ( $attachments as $attachment ) {
                 $my_image = wp_get_attachment_image($attachment->ID, large) );
         $attachments_list[] = $my_image;
    }
  }
  reset($attachments_list);
  $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 :

$(document).ready(function(){
    var count = attachments_list.lenght();
    var init = 0;
    var current = init;

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

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

Answer 1

@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 :

array_unshift($attachments_list,"");
wp_enqueue_script('myscript');
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

Answer 2

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.