Слайд-шоу JQuery слайд-шоу не начинается с начала

Question

Я новичок в Jquery и Javascript. Я использовал следующий код для отображения изображений в лайтбокс

<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> 

Это создает изображение лупы внутри изображения. Когда я нажимаю на изображение, лайтбокс перемещает изображения с 1 на 6. Но когда я нажимаю на лупу (zoom-icon.png). лайтбокс начинает скользить от последнего, но одного изображения. Как сделать это начать с изображения 1.

Answer 1

Попробуйте

<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>