我想让一个图片在我点击它的时候成为一个弹出窗口。它就像是一个更大的默认大小的预览,而不需要移动到另一个页面。我有一个在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>
我想在这个视图中实现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>
有人能帮我吗?如果你需要更多的代码,就说。
1条答案
按热度按时间jk9hmnmh1#
如果你想在视图文件中插入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>
,然后使用\yii\web\JqueryAsset::register($this);\yii\引导程序\引导程序插件资产::注册($this);在视图的顶部