将图像传递给引导模式

Question

当图像为点击模式时，我尝试创建灯箱将显示具有实际大小的原始图像，同时它可以选择下一张>图片和关闭 模态我怎么能做到这一点。我正在使用 laravel 6。我的代码如下

刀片：

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