Get next and previous variables in Laravel view using foreach - php

Question

I want to implement a lightbox-like gallery using bootstrap modals in my Laravel view.
I have a view that shows all posts(archive) paginated by 10 and a button to open each post on modal. What I want to achieve is having two buttons on my popup modal that can loop through my posts. I also have the jquery functionallity ready. I just dont know how to get prev and next images with foreach loop.
#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>
View
Open
<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
As you can see I have two undefined variables $prev and $next. Those are the vars I need to define correctly to get the link of the previous and next post image source.
Thanks in advance!

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