php - foreach ループと jQuery

Question

いくつかの画像を表示するために使用する PHP と jQuery スクリプトがあります。左側に大きな画像、右側に 4 つのサムネイル。ユーザーが画像サムネイルをクリックするたびに、左側の大きな画像プレースホルダーに表示されます。

これは、大きな画像とサムネイルを表示するために使用している PHP コードです。

<div class="pic"><img title="<?php echo $current->alttext ?>" alt="<?php echo $current->alttext ?>" src="<?php echo $current->imageURL; ?>" />
</div>
<ul class="ngg-gallery-list-ir">
    <!-- Thumbnail list -->
    <?php foreach ( $images as $image ) : ?>
    <?php if ( $image->hidden ) continue; ?> 
    <li id="ngg-image-<?php echo $image->pid ?>" class="ngg-thumbnail-list <?php if ($image->pid == $current->pid) echo 'selected' ?>" >
        <a href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" >
            <img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> />
        </a>
    </li>
    <?php endforeach; ?>

これは、ユーザーがサムネイル画像をクリックしたときに大きな画像を更新するために使用している jQuery です。

jQuery(document).ready(function($){

    // handle the click of thumbnail images
    // redirect it to change the main image
    $(".ngg-thumbnail-list a").click(function(){
        var src = $(this).attr("href");
        $(".ngg-galleryoverview-ir .pic img").attr("src", src);
        return false;
    });

    // preload the large images 
    function preload(arrayOfImages) {
        $(arrayOfImages).each(function(){
            $('<img/>')[0].src = this;
        });
    }
    // populate the list of images to load
    preload(images);
});

このセットアップではすべてが正常に機能しますが、メインの大きな画像の下にタイトルと説明も表示する必要があります。これは私が使用しているコードです:

<div class="container-title-description">
    <div class="title"><?php echo $current->alttext ?></div>
    <div class="descripton"><?php echo $current->caption ?></div>
</div>

問題は次のとおりです。このコードを foreach ループ内に追加すると、各サムネイル画像の下にタイトルと説明が表示されます。メイン画像がタイトルと説明を変更するときに foreach ループの外にこのコードを追加すると、同じままになります。どうすればこれを解決できますか?

このセットアップがどのように見えるかは、このWeb サイトで確認できます。