我有一个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循环外添加此代码,当主图像更改标题时,描述将保持不变。我怎么解决这个问题?
您可以在此website上查看此设置的外观。
答案 0 :(得分: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>