星之书笔记

上一篇文章写了怎么做附件下载功能，这节讲一下产品相册功能。

一招鲜吃遍天下，用老办法办法来做。插件的优点是灵活多变，不用了卸载或禁用就行，不用修改代码。

在ThinkCMF后台系统在文章编辑页面默认是存在相册的，所以我们只需要将它们显示到网页中就行。

制作ProductsGallery插件

效果图：

目录结构：

products_gallery
  ├─view
  │   ├─ assets
  │   │   ├─ css
  │   │   │   └─products.gallery.css
  │   │   ├─ js
  │   │   │   └─ javacsript.js
  │   │   ├─ owl-carousel
  │   │   │   ├─owl.carousel.min.js
  │   │   │   └─owl.carousel.min.css
  │   │   └─ popup
  │   │        ├─ jquery.magnific-popup.min.js
  │   │        └─ magnific-popup.css
  │   └─widget.html
  └─ProductsGalleryPlugin.php

ProductsGalleryPlugin.php 文件

< php
// +----------------------------------------------------------------------
// | Wien Designs [ WE CAN DO IT MORE SIMPLE ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016-2018 Wien Designs All rights reserved.
// +----------------------------------------------------------------------
// | Author: Dean <oliverwien@yeah.net>
// +----------------------------------------------------------------------
namespace plugins\products_gallery;

use cmf\lib\Plugin;
use app\portal\model\PortalPostModel;
use think\request;

class ProductsGalleryPlugin extends Plugin
{

    public $info = [
        'name' => 'ProductsGallery',
        'title' => '产品相册',
        'description' => '将文章中的相册展现',
        'status' => 1,
        'author' => 'Wien Designs',
        'version' => '1.0',
        'demo_url' => '',
        'author_url' => ''
    ];

    public $hasAdmin = 0;//插件是否有后台管理界面

    // 插件安装
    public function install()
    {
        return true;//安装成功返回true，失败false
    }

    // 插件卸载
    public function uninstall()
    {
        return true;//卸载成功返回true，失败false
    }

    //before_content加载主代码
    public function afterContent($param)
    {
        $config = $this->getConfig();
        $this->assign($config);
        $param = request::instance()->param();

        $portalPostModel = new PortalPostModel();
        $photosObj = $portalPostModel->where(['id' => $param['id']])->find();
        //判断是否存在，优化输出
        if (isset($photosObj['more']['photos'])) {
            $this->assign('photos', $photosObj['more']['photos']);
        } else {
            $this->assign('photos', "");
        }
        echo $this->fetch('widget');

    }

}

widget.html

注：样式与效果建议在products.gallery.css与javascript.js文件中修改。

<!-- 相册 -->
<link rel="stylesheet" href="__PLUGIN_TMPL__/assets/owl-carousel/owl.carousel.min.css">
<link rel="stylesheet" href="__PLUGIN_TMPL__/assets/popup/magnific-popup.css">
<link rel="stylesheet" href="__PLUGIN_TMPL__/assets/css/products.gallery.css">
<if condition="!empty($photos)">
<div class="products-gallery">
    <h3 class="title-h3">相册</h3>
    <div class="gallery-body owl-carousel owl-theme content-slider-with-thumbs mb-15">
        <foreach name="photos" item="vo">
            <div class="photo-item relative">
                <a href="{:cmf_get_image_url($vo['url'])}" title="{$vo.name}" class="popup-img"><img src="{:cmf_get_image_url($vo['url'])}" alt=""></a>
                <div class="photo-number absolute"><span class="current">{$key+1}</span> / <php>echo count($photos);</php> </div>
            </div>
        </foreach>
    </div>
    <div class="content-slider-thumbs-container">
    <div class="gallery-thumb owl-carousel owl-theme content-slider-thumbs">
        <foreach name="photos" item="vo">
            <div class="owl-nav-thumb ">
                <img src="{:cmf_get_image_url($vo['url'])}" alt="">
            </div>
        </foreach>
    </div></div>
</div>
</if>
<script src="__PLUGIN_TMPL__/assets/owl-carousel/owl.carousel.min.js"></script>
<script src="__PLUGIN_TMPL__/assets/popup/jquery.magnific-popup.min.js"></script>
<script src="__PLUGIN_TMPL__/assets/js/javacsript.js"></script>

在这个插件中，采用了2个jquery的插件：

1、owlcarousel2轮播插件，地址：https://github.com/OwlCarousel2/OwlCarousel2/

2、弹出窗magnific-popup插件，地址：http://dimsemenov.com/plugins/magnific-popup/

两个插件的详细与使用方式这里就不详细说了，免得说我水字数，有需要可以参照官方页面。