php - 如何在一个页面中两次使用同一个小部件

Question

我正在使用 fotorama 小部件，我想创建一个比较页面。

我划分页面并使用2个小部件来比较图像

我试过修改源码，还是不行

这是源码

<div class="row">
<div class="col-sm-6">
<center>
 <?php 
$fotorama = Fotorama::begin(
    [
        'options' => [
            'height' => '540px',
            'width' => '720px',
            'loop' => true,
            'hash' => true,
            'ratio' => 800/600,
            'transition' => 'dissolve',
            'arrows' => true,
            'nav' => 'thumbs',
            'navposition' => 'bottom',
            'thumbwidth' => 50, // Number. Tumbnail width in pixels.
            'thumbheight' => 50, 
        ],
        'spinner' => [
            'lines' => 20,
        ],
        'tagName' => 'span',
        'useHtmlData' => false,
        'htmlOptions' => [
            'class' => 'custom-class',
            'id' => 'custom-id',
        ],
    ]
);
$id = Yii::$app->request->queryParams['id'];
switch ($id) {
     case '1':
         $folder = "gsmap7";
         break;
     case '2':
         $folder = "ismidx";
         break;     

     default:
         # code...
         break;
 } 

foreach ($dataProvider as $model ) {
    echo "<img src=\"../img/{$folder}/{$model->NAMA_FILE}\" > ";
}   

$fotorama->end(); ?>
</center>
</div><div class="col-sm-6">
<center>
 <?php 
$fotorama2 = Fotorama::begin(
    [
        'options' => [
            'height' => '540px',
            'width' => '720px',
            'loop' => true,
            'hash' => true,
            'ratio' => 800/600,
            'transition' => 'dissolve',
            'arrows' => false,
            'nav' => 'thumbs',
            'navposition' => 'bottom',
            'thumbwidth' => 50, // Number. Tumbnail width in pixels.
            'thumbheight' => 50, 
        ],
        'spinner' => [
            'lines' => 20,
        ],
        'tagName' => 'span',
        'useHtmlData' => false,
        'htmlOptions' => [
            'class' => 'custom-class',
            'id' => 'custom-id',
        ],
    ]
);

switch ($id) {
     case '1':
         $folder = "ismidx";
         break;
     case '2':
         $folder = "";
         break;     

     default:
         # code...
         break;
 } 

foreach ($dataProvider_compare as $model ) {
    echo "<img src=\"../img/{$folder}/{$model->NAMA_FILE}\" > ";
}   

$fotorama2->end(); ?>
</center>
</div>
</div>

原来是这样

是否可以在一个页面上使用相同的小部件？ 或者你能告诉我很酷的小部件正在显示图像缩略图和导航 next 、 prev 和 play 吗？就像 Windows 中的图像查看器一样

Answer 1

只需使用不同的 id对于每个小部件。从您上面的代码中，它们都已设置为

'id' => 'custom-id',

请注意，如果您没有明确设置 id，它将是 automatically generated .