CODEWITHSUNDEEP
phplaravelloopsforeachlaravel-blade
Elias L.
Elias L.

Reputation: 53

Get next and previous variables in Laravel view using foreach

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

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!

Upvotes: 0

Views: 1676

Answers (1)

Ameer Salah Aldeen
Ameer Salah Aldeen

Reputation: 289

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

Upvotes: 1

Related Questions