1

我有一个 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 循环之外添加此代码，则将保持不变。我该如何解决这个问题？

您可以在此网站上查看此设置的外观。

4

1 回答 1

3

您已经将标题和描述添加为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（在你的 foreach 循环之外）：

<div class="container-title-description">
    <p class="title"></p>
    <p class="description"></p>
</div>
于 2013-05-31T16:17:05.190 回答