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

Question

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);
                }
            });
        });

Answer 1

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