skeeks / yii2-widget-nanogallery
jQuery 图像画廊
1.0.0
2022-11-11 11:25 UTC
Requires
- yiisoft/yii2: ^2
This package is auto-updated.
Last update: 2024-09-05 14:07:38 UTC
README
nanoGALLERY 是一个支持触摸和完全响应式的图像画廊,具有对齐、级联和网格布局。它支持自托管图像,并可以导入 Flickr、Google Photos 和 Google+ 照片专辑。
安装
安装此扩展的首选方式是通过 composer。
运行
php composer.phar require --prefer-dist skeeks/yii2-widget-nanogallery "^0.0.1"
或者添加
"skeeks/yii2-widget-nanogallery": "^0.0.1"
使用方法
<?= \skeeks\yii2\nanogalleryWidget\NanogalleryWidget::widget([ 'items' => [ [ 'src' => 'https://images.wallpaperscraft.ru/image/leopard_hischnik_morda_oskal_agressiya_58086_1280x720.jpg', 'preview_src' => 'https://images.wallpaperscraft.ru/image/leopard_hischnik_morda_oskal_agressiya_58086_1280x720.jpg', 'title' => 'title', 'description' => 'description', ], [ 'src' => 'https://s1.1zoom.ru/b5050/261/348938-sepik_2048x1152.jpg', 'preview_src' => 'https://s1.1zoom.ru/b5050/261/348938-sepik_2048x1152.jpg', 'title' => 'title', 'description' => 'description', ], [ 'src' => 'https://s1.1zoom.ru/big3/297/Canada_Mountains_Scenery_488936.jpg', 'preview_src' => 'https://s1.1zoom.ru/big3/297/Canada_Mountains_Scenery_488936.jpg', 'title' => 'title', 'description' => 'description', ] ], 'clientOptions' => [ 'thumbnailHeight' => 500 //all options see http://nanogallery.brisbois.fr/ ], ]); ?>
SkeekS CMS 的使用方法
<? $tree = \skeeks\cms\models\CmsTree::findOne(10); $images = $tree->images; $items = \yii\helpers\ArrayHelper::map($images, "id", function (\skeeks\cms\models\StorageFile $model) { return [ 'src' => $model->src, 'preview_src' => \Yii::$app->imaging->thumbnailUrlOnRequest($model->src, new \skeeks\cms\components\imaging\filters\Thumbnail([ 'h' => 350, 'w' => 0, ]) ), 'description' => $model->name, 'title' => $model->name, ]; }); ?> <?= \skeeks\yii2\nanogalleryWidget\NanogalleryWidget::widget([ 'items' => $items, 'clientOptions' => [ 'thumbnailHeight' => 200 //all options see http://nanogallery.brisbois.fr/ ], ]); ?>
视频
链接
SkeekS CMS (Yii2) — 快速、简单、有效!
skeeks.com | cms.skeeks.com