Question

我想在Laravel视图中使用bootstrap模式实现类似灯箱的图库。

我有一个视图，显示由10分页的所有帖子（存档）和一个用于打开模态上的每个帖子的按钮。我想要实现的是在我的弹出模式上有两个按钮可以遍历我的帖子。我也准备好了jquery功能。我只是不知道如何使用foreach循环获得prev和next图像。

@extends('index')
@section('title', 'USP Archive')
@section('description', 'Archive of User Submitted Posts')
@section('featured-image', asset('/images/share/usp.jpg'))
@section('content')
<div class="container">
  <div class="row">
    <div class="col-md-12 {{ str_replace('.', '-', Route::currentRouteName()) }}">
      <h1>USP Archive</h1>
      <hr>
      <div class="usp-list-archive">
        @foreach ($userposts as $userpost)
        <h3>Email: {{ $userpost->email }}</h3>
        <br>
        <p>{{ $userpost->fname }} {{ $userpost->lname }}</p>
        <br>
        <img src="{{asset('/images/usp/' . $userpost->image)}}" />
        <br>
        <a href="{{ route('frontend.userposts.show', $userpost->id) }}" class="btn btn-primary btn-sm">View</a>
        <a href="#" class="btn btn-primary btn-sm" role="button" data-toggle="modal" data-target="#uspModal" data-src="{{asset('/images/usp/' . $userpost->image)}}">Open</a>
        <hr>
        @endforeach
        <div class="modal fade" id="uspModal" tabindex="-1" role="dialog" aria-labelledby="uspModal" aria-hidden="true">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-body">
                <img class="modal-image" src="" />
                <button id="prev" data-src="{{ $prev }}" class="btn btn-sm btn-primary" style="position:absolute; top:0; left:0;">PREV</button>
                <button id="next" data-src="{{ $next }}" class="btn btn-sm btn-primary" style="position:absolute; top:0; right:0;">NEXT</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection
@section('scripts')
<script>
$('#uspModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget)
  var imgsrc = button.data('src')
  var modal = $(this)
  modal.find('.modal-image').attr("src",imgsrc);
})
$('#prev').click(function(e) {
  var imgsrc = $(this).data('src')
  var modal = $('#uspModal')
  modal.find('.modal-image').attr("src",imgsrc);
})
$('#next').click(function(e) {
  var imgsrc = $(this).data('src')
  var modal = $('#uspModal')
  modal.find('.modal-image').attr("src",imgsrc);
})
</script>
@endsection

如您所见，我有两个未定义的变量$prev and $next。这些是我需要正确定义的变量来获取上一个和下一个后期图像源的链接。提前谢谢！

Answer 1

 @extends('index')
 @section('title', 'USP Archive')
 @section('description', 'Archive of User Submitted Posts')
 @section('featured-image', asset('/images/share/usp.jpg'))
 @section('content')
<div class="container">
 <div class="row">
  <div class="col-md-12 {{ str_replace('.', '-', Route::currentRouteName()) }}">
  <h1>USP Archive</h1>
  <hr>
  <div class="usp-list-archive">
    @foreach ($userposts as $index => $userpost)
    <h3>Email: {{ $userpost->email }}</h3>
    <br>
    <p>{{ $userpost->fname }} {{ $userpost->lname }}</p>
    <br>
    <img src="{{asset('/images/usp/' . $userpost->image)}}" />
    <br>
    <a href="{{ route('frontend.userposts.show', $userpost->id) }}" class="btn btn-primary btn-sm">View</a>
    <a href="#" class="btn btn-primary btn-sm" role="button" data-toggle="modal" data-target="#uspModal" data-src="{{asset('/images/usp/' . $userpost->image)}}">Open</a>
    <hr>
    @endforeach
    <div class="modal fade" id="uspModal" tabindex="-1" role="dialog" aria-labelledby="uspModal" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-body">
            <img class="modal-image" src="" />
            @if ($prev = $userposts->get($index-1))
              <button id="prev" data-src="{{ $prev }}" class="btn btn-sm btn-primary" style="position:absolute; top:0; left:0;">PREV</button>
            @endif
            @if ($next = $userposts->get($index+1))
              <button id="next" data-src="{{ $next }}" class="btn btn-sm btn-primary" style="position:absolute; top:0; right:0;">NEXT</button>
            @endif
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

使用foreach在Laravel视图中获取下一个和上一个变量

1 个答案: