Yii2画像をポップアップ表示する画像をクリックする

Question

私は、mysqlに保存された画像のサムネイルを表示するグリッドビューを持っています。クリックしたときに画像をポップアップ表示する必要があります。

これはindex.phpの

の私のGridViewの観点であり、これはコードである[UPDATE]それはだとき、私はポップアップとしてその画像を表示することができますどのように

<?php 
<div class="license-index"> 

<h1><?= Html::encode($this->title) ?></h1> 
<?php // echo $this->render('_search', ['model' => $searchModel]); ?> 

<p> 
    <?= Html::a('Create License', ['create'], ['class' => 'btn btn-success']) ?> 
</p> 

<?= 
GridView::widget([ 
    'filterModel' => $searchModel, 
    'dataProvider' => $dataProvider, 
    'pjax' => true, 
    'pjaxSettings' => [ 
     'neverTimeout' => true, 
     'options' => [ 
      'id' => '-pjax', 
      'enableReplaceState' => false, 
      'enablePushState' => false, 
     ], 
    ], 
    'columns' => [ 
     ['class' => 'yii\grid\SerialColumn', 
      'header' => 'No', 
      'options' => [ 
       'width' => '10px', 
      ], 
     ], 
     'company', 
     'address', 
     [ 
      'attribute' => 'bukti', 
      'value' => function ($data) { 
       return Html::a(Html::img(Yii::getAlias('@web') . '/file/' . $data->bukti, ['alt' => 'some', 'class' => 'fancy-box', 'height' => '100px', 'width' => '100px']), ['site/zoom']); 
    }, 
    'format' => ['raw'], 
     ], 
     ['class' => 'yii\grid\ActionColumn'], 
    ], 
]); 
?> 
</div> 
<?php 
$this->registerJs('jQuery(document).ready(function(){ 
jQuery("a.fancy-box").fancybox(); 
});'); 
?> 

クリックした？あなたはこの1つのようなjQueryプラグインを使用することができます

おかげ

Answer 1

： http://dimsemenov.com/plugins/magnific-popup/

それはセットアップ（http://dimsemenov.com/plugins/magnific-popup/documentation.html）には非常に簡単です

<link rel="stylesheet" href="magnific-popup/magnific-popup.css"> 
<script src="magnific-popup/jquery.magnific-popup.js"></script> 

プラグインのリソースを追加し、その後追加このコード部分

$(document).ready(function() { 
    $('.thing').magnificPopup({type:'image'}); 
}); 

希望があれば助かります！

Answer 2

任意のモーダルボックスプラグイン（たとえばhttp://fancybox.net/,https://github.com/newerton/yii2-fancybox-3）を使用し、クラス名で初期化するだけで簡単に使用できます。

$this->registerJsFile('modalJs'); 
$this->registerCssFile('modalCss') 

[ 
    'attribute' => 'bukti', 
    'value' => function ($data) { 
       return Html::a(Html::img(Yii::getAlias('@web') . '/file/' . $data->bukti, ['alt' => 'some', 'class' => 'fancy-box', 'height' => '100px', 'width' => '100px']), ['site/zoom']); 
    }, 
    'format' => ['raw'], 
] 

$this->registerJs('jQuery(document).ready(function(){ 
    jQuery("a.fancy-box").fancybox(); 
});')