2017-01-02 11 views
0

私はすべてのイメージを表示するためにブートストラップモーダルを使用していますが、私のlaravel 5.3プロジェクトには1つのイメージしか表示されません。このコードの下に修正する方法はわかりません。コードの最後に@endforeachを使用すると、最後の画像のみが表示されます。は複数のイメージが正しく表示されないlaravel 5.3

<div class="col-lg-12"> 
@foreach($prizebond_images as $prizebond_image) 
    <div class="col-lg-4">         
     {!! Html::image('images/'.$prizebond_image->prizebond_image,'a picture',['class'=>'img-thumbnail img-responsive','data-target'=>"#myModal",'data-toggle'=>'modal']) !!} 
     <p class="text-success">{{$prizebond_image->prizebond_image_rank}}</p> 
    </div> 
@endforeach 

</div> 
<!-- Modal --> 

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
        <span aria-hidden="true">&times;</span> 
       </button> 
       <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
      </div> 
      <div class="modal-body" width="auto" height="auto"> 
       {!! Html::image('images/'.$prizebond_image->prizebond_image,'a picture',['class'=>'img-thumbnail img-responsive']) !!} 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> 
       <button type="button" class="btn btn-primary">Save changes</button> 
      </div> 
     </div> 
    </div> 
</div> 

答えて

1

ループ内にモーダルウィンドウコードを配置する必要があります。また、モーダルとリンクごとにユニークIDを作成するには、the loop variableを使用する必要があります。例:

@foreach($prizebond_images as $prizebond_image) 
    ....  
    {!! Html::image(.... 'data-target' => "#myModal".$loop->index, 'data-toggle'.... 
    .... 
    <!-- Modal --> 
    <div class="modal fade" id="myModal{{ $loop->index }}" tabindex="-1".... 
    .... 
@endforeach 
+1

ありがとうございます。 –

関連する問題