当前位置 > it书童 > laravel > 正文

laravel 集成 photoswipe 实现图片点击放大及滑动切换

laravel it书童 2019-10-11 08:40:50 0赞 0踩 585阅读 0评论

photoswipe 虽然相关代码挺多的,配置起来也相当繁琐,却是目前能找到的最适合的插件

下载源码

虽然可以用 laravel 的前端工作流将 photoswipe 编译到统一的文件,基于我对此还不是很熟悉,如果全部都编译到 app.js 和 app.css 会导致文件过大,且没必要整站引用,只需在详情页引用这些资源,因此本文以直接下载源码作为演示

到应用的 public 目录下执行:

$ git clone https://github.com/dimsemenov/PhotoSwipe.git

视图文件封装

由于文章视图继承于 app.blade.php , 因此在此模板视图先加上代码位置

<body>
    <script src="{{ mix('js/app.js') }}"></script>
    <!-- 加上代码位置 -->
    @yield('static')
</body>

根据 示例代码 封装共用的 html 与 js

新建视图 layouts/_swipe.blade.php

新建 public/PhotoSwipe/dist/swipe.js

文章具体视图 article.blade.php 引入具体代码:

@section('content')
    <!-- ... -->
    @include('layouts._swipe')
@stop
@section('static')
    <link rel="stylesheet" href="/PhotoSwipe/dist/photoswipe.css">
    <link rel="stylesheet" href="/PhotoSwipe/dist/default-skin/default-skin.css">
    <script src="/PhotoSwipe/dist/photoswipe.min.js"></script>
    <script src="/PhotoSwipe/dist/photoswipe-ui-default.min.js"></script>
    <script src="/PhotoSwipe/dist/swipe.js"></script>
@stop

注意以上代码要引入 layouts._swipe 视图

格式化文章图片内容

在文章模型 Article.php 新增:

    public static function addSwipeSign($content)
    {
        // 获取所有 img 标签
        preg_match_all("/<img[^>]+\>/i", $content, $matches);
        foreach ($matches[0] as $img) {
            // 用 crawler 得到 src
            $crawler = new Crawler($img);
            $src = $crawler->filter('img')->attr('src');
            // 替换成 swipe 格式
            $swipe = <<<EOD
<div class="text-center my-gallery">
<figure itemprop="associatedMedia">
    <a href="{$src}" itemprop="contentUrl" data-size="1218x606">
        <img src="{$src}" itemprop="thumbnail" alt="Image description" />
    </a>
</figure>
</div>
EOD;
            $content = str_replace($img, $swipe, $content);
        }
        return $content;
    }

以上代码将 img 标签替换为符合规范的 html 标签

在获取文章 html 时调用以上方法即可

小结

此插件并非傻白甜直接套用,需要读懂该插件的文档 api 进行自定义,才能让体验变得好

综上,该插件当下只是姑且用之

转载须注明出处:https://www.itshutong.com/articles/343/laravel-integrates-photoswipe-to-realize-picture-click-to-enlarge-and-slide-to-switch
关于我
一个文科出身的程序员,追求做个有趣的人,传播有价值的知识,微信公众号主要分享读书思考心得,不会有代码类文章,非程序员的同学请放心订阅
发表评论
我有句话,不知当讲不当讲?
要讲之前请先 登录