skeeks/yii2-widget-nanogallery

jQuery 图像画廊

1.0.0 2022-11-11 11:25 UTC

This package is auto-updated.

Last update: 2024-09-05 14:07:38 UTC


README

nanoGALLERY 是一个支持触摸和完全响应式的图像画廊,具有对齐、级联和网格布局。它支持自托管图像,并可以导入 Flickr、Google Photos 和 Google+ 照片专辑。

nanogallery.brisbois.fr

nanoGALLERY github

Latest Stable Version Total Downloads

安装

安装此扩展的首选方式是通过 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/
    ],
]); ?>

Animation
Screenshot1 Screenshot1

视频

Video

链接

skeeks!
SkeekS CMS (Yii2) — 快速、简单、有效!
skeeks.com | cms.skeeks.com