javascript - In php, find which array element is shown and provide a link to the next and the previous -

i stuck following problem. dealing html/php/js situation have image thumbnails specific link class, when clicked, javascript function takes image src , loads image in specific place.

is there way know each time image shown since javascript function dows not load page again, replaces image, ajax. if knew in php image shown, make links prev($array) , next($array).

code follows:

<ul id="<?php echo $gal_id; ?>" class="<?php echo $extrawrapperclass; ?>" style="list-style-type: none;" >     <?php foreach($gallery $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 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);                 }             });         }); 

because did not show code @ all, can assume.

if displayed thumbnails via ul can save index of current element.

assuming following structure <ul><li><a class="thumbnail"><img src=".."></a></li></ul> , using jquery:

$(document).ready(function() {     var currentindex = -1;     $("a").click(function() {         //show image in place         -- magic stuff --         //get index of current li         currentindex = $(this).parent().index();     } }); 

with can check if there previous or next image:

function prev() {     if(currentindex < 1)     {         //there no prev image --> perhaps show last 1         $("ul li").last()     } else     {          //get prev image     } }  function next() {     if(currentindex >= $("ul").children().length-1)     {         //there no next image --> perhaps show first 1         $("ul li").first()     } else {         //get next image     } }