README

Lightbox2小部件是基于Lightbox的一个定制脚本，该小部件用于在当前页面上叠加图像。

安装

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

运行以下命令：

php composer.phar require coderius/yii2-lightbox2-widget "@dev"

或者将以下内容添加到应用程序的 composer.json 文件的 require 部分中：

"coderius/yii2-lightbox2-widget" : "@dev"

用法

在视图中

use coderius\lightbox2\Lightbox2;

<?= coderius\lightbox2\Lightbox2::widget([
    'clientOptions' => [
        'resizeDuration' => 200,
        'wrapAround' => true,
        
    ]
]); ?>

<a href="<?= Yii::getAlias("@img-web-blog-posts/1/middle/pic.jpg"); ?>" data-lightbox="roadtrip" data-title="some title" data-alt="some alt">
    <!-- Thumbnail picture -->
    <?= Html::img("@img-web-blog-posts/pic.jpg"); ?>
</a>

<a href="<?= Yii::getAlias("@img-web-blog-posts/10/middle/pic2.jpg"); ?>" data-lightbox="roadtrip">
    <!-- Thumbnail picture -->
    <?= Html::img("@img-web-blog-posts/pic2.jpg"); ?>
</a>

<a href="<?= Yii::getAlias("@img-web-blog-posts/11/middle/pic3.jpg"); ?>" data-lightbox="roadtrip">
    <!-- Thumbnail picture -->
    <?= Html::img("@img-web-blog-posts/pic3.jpg"); ?>
</a>

您需要将 data-lightbox 属性设置为链接和 href 属性中的图像路径。如果要将图像分组，则将每个所需链接的 data-lightbox 属性设置为相同的名称。

*缩略图图片，点击后会打开小部件

此小部件使用的插件 github 代码库的引用。

coderius / yii2-lightbox2-widget

维护者

详细信息

README

安装

用法