How can I use the same widget twice on the same page

Question

I am using the fotorama widget and I want to create a comparison page.

I split the page and use 2 widgets to compare images

I tried changing the source, but it still does not work.

This is the source code.

<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> 

And here's what happened

Can I use the same widget on the same page or not? Or can you say that a cool widget shows thumbnail images and navigation further, back and play? It looks like a window viewer

Answer 1

Just use a different id for each widget. From your code above they are both set to

 'id' => 'custom-id', 

Please note: if you do not specify id explicitly, this will be automatically generated .