Nächste und vorherige Variablen in Laravel-Ansicht mit foreach erhalten

Question

Ich möchte eine Lightbox-ähnliche Galerie mit Bootstrap-Modals in meiner Laravel-Ansicht implementieren.

Ich habe eine Ansicht, die alle Beiträge (Archiv) zeigt paginiert von 10 und eine Schaltfläche, um jeden Beitrag auf Modal zu öffnen. Was ich erreichen möchte, ist mit zwei Schaltflächen auf meinem Popup-Modal, die durch meine Beiträge durchlaufen können. Ich habe auch die jquery Funktion bereit. Ich weiß einfach nicht, wie man mit der foreach-Schleife die vorherigen und nächsten Bilder bekommt.

@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 

Wie Sie sehen können, habe ich zwei undefinierte Variablen $prev and $next. Das sind die Variablen, die ich richtig definieren muss, um den Link der vorherigen und nächsten Bildquelle zu erhalten. Vielen Dank im Voraus!

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>