Yii2 팝업 이미지에서 팝업 이미지 클릭 이미지

Question

나는 mysql에 저장된 이미지의 축소판을 보여주는 gridview가 있습니다. 클릭했을 때 이미지를 팝업으로 표시해야합니다.

이

이 의 index.php

내있는 gridview의 전망이며,이 코드입니다 [업데이트] 그 때 나는 팝업으로 해당 이미지를 표시 할 수 있습니다 어떻게

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

이

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

다음 추가 플러그인의 자원을 추가 설치 (http://dimsemenov.com/plugins/magnific-popup/documentation.html)

매우 쉽게 이 코드 조각

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