ch-15.md

第十五章 桌面幻灯片

参考网页：

• https://github.com/EvgeniyRRU/yii2-slick

安装

composer require "evgeniyrru/yii2-slick" "*"

使用

在./frontend/views/site/index.php输入如下内容，

<?php

use evgeniyrru\yii2slick\Slick;
use yii\web\JsExpression;
use yii\helpers\Html;

?>

Something html here

<?=Slick::widget([

        // HTML tag for container. Div is default.
        'itemContainer' => 'div',

        // HTML attributes for widget container
        'containerOptions' => ['class' => 'container'],

        // Items for carousel. Empty array not allowed, exception will be throw, if empty 
        'items' => [
            Html::img('./images/cat_001.png'),
            Html::img('./images/cat_002.png'),
            Html::img('./images/cat_003.png'),
            Html::img('./images/cat_004.png'),
        ],

        // HTML attribute for every carousel item
        'itemOptions' => ['class' => 'cat-image'],

        // settings for js plugin
        // @see http://kenwheeler.github.io/slick/#settings
        'clientOptions' => [
            'autoplay' => true,
            'dots'     => true,
            // note, that for params passing function you should use JsExpression object
            'onAfterChange' => new JsExpression('function() {console.log("The cat has shown")}'),
        ],

    ]); ?>

其中./images/cat_001.png等文件位于./frontend/web/下，也即./frontend/web/images/cat_001.png。

安装

参考网页：

• https://github.com/himiklab/yii2-easy-thumbnail-image-helper

composer require "himiklab/yii2-easy-thumbnail-image-helper" "*"

修改./common/config/main.php

'components' => [
    'thumbnail' => [
        'class' => 'himiklab\thumbnail\EasyThumbnail',
        'cacheAlias' => 'assets/gallery_thumbnails',
    ],
],

和

'bootstrap' => ['log', 'thumbnail'],

使用

use himiklab\thumbnail\EasyThumbnailImage;

echo EasyThumbnailImage::thumbnailImg(
    $model->pictureFile,//string, file name
    50,
    50,
    EasyThumbnailImage::THUMBNAIL_OUTBOUND,
    ['alt' => $model->pictureName]// string text.
);