我正在使用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>
而这就是发生的事情
是否可以在一个页面上使用相同的小部件?
或者你能告诉我很酷的小部件显示图像缩略图和导航下一个,上一个和播放?它就像窗户中的图像查看器
最佳答案 只需为每个小部件使用不同的
id
.从上面的代码中,它们都被设置为
'id' => 'custom-id',
请注意,如果未明确设置id,则为automatically generated.