【发布时间】：2017-09-19 17:28:33
【问题描述】：
我想在我的 Laravel 视图中使用引导模式实现一个类似灯箱的画廊。
我有一个显示所有帖子（存档）以 10 分页的视图和一个用于在模态上打开每个帖子的按钮。我想要实现的是在我的弹出模式上有两个按钮，可以循环浏览我的帖子。我还准备好了 jquery 功能。我只是不知道如何使用 foreach 循环获取上一个和下一个图像。
@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。这些是我需要正确定义以获取上一个和下一个帖子图像源的链接的变量。
提前致谢！
【问题讨论】：
-
在控制器方法上处理分页，并可能返回带有下一个和上一个链接的 json，不要在刀片模板中处理这个，这与查询的分页结果没有什么不同。
标签： php laravel loops foreach blade