Yii2 Afficher l'image en pop-up Cliquez sur l'image

Question

J'ai un gridview qui montre une vignette de l'image qui a été enregistrée dans mysql.J'ai besoin de montrer les images comme popup quand il a cliqué.

est la vue de mon gridview dans index.php

et c'est le code [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(); 
});'); 
?> 

Comment puis-je afficher cette image en popup quand ceux- cliqué?

Merci

Answer 1

Vous pouvez utiliser le plugin jQuery comme celui-ci: http://dimsemenov.com/plugins/magnific-popup/

Il est très facile à installer (http://dimsemenov.com/plugins/magnific-popup/documentation.html)

Ajouter les ressources Plugin

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

puis ajouter ce morceau de code

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

Espérons que cela vous sera utile!

Answer 2

Vous pouvez simplement utiliser n'importe quel plugin de boîte modale (par exemple http://fancybox.net/, https://github.com/newerton/yii2-fancybox-3) et initialiser par nom de classe.

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