我遇到了以下问题。我正在处理一个html/php/js的情况，我有一些带有特定链接类的图像缩略图，所以当它们被点击时，javascript函数会获取图像src并将图像加载到特定的位置。
有没有一种方法可以让我每次都知道当前显示的图像，因为javascript函数Windows不会再次加载页面，它只是替换图像，就像AJAX一样。如果我知道PHP中当前显示的是什么图像，我可以创建一些指向prev($array)和next($array)的链接。
代码如下：
<ul id="<?php echo $gal_id; ?>" class="<?php echo $extraWrapperClass; ?>" style="list-style-type: none;" >
<?php foreach($gallery as $count=>$photo): ?>
<li class="Thumb">
<span class="LinkOuterWrapper">
<span class="LinkWrapper">
<a href="<?php echo $photo->sourceImageFilePath; ?>" class="GalleriaLink Link<?php if($count==0) echo ' LinkSelected'; ?>" style="width:<?php echo $photo->width; ?>px;height:<?php echo $photo->height; ?>px;" title="<?php echo $photo->captionDescription.$photo->downloadLink.$modulePosition; ?>" target="_blank">
<?php if(($gal_singlethumbmode && $count==0) || !$gal_singlethumbmode): ?>
<img class="Img" src="<?php echo $transparent; ?>" style="width:<?php echo $photo->width; ?>px;height:<?php echo $photo->height; ?>px;background-image:url(<?php echo $photo->thumbImageFilePath; ?>);" />
<?php endif; ?>
</a>
</span>
</span>
</li>
<?php endforeach; ?>
</ul>
js代码：
$('.GalleriaLink').click(function(event){
event.preventDefault();
// Prevent clicks upon animation
if($(':animated').length) return false;
// Assign element
var el = $(this);
// Parent container
var outerContainer = el.parent().parent().parent().parent().parent();
var placeholderContainer = outerContainer.find(".PlaceholderContainer div:first");
// Placeholder elements
var targetLink = placeholderContainer.find("a:first");
var targetTitle = placeholderContainer.find("p:first");
var targetImg = targetLink.find("img:first");
// Source elements
var sourceLinkHref = el.attr("href");
var sourceLinkTitle = el.attr("title");
var sourceImage = el.find("img:first");
if(targetLink.attr("href")!==sourceLinkHref && targetLink.hasClass('TargetLink')){
if(el.find("span:nth-child(2)")){
var sourceTitle = el.find(".Caption").html();
} else {
var sourceTitle = false;
}
placeholderContainer.animate({'opacity':0},300,function(){
targetImg.attr("src",sourceLinkHref);
var counter = 0;
targetImg.load(function(){
if (counter++ == 0) {
targetImg.attr("title",sourceImage.attr("title"));
targetImg.attr("alt",sourceImage.attr("alt"));
targetLink.attr("href",sourceLinkHref);
targetLink.attr("title",sourceLinkTitle);
if(targetTitle.hasClass('TargetTitle') && sourceTitle) targetTitle.html(sourceTitle);
placeholderContainer.animate({'opacity':1},600);
}
});
});
因为您根本没有显示任何代码，所以我所能做的就是假设。
如果通过ul显示缩略图，则可以保存当前元素的索引。
假设以下结构<ul><li><a class="thumbnail"><img src=".."></a></li></ul>，并且您正在使用jquery：
$(document).ready(function() {
var currentIndex = -1;
$("a").click(function() {
//show the image in another place
-- magic stuff --
//get the index of current li
currentIndex = $(this).parent().index();
}
});
有了这个，你可以检查是否有上一个或下一个图像：
function prev() {
if(currentIndex < 1)
{
//there is no prev image --> perhaps show the last one
$("ul li").last()
} else
{
//get prev image
}
}
function next() {
if(currentIndex >= $("ul").children().length-1)
{
//there is no next image --> perhaps show first one
$("ul li").first()
} else {
//get next image
}
}