jquery圖片幻燈片不從頭開始

我是Jquery和Javascript的新手。我已經使用下面的代碼在一個燈箱中顯示圖像jquery圖片幻燈片不從頭開始

<script type="text/javascript" src="<?php echo Yii::app()->theme->baseUrl; ?>/js/jquery.lightbox-0.5.js"></script> 
<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->theme->baseUrl; ?>/css/jquery.lightbox-0.5.css" media="screen" /> 
<script type="text/javascript"> 
    $(function() { 
     $('#album1 a').lightBox(); 
     $('#album2 a').lightBox(); 


    }); 
</script>

以下是使用上述腳本顯示圖像的PHP代碼。

 <div class="image-zoom" rel="lightbox" id="gallery"> 
      <div id="album1" style="margin-right:18px;" rel="lightbox"> 
       <?php 
       if (isset($albums[0])) { 
        $i = 1; 
        foreach ($albums[0]['photos'] as $photo) { 
         if ($i == 1) { 
          ?> 
          <a href="<?= $photo ?>" rel="lightbox"> 
           <img src="<?= $photo ?>" width="214" height="160" /> 
          </a> 
          <?php 
         } else { 
          ?> 
          <a href="<?= $photo ?>" rel="lightbox"></a> 
          <?php 
         } 
         $i++; 
        } 
       ?> 
       <div class="zoom-magnifier" id="gallery"> 
          <a href="<?= $photo ?>" rel="lightbox"> 
        <img src="<?php echo Yii::app()->theme->baseUrl; ?>/images/zoom-icon.png" id="zoom"/> 
       </a> 
        <div id="more-text" align="left" ><?=$albums[0]['title']?></div> 
       </div> 
       <?php 
       } 
       ?> 
      </div> 
      <div id="album2" rel="lightbox"> 
       <?php 
       foreach (array(1, 0) as $album_id) { 
        if (isset($albums[$album_id])) { 
         $i = 1; 
         foreach ($albums[$album_id]['photos'] as $photo) { 
          if ($i == 1) { 
           ?> 
           <a href="<?= $photo ?>" rel="lightbox"> 
            <img src="<?= $photo ?>" width="214" height="160" /> 
           </a> 
           <?php 
          } else { 
           ?> 
           <a href="<?= $photo ?>" rel="lightbox"></a> 
           <?php 
          } 
          $i++; 
         } 
         ?> 
         <div class="zoom-magnifier"> 
         <a href="<?= $photo ?>" rel="lightbox"> 
      <img src="<?php echo Yii::app()->theme->baseUrl; ?>/images/zoom-icon.png" id="zoom1"/> 
      </a> 
          <div id="more-text2" class="more-txt-link"><?=$albums[$album_id]['title']?></div> 
         </div> 
         <?php 
         break; 
        } 
       } 
       ?> 
      </div> 
     </div>

這會在圖像內生成放大鏡圖像。當我點擊圖片時，lightbox將圖片從1滑動到6。但是當我點擊放大鏡（zoom-icon.png）時。燈箱從最後一個圖像開始滑動。如何使它從圖像1.

來源

2013-09-23 user2770039

爲什麼downvoted .. – user2770039

開始嘗試

<div class="image-zoom" rel="lightbox" id="gallery"> 
     <div id="album1" style="margin-right:18px;" rel="lightbox"> 
      <?php 
      if (isset($albums[0])) { 
       $i = 1; 
       foreach ($albums[0]['photos'] as $photo) { 
        if ($i == 1) { 
         ?> 
         <a href="<?= $photo ?>" rel="lightbox"> 
          <img src="<?= $photo ?>" width="214" height="160" /> 
         </a> 
         <div class="zoom-magnifier" id="gallery"> 
          <a href="<?= $photo ?>" rel="lightbox"> 
           <img src="<?php echo Yii::app()->theme->baseUrl; ?>/images/zoom-icon.png" id="zoom"/> 
          </a> 
          <div id="more-text" align="left" ><?=$albums[0]['title']?></div> 
         </div> 
         <?php 
        } else { 
         ?> 
         <a href="<?= $photo ?>" rel="lightbox"></a> 
         <?php 
        } 
        $i++; 
       }    
      } 
      ?> 
     </div> 
     <div id="album2" rel="lightbox"> 
      <?php 
      foreach (array(1, 0) as $album_id) { 
       if (isset($albums[$album_id])) { 
        $i = 1; 
        foreach ($albums[$album_id]['photos'] as $photo) { 
         if ($i == 1) { 
          ?> 
          <a href="<?= $photo ?>" rel="lightbox"> 
           <img src="<?= $photo ?>" width="214" height="160" /> 
          </a> 
          <div class="zoom-magnifier"> 
           <a href="<?= $photo ?>" rel="lightbox"> 
            <img src="<?php echo Yii::app()->theme->baseUrl; ?>/images/zoom-icon.png" id="zoom1"/> 
           </a> 
           <div id="more-text2" class="more-txt-link"><?=$albums[$album_id]['title']?></div> 
          </div> 
          <?php 
         } else { 
          ?> 
          <a href="<?= $photo ?>" rel="lightbox"></a> 
          <?php 
         } 
         $i++; 
        }       
        break; 
       } 
      } 
      ?> 
     </div> 
    </div>

來源

2013-09-23 07:00:33

我嘗試了上面的代碼。問題是第一個圖像重複兩次。 – user2770039

jquery圖片幻燈片不從頭開始

回答

相關問題