集成lightbox2库-Symfony5全面开发

您需要登录后才可观看此视频

为了更好的为您提供服务,请您登录后再查看本课程。

立即登录 注册账号

我们来搜索lightbox,打开第二个页面,这里是lightbox2的案例。第一种是对单独的图片进行大图的显示,第二种是对图片的合集进行大图的显示。我们往下看,我们需要安装一下lightbox2JS库。

回到项目,打开控制台,我们使用yarn命令来安装。yarn add lightbox2 --dev,安装完成后,我们需要在资源文件中引入lightbox2库。

回到项目,打开app.js文件,在js文件最上方,我们使用import关键字引入lightbox2。然后在app.scss文件中,我们使用@import关键字来引入lightbox2样式文件,现在提示构建成功了。

回到浏览器,我们继续查看文档,对于单个图片我们可以使用这里的代码,对于图片集合,我们需要使用下面的代码。因为我们不限制图片上传的数量,所以我们要使用图片集合的代码。

回到项目,我们打开模板文件macro.html.twig。在for循环中我们粘贴代码,首先a链接它要指向图片的原地址,然后是lightbox的名称,这里我们可以使用评论的id作为名称。修改代码,指向file.pathdata-lightbox属性,我们使用comment.id作为名称。将缩略图添加到a标签中间,结束一下a标签,调整一下格式。

#templates/marco.html.twig

{% macro show_comments(comment, post) %}
    {% import _self as macro %}
    <div class="media mb-4">
        <img class="d-flex mr-3 rounded-circle" src="http://placehold.it/50x50" alt="">
        <div class="media-body">
            <h5 class="mt-0">{{ comment.author }}</h5>
            {{ comment.message }}

            <div>
                {% for file in comment.files %}
                    <a href="{{ asset(file.path) }}" data-lightbox="{{ comment.id }}">
                        <img src="{{ asset(file.path)|imagine_filter('my_thumb') }}" alt="{{ file.originName }}"
                             class="img-thumbnail">
                    </a>
                {% endfor %}
            </div>

            <button class="btn btn-sm btn-link js-reply-comment-btn" data-post-id="{{ post.id }}"
                    data-parent-id="{{ comment.id }}">回复
            </button>
            {% for childComment in comment.children %}
                {{ macro.show_comments(childComment, post) }}
            {% endfor %}
        </div>
    </div>
{% endmacro %}

回到浏览器,我们刷新详情页,点击缩略图,现在缩略图就按照我们预期的样式进行了显示。我们调整一下评论列表的显示,添加一个换行,可以使用div标签,对缩略图进行一下包裹。

刷新现在就可以了,我们打开管理端,点击评论列表。我们看最后一页,我们评论的图片并没有显示,我们需要在列表上显示一下评论的图片,另外还需要调整一下id的显示顺序。在下节课我们来修改管理端的代码。

课程讨论

当前内容评论功能已关闭。