Передача изображения в bootrap модальный

Question

я пытаюсь создать лайтбокс, когда изображение кликает. Модальное покажет оригинальное изображение с фактическим размером, и в то же время у него будет возможность следующая> картинка и закрыть модальный, как я могу этого добиться. Я использую laravel 6. Мой код ниже

Blade:

 <div class="row">
            @foreach($group->images as $key=> $img)
            <a href="#myModal" data-toggle="modal" data-gallery="example-gallery" class="col-sm-3" data-img-url="{{asset('storage/'.$img->photo)}}">
                <img src="{{asset('storage/'.$img->photo)}}" class="img-fluid image-control">

            </a>
           @endforeach
        </div>

Модальный

<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body text-center">
                <img class="" src="#"/>
            </div>
            <div class="modal-footer">
                <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            </div>
        </div>
    </div>
</div>

Js

<script>
    $('li a').click(function(e) {
    $('#myModal img').attr('src', $(this).attr('data-img-url')); 
});
</script>

Answer 1

Нет li, используйте div вместо:

<script>
    $('div a').click(function(e) {
        $('#myModal img').attr('src', $(this).attr('data-img-url')); 
    });
</script>