Необходимо отобразить несколько массивов изображений JSON, но только один

Так что это должна быть итерационная вещь, которую я не получаю! У меня есть цикл for в моем файле шаблона, который отображает несколько слайд-шоу cycle2:

<?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 } ?>

Теперь изначально у меня было это, работая над mouseenter, поэтому он сделал это для каждого.image в цикле for. Теперь я возился с ним, чтобы загрузить все изображения на готовые. Это то, что у меня есть до сих пор, но оно загружает только первый массив изображений для каждого экземпляра слайд-шоу цикла2.

$( 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 пробовал все виды с этой строкой:

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

Подобно использованию.children и img: eq (0), однако вышеописанное лучше всего работает с правильными параметрами размера изображения.

Но как итератировать, чтобы каждый экземпляр цикла2 отображал собственный массив json?

Любая помощь очень ценится.

EDIT для пояснения на ответе ниже, чтобы узнать, помогает ли это:

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));
}