foreach loop и 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, когда основное изображение изменится, заголовок и описание останутся неизменными. Как я могу это решить?

Вы можете посмотреть, как выглядит эта настройка на этом website.

Answer 1

Вы уже добавить название и описание как скрытые title атрибуты внутри элемента якоря, так просто извлечь их и обновить HTML по требованию:

$(".ngg-thumbnail-list a").click(function(){ 
    var src = $(this).attr("href"), 
     desc = $(this).attr('title'), 
     title = $(this).find('img').attr('title'); 
    $(".ngg-galleryoverview-ir .pic img").attr("src", src); 
    $('.container-title-description .title').text(title); 
    $('.container-title-description .description').text(desc); 
    return false; 
}); 

Начальный HTML (за пределами вашего цикла Еогеасп):

<div class="container-title-description"> 
    <p class="title"></p> 
    <p class="description"></p> 
</div>