javascript - 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) をクリックすると。ライトボックスは、最後から 2 番目の画像からスライドし始めます。作り方は画像1から。