Need to display multiple json image arrays but only one ever does

Question

So it must be an iteration thing that Im not getting! I have a for loop in my template file which displays multiple cycle2 slideshows:

<?php foreach ($foo as $bar) { ?>

    <div class="image">
        <a href="<?php echo $product['href']; ?>">
            <div class="cycle-slideshow"
                data-cycle-fx=scrollHorz
                data-cycle-timeout=0
                data-cycle-swipe=true
                >
                <div class="cycle-prev"></div>
                <div class="cycle-next"></div>
                <img class="productID_<?php echo $product['product_id']; ?>" src="<?php echo $product['thumb']; ?>" title="Click to see more details on <?php echo $product['name']; ?>" alt="<?php echo $product['name']; ?>" />
            </div>
        </a>
    </div>

<?php } ?>

Now originally I had this working on mouseenter so it did it for each .image in the for loop. Now Im fiddling with it to load all the images on ready. This is what I have so far but it only loads the first array of images for every instance of the cycle2 slideshows.

$( document ).ready(function() {
    var image = $(".cycle-slideshow").find("img:first");
    var classList = image.prop('class').split(/\s+/);
    $.each( classList, function(index, item){
        if( item.indexOf('productID_') > -1 ) {
            product_id = item.replace("productID_","");

            $.ajax({
                url: 'index.php?route=product/product/images',
                type: 'post',
                data: 'product_id='+product_id + '&width='+image.width() + '&height='+image.height(),
                dataType: 'json',
                success: function(json) {
                    if (json['images']) {
                        for (var i = 0; i < json['images'].length; i++) { 
                            image.after('<img src="'+json['images'][i]+'" width="'+image.width()+'" height="'+image.height()+'" alt="'+$(image).prop("alt")+'" />');
                        }

                        image.parent().cycle();
                    }
                }
            });
        }
    });
});

Ive tried all sorts with this line:

var image = $(".cycle-slideshow").find("img:first");

Like using .children and img:eq(0), however the above works best with the image size parameters being brought in correctly.

But how to iterate so each instance of cycle2 lists its own json array?

Any help greatly appreciated.

EDIT for clarification on answer below to see if it helps:

public function images() {
    $json = array();
    if (isset($this->request->post['product_id'])) {
        $this->load->model('catalog/product');
        $product_images = $this->model_catalog_product->getProductImages($this->request->post['product_id']);
        if ($product_images) {                      
            $this->load->model('tool/image');
            foreach ($product_images as $result) {
                if(($result['image'] && file_exists(DIR_IMAGE . $result['image'])) && isset($this->request->post['width']) && isset($this->request->post['height'])){
                    $json['images'][] =  $this->model_tool_image->resize($result['image'], $this->request->post['width'], $this->request->post['height']);
                }
            }
        }
    }   
    $this->response->setOutput(json_encode($json));
}

Answer 1

I think this is what you need:

$(document).ready(function() {
    $(".cycle-slideshow").each(function() {
        var image = $(this).find("img:first");
        // Rest of your code
    });
});

Your code just sets image to the first image in the first slideshow, and never processes the other slideshows.

Other suggestions:

Put the product ID in a data- attribute, so you don't have to extract it from the class.

Use the following syntax in your AJAX call:

data: {
    product_id: product_id,
    width: image.width(),
    height: image.height()
}