View multiple image using bootstrap modal in laravel 5.0

I'm having trouble for almost 3 days now with the code I have .I'm hoping that somebody could help me give any idea or right solution here. what i want is upon clicking the view info button, it should display all the images in the modal but in my code, only one image has been displayed.In my javascipt code, i dont have any more idea how to loop inside the script even if i've tried few ways.

Database table 1

Transaction

tran_id -> title

value

1-allownce

2-food

3-tuition fee

Database table 2

Image

image_id -> tran_id -> image_title

value

1-1-receipt.png

2-1-receipt2.png

3-1-receipt3.png

4-1-receipt4.png

5-2-receipt.png

6-2-receipt2.png

7-2-receipt3.png

8-3-receipt.png

9-3-receipt2.png

This is the modal Output Image

controller

    public function index()
{

    $trans = Transaction::with('listImage')->get();

    return view('pages.test',compact('trans'));
}

Relationship

public function listImage(){
    return $this->hasMany('App\Image','tran_id','tran_id');
}

Table list

<div class="box-body table-responsive no-padding">
<table class="table table-bordered">
    <tr>
        <th>title Name</th>
        <th>View</th>
    </tr>
    @foreach($trans as $tran)
    <tr>
       <td>{!! $tran->title !!}</td>
       <td><a class="btn" href="#" data-image-id="" data-toggle="modal" data-title="{!! $tran->title !!}" @foreach($tran['listImage'] as $image) data-image="../Transaction/{!! $image->tran_file !!}" @endforeach data-target="#image-gallery"><button>View Info</button></a></td>  
    </tr>   
   @endforeach
</table>

here the modal code to display image

<script type="text/javascript">
$(document).ready(function(){
    loadGallery(true, 'a.btn');
    function loadGallery(setIDs, setClickAttr){
        var current_image,
        selector,
        counter = 0;
        function updateGallery(selector) {
            var $sel = selector;
            var thisImage = $(this).data('image');
            current_image = $sel.data('image-id');
            $('#image-gallery-caption').text($sel.data('caption'));
            $('#image-gallery-title').text($sel.data('title'));
            $('#image-gallery-image').attr('src', $sel.data('image'));
            disableButtons(counter, $sel.data('image-id'));
    }

    if(setIDs == true){
        $('[data-image-id]').each(function(){
            counter++;
            $(this).attr('data-image-id',counter);
        });
    }
    $(setClickAttr).on('click',function(){
        updateGallery($(this));
    });
}

});

via Chebli Mohamed