Question

我正在使用fotorama来显示某些博客文章的图像。加载服务器端时，它工作正常，但是，我想使用AJAX进行动态加载以加载博客帖子-这是我遇到的问题。

这是一个Laravel项目。

我对此问题进行了研究，发现很多人建议在AJAX的成功功能中初始化fotorama：

$（'。fotorama'）。fotorama（）;

在Stackowerflow的以下两个问题上可以看到： Initialize fotorama with images loaded by JSON/ajax 和：fotorama how to work with ajax

但是，这不适用于我，而是在控制台中出现以下错误：

TypeError：$（...）。fotorama不是函数

script.js

jQuery(document).ready(function () {
    $.ajaxSetup({
        headers: { 'X-CSRF-TOKEN': $('meta[name=_token]').attr('content') }
    });

    var pageNumber = 1;

    $.ajax({
        type: 'GET',
        url: "/posts?page=" + pageNumber,
        success: function (data) {
            pageNumber += 1; // To be implemented...
            $('#posts-container').append(data.html);
            $('.fotorama').fotorama(); 
        }, error: function (data) {

        }
    });

});

最终会调用此控制器方法：

public function getPosts(Request $request)
    {
        $posts = Blog::with('images', 'skill')->orderBy('created_at', 'DESC')->limit(4)->get();

        if ($request->ajax()) {
           $view = view('load.posts-load', compact('posts'))->render();
           return response()->json(['html'=>$view]);
        }
    }

和帖子加载包含：

@foreach($posts as $post)
    <div class="blog-post-container">
        <a href="/posts/{{ $post->slug }}">
            <h2 class="blog-title">{{ $post->title }}</h2>
        </a>
        <span class="date">{{ date('d. M Y', strtotime($post->created_at)) }}</span>
        <span class="skill" style="background-color:{{ $post->skill->color }};">{{ $post->skill->title }}</span>
        <div class="blog-text">{!! $post->text !!}</div>
        <div class="fotorama-container">
            <div class="fotorama" data-nav="thumbs" data-auto="false">
                @foreach($post->images as $image)
                    <img src="{{ Storage::url("{$image->filename}") }}" alt="{{ $image->filename }}" />
                @endforeach
            </div>
        </div>
    </div>
    <hr class="blog-horizontal-ruler"/>
@endforeach

这是我在app.blade.php中加载脚本的顺序：

    <script src="{{ asset('js/jquery-3.3.1.min.js') }}"></script>
    <script src="{{ asset('js/trumbowyg.min.js') }}"></script>
    <script src="{{ asset('js/fotorama.js') }}"></script>
    <script src="{{ asset('js/app.js') }}"></script>
    <script src="{{ asset('js/script.js') }}"></script>

我希望fotorama能够被初始化，但是它不起作用。有人可以在这里解释我在做什么错吗？

在AJAX调用中手动初始化fotorama不起作用

0 个答案: