php - PHPで、表示されている配列要素を見つけて、次と前へのリンクを提供します

Question

次の問題で立ち往生しています。特定のリンク クラスの画像サムネイルがある 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);
                }
            });
        });