Di tips berikut kita akan menambahkan jQuery colorbox untuk keperluan menampilkan gambar. Ketika gambar di klik, maka akan muncul pop up di halaman tersebut. Berikut langkah-langkahnya :
1. Buat ColorboxAsset.php di dalam folder Asset
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<?php namespace common\assets; use Yii; use yii\web\AssetBundle; class ColorboxAsset extends AssetBundle { public $sourcePath = '@common/themes/edu/assets/js/colorbox'; public $css = [ 'example1/colorbox.css' ]; public $depends = [ 'yii\web\JqueryAsset' ]; public function init() { parent::init(); $getLang = explode('-',Yii::$app->language); $lang = 'id'; $this->js = [ YII_DEBUG?'jquery.colorbox-min.js':'jquery.colorbox-min.js', "i18n/jquery.colorbox-{$lang}.js", ]; } } |
2. Download jQuery Colorbox dan letakkan di dalam folder js
3. Buka file main.php yang berada di dalam layout dan masukkan ColorboxAsset dan buat script jQuerynya :
|
1 2 3 4 5 6 |
ColorboxAsset::register($this); AppAsset::register($this); $this->registerJs(" $('.lihat').colorbox({iframe:false}); "); |
4. Berikan class ‘lihat’ kepada tag <a> yang berada di dalam view.
|
1 2 3 |
<?php if(!empty($sli->gambar)):?> <a href="<?= Yii::$app->urlManagerFrontEnd->baseUrl.'/slider/'.$sli->gambar;?>" target="_blank" class="btn btn-success btn-sm rounded lihat"><span class="icon"><i class="fa fa-search"></i> </span><strong> Lihat </strong></a> <?php endif;?> |
5. Berhasil. Setelah gambar di klik, maka akan muncul tampilan pop up.