-3

我被以下问题困住了。我正在处理 html/php/js 情况，其中我有一些带有特定链接类的图像缩略图，因此当它们被单击时，javascript 函数会获取图像 src 并将图像加载到特定位置。

有没有一种方法可以让我每次都知道当前显示的是什么图像，因为 javascript 函数不会再次加载页面，它只是替换图像，例如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);
                }
            });
        });
4

1 回答 1

0

因为您根本没有显示任何代码，所以我所能做的就是假设。

如果您通过 a 显示缩略图，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
    }
}
于 2013-07-11T08:49:51.907 回答