2015-06-13 42 views
1

我想讓圖像在點擊時彈出。這就像一個更大的默認大小的預覽,而不移動到另一個頁面。我有這個在PHP上工作的jQuery,但是因爲這是yii2,所以我堅持這一點。如何在yii2中使用php jquery?

這裏是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> 

任何人可以幫我這個東西。如果你需要更多的代碼,只需說。

回答

0

如果你想要插入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 \ bootstrap \ BootstrapPluginAsset :: register($ this);在您的視圖頂部

+0

請詳細說明您的答案並提供解釋您的建議。 – Blip

+0

@Evgenii我已經在我的視圖$腳本=頂部加入此代碼<<< JS $ X = 0; jQuery的(窗口).load(函數(){$ X = $(窗口).WIDTH(); \t \t \t 如果($ X> 1024) \t \t {\t \t \t jQuery的( 「#含量.row」)預加載程序();}。\t \t \t \t jQuery的( '放大鏡')touchTouch() ( '微調 '); \t \t jQuery的動畫({' 不透明度 ':0},1000,' easeOutCubic',函數(){jQuery的(本)的CSS( '顯示', '無')}); \t }); JS; \ yii \ web \ JqueryAsset :: register($ script); \ yii \ bootstrap \ BootstrapPluginAsset :: register($ script);但我得到了另一個錯誤:PHP通知 - yii \ base \ ErrorException 未定義變量:x任何建議? –

+0

$ x將被PHP $ x中的變量替換。可能你沒有它,只是逃避它\ $ x –