douyanguo7964
2013-07-11 08:27
浏览 25
已采纳

在php中,找到显示的数组元素,并提供指向下一个和前一个的链接

i am stuck with the following problem. I am dealing with an html/php/js situation where i have some image thumbnails with a specific link class, so when they get clicked, a javascript function takes the image src and loads the image in a specific place.

Is there a way that i could know each time what image is currently shown since the javascript function dows not load the page again, it just replaces the image, like AJAX. If i knew in PHP what image was currently shown, i could make some links to prev($array) and next($array).

Code follows:

<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>

and the js code:

 $('.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);
                }
            });
        });
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • douzhong2954 2013-07-11 08:49
    已采纳

    Because you did not show any code at all, all i can do is assume.

    If you displayed your thumbnails via a ul you can save the index of the current element.

    Assuming following structure <ul><li><a class="thumbnail"><img src=".."></a></li></ul> and that you are using 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();
        }
    });
    

    With this you can check if there is a previous or next image:

    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
        }
    }
    
    点赞 打赏 评论

相关推荐 更多相似问题