README

Bootstrap 图片灯箱插件

基于 Bootstrap 轻量级相册插件 https://github.com/ashleydw/lightbox

安装

安装此扩展的首选方式是通过 composer。

运行以下命令

php composer.phar require --prefer-dist san27079/yii2-bootstrap-lightbox "*"

或者在您的 composer.json 文件的 require 部分添加

"san27079/yii2-bootstrap-lightbox": "*"

到

使用方法

扩展安装完成后，只需在您的代码中通过以下方式使用它

• 创建画廊

<?php echo LightBoxWidget::widget([
        'data' => [
            ['src' => 'https://unsplash.it/1200/768.jpg?image=251', 'thumb' => 'https://unsplash.it/600.jpg?image=251', 'title' => 'Test Gallery',   'width' => 320],
            ['src' => 'https://unsplash.it/1200/768.jpg?image=251', 'thumb' => 'https://unsplash.it/600.jpg?image=251', 'title' => 'Test Gallery',   'width' => 320],
            ['src' => 'https://unsplash.it/1200/768.jpg?image=251', 'thumb' => 'https://unsplash.it/600.jpg?image=251', 'title' => 'Test Gallery',   'width' => 320],
            ['src' => 'https://unsplash.it/1200/768.jpg?image=251', 'thumb' => 'https://unsplash.it/600.jpg?image=251', 'title' => 'Test Gallery'],
            ['src' => 'https://unsplash.it/1200/768.jpg?image=251', 'thumb' => 'https://unsplash.it/600.jpg?image=251', 'title' => 'Test Gallery'],
            ['src' => 'https://www.youtube.com/watch?v=dQw4w9WgXcQ', 'thumb' => 'https://unsplash.it/600.jpg?image=251', 'title' => 'Test Gallery'],
            ['src' => 'https://unsplash.it/1200/768.jpg?image=251', 'thumb' => 'https://unsplash.it/600.jpg?image=251', 'title' => 'Test Gallery'],
        ],
        'options' => [
            'row_class' => 'row custom_row',
            'column_class' => 'col-3',
        ]
    ]); ?>

• 创建一个项目

<?php echo LightBoxWidget::widget([
    'data' => [
        'src' => 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
        'thumb' => 'https://unsplash.it/600.jpg?image=251',
        'title' => 'Test Video',
        'width' => 1280,
        'height' => 720
    ],
    'options' => [
        'src_class' => 'row custom_row',
        'thumb_class' => 'col-3',
    ]
]); ?>

参数

options - 用于自定义插件的参数数组，它包含

• src_class - 源类

• thumb_class - 缩略图类,

画廊参数

• row_class - 画廊包装器类,
• column_class - 项目或列的类

plugin_options - 用于初始化 JS 插件的参数数组，例如

alwaysShowClose, width / height, showArrows 等。