README

Lightbox2小部件是基于Lightbox的自定义脚本。此小部件用于在当前页面上覆盖图片。

安装

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

运行以下命令之一：

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

或者

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

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

使用方法

在视图中

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 存储库的引用。

developer-ashok / yii2-lightbox2-widget

维护者

详细信息

README

安装

使用方法