Show Specific Array Images in Modal Using Laravel & jQuery AJAX

I need to show specific image from array images, but I can't do it. Below what I've tried!

Array Images

Controller

public function edit($id)
{
    $product = \App\Product::find($id);

    $picts = [];
    foreach (json_decode($product->product_photo) as $picture) {
        $picts[] = $picture->path;
    }

    $pix = [];
    for ($i = 0; $i < count($picts); $i++) {
        $pix[$i] =
            '<input type="hidden" name="photo_id" id="photo_id' . $i . '">
            <div class="array-images-forEdit" style="position:relative;float:left;margin-right:5px;"><button type="submit" style="position:absolute;top:0;left:0;top:2px;left:5px;margin-left:80px;" class="close-forEdit" aria-label="Close"><span>&times;</span></button><a href="javascript:void(0)" data-toggle="tooltip"  data-id="' . $product->id . '"  data-filter="/reference/eureka/storage/app/' . $picts[$i] . '" data-original-title="Edit" class="showModalPhoto" id="showModalPhoto"><img id="myImage" src="/reference/eureka/storage/app/' . $picts[$i] . '" style="height:120px;width:105px;margin-bottom:10px;top:0;right:0;"/></a></div>
            ';
    }
    $pix = implode(' ', $pix);

    $html =
        '
    <div class="row">
    <div class="col-md-12">
    ' . $pix . '
    </div>
    </div> <!-- row-->';

    return response()->json(['html' => $html, 'product' => $product->category]);
}

Array Images Preview

Now, when I click one of image above, it should display specific image in modal. But I can't do it. It show all images. Below the result!

Controller

 public function showPhoto($id)
    {
    $product = \App\Product::find($id);
    $picts = [];
    foreach (json_decode($product->product_photo) as $picture) {
        $picts[] = $picture->path;
    }

    $html = [];
    for ($i = 0; $i < count($picts); $i++) {
        $html[$i] =
            '<div class="row">
        <div class="col-md-4">
        <img src="/reference/eureka/storage/app/' . $picts[$i] . '" style="height:500px;width:465px;margin-bottom:10px;top:0;right:0;"/>
        </div>
     </div>';
    }

    return response()->json(['html' => $html]);
} 

View

$('body').on('click', '#showModalPhoto', function(e) { // .editUser exist in usercontroller.php

        e.preventDefault();
        $('.alert-danger').html('');
        $('.alert-danger').hide();

        id = $(this).data('id');

        $.ajax({
            url: "product/" + id + "/show-photo",
            method: 'GET',
            dataType: 'json',
            success: function(data) {
                $('#dataPhotoElement').html(data.html);

                $('#photo_id').val('');
                $('#productForm').trigger("reset");
                $('#modelHeading').html("Show Photo");
                $('#ajaxModelForPhoto').modal('show');
            }
        });
    });

Modal View

from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/3eGkaeT
via IFTTT