Yii2顯示圖像在彈出點擊圖片

Question

我有一個gridview，顯示已保存到mysql.I圖像的縮略圖，當它單擊時顯示爲彈出圖像。

這是我的GridView的的index.php

的觀點，這是代碼[更新]

<?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(); 
});'); 
?> 

我如何可以顯示圖像彈出時，它的點擊？

感謝

Answer 1

您可以使用jQuery插件，像這樣的： 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(); 
});')