我想让图像在点击时弹出。这就像默认尺寸的更大预览,而无需移动到另一个页面。我有一个可以在 PHP 上运行的 jQuery,但由于这是 yii2,所以我陷入了困境。
这是 jQuery:
<script>
jQuery(window).load(function() {
$x = $(window).width();
if($x > 1024)
{
jQuery("#content .row").preloader(); }
jQuery('.magnifier').touchTouch();
jQuery('.spinner').animate({'opacity':0},1000,'easeOutCubic',function (){jQuery(this).css('display','none')});
});
</script>
我想在此 View 中实现该 jQuery:
<?php
use yii\helpers\Html;
use yii\grid\GridView;
use yii\bootstrap\Modal;
use frontend\models\PengurusAktif;
use frontend\models\ProfilBem;
/* @var $this yii\web\View */
/* @var $searchModel frontend\models\AlbumBemSearch */
/* @var $dataProvider yii\data\ActiveDataProvider */
$this->title = 'Album Bem';
?>
<div id='content' class="album-bem-index well">
<?php
$tahun = PengurusAktif::find()->one();
$idprofil = ProfilBem::find()->where(['tahun' => $tahun->tahun_aktif])->one();
?>
<?= Html::a('Visi Misi', ['/bem/visimisi', 'id' => $tahun->tahun_aktif], ['class' => 'btn btn-primary']) ?>
<?= Html::a('Struktur Organisasi', ['profil-bem/profilebem', 'id' => $idprofil->id_profil_bem], ['class' => 'btn btn-primary']) ?>
<?= Html::a('Pengumuman BEM', ['/pengumuman/pengumumanbem'], ['class' => 'btn btn-primary']) ?>
<?= Html::a('Event Bem', ['/event/eventbem'], ['class' => 'btn btn-primary']) ?>
<?php
if (Yii::$app->user->can('sekretarisBem')) {
echo Html::a('Forum BPH BEM', ['/forum/forumbem'], ['class' => 'btn btn-primary']);
}
?>
<?= Html::a('Poling BEM', ['/bem/pollingbem'], ['class' => 'btn btn-primary']) ?>
<?= Html::a('Album BEM', ['/album-bem/index'], ['class' => 'btn btn-primary']) ?>
<h2><?= Html::encode($this->title) ?></h2>
<hr/>
<?php // echo $this->render('_search', ['model' => $searchModel]); ?>
<p>
<?php
if (Yii::$app->user->can('sekretarisBem')) {
echo Html::button('Create Album Bem', ['value' => yii\helpers\Url::to(['create']), 'class' => 'btn btn-success', 'id' => 'modalButton']);
Modal::begin([
'id' => 'modal',
'size' => 'modal-lg',
]);
echo "<div id='modalContent'></div>";
Modal::end();
}
?>
</p>
<?php
foreach ($dataProvider as $dataAlbum) {
echo $dataAlbum->judul . "<br>";
echo $dataAlbum->kegiatan . "<br>";
?>
<div class="row">
<?php
if ($dataAlbum->foto1 != NULL) {
?>
<div class="col-lg-3 col-md-4 col-xs-6">
<a class="thumbnail magnifier" href="<?= Yii::$app->request->baseUrl ?>/Upload/imagesBemAlbum/foto/<?= $dataAlbum->foto1; ?>">
<img src="<?= Yii::$app->request->baseUrl ?>/Upload/imagesBemAlbum/foto/<?= $dataAlbum->foto1; ?>" width="150px" height="200px">
</a>
</div>
<?php
}
if ($dataAlbum->foto2 != NULL) {
?>
<div class="col-lg-3 col-md-4 col-xs-6">
<a class="thumbnail" href="#">
<img src="<?= Yii::$app->request->baseUrl ?>/Upload/imagesBemAlbum/foto/<?= $dataAlbum->foto2; ?>" width="150px" height="200px">
</a>
</div>
<?php
}
if ($dataAlbum->foto3 != NULL) {
?>
<div class="col-lg-3 col-md-4 col-xs-6">
<a class="thumbnail" href="#">
<img src="<?= Yii::$app->request->baseUrl ?>/Upload/imagesBemAlbum/foto/<?= $dataAlbum->foto3; ?>" width="150px" height="200px">
</a>
</div>
<?php
}
if ($dataAlbum->foto4 != NULL) {
?>
<div class="col-lg-3 col-md-4 col-xs-6">
<a class="thumbnail" href="#">
<img src="<?= Yii::$app->request->baseUrl ?>/Upload/imagesBemAlbum/foto/<?= $dataAlbum->foto4; ?>" width="150px" height="200px">
</a>
</div>
<?php
}
if ($dataAlbum->foto5 != NULL) {
?>
<div class="col-lg-3 col-md-4 col-xs-6">
<a class="thumbnail" href="#">
<img src="<?= Yii::$app->request->baseUrl ?>/Upload/imagesBemAlbum/foto/<?= $dataAlbum->foto5; ?>" width="150px" height="200px">
</a>
</div>
<?php
}
?>
<br><br>
</div>
<?php
if (Yii::$app->user->can('sekretarisBem')) {
echo Html::a('Update', ['update', 'id' => $dataAlbum->id_album_bem], ['class' => 'btn btn-primary']);
echo Html::a('Delete', ['delete', 'id' => $dataAlbum->id_album_bem], [
'class' => 'btn btn-danger',
'data' => [
'confirm' => 'Are you sure you want to delete this item?',
'method' => 'post',
],
]);
}
?>
<?php
}
?>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</div>
有人可以帮我解决这个问题吗?如果您需要更多代码,请直接说。
最佳答案
如果你想插入jquery代码来查看文件,请使用registeJS方法http://www.yiiframework.com/doc-2.0/yii-web-view.html#registerJs()-detail
使用 AssetBundle 注册脚本文件也是一个好习惯。
删除<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
从 View 中使用\yii\web\JqueryAsset::register($this);
\yii\bootstrap\BootstrapPluginAsset::register($this);在 View 顶部
关于javascript - 如何在 yii2 中使用 php jquery?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30817259/