1
我有一个PHP和一个jQuery脚本,我用它来显示一些图像。左侧有大图片,右侧有4张缩略图。每次用户点击图片缩略图时,它都会显示在左侧的大图片占位符上。foreach循环和jQuery
这是我使用以显示大的图像和缩略图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上查看此设置的外观。
你是对的,使用你的代码我得到了标题显示,但描述仍然不显示。 –
我刚刚注意到,在你的HTML中,'description'被拼写为'descripton'。将更新我的答案。 – Blazemonger