how can i add a previous/next link to "Picture and thumbnails on same page" ?

<a href="[+maxigallery.previous_pic_url+]">[+maxigallery.strings.previous+]</a>

[!MaxiGallery? &pictureTpl=`mgPicture` &display=`pictureview` &max_pic_size=`400x300` &max_thumb_size=`50`!]
[!MaxiGallery? &galleryPictureTpl=`mgGalleryPicture` &js=`mgJs` &manage_target=`56`!]

<div class="hoverthumb">
<a href="javascript:showPic ('[(base_url)][+maxigallery.path_to_gal+][+maxigallery.picture.filename+]',
'[+maxigallery.picture.title:htmlent+]','[+maxigallery.picture.descr:htmlent+]',
[+maxigallery.picture_width_normal+],[+maxigallery.picture_height_normal+])">
               <img src="[(base_url)][+maxigallery.path_to_gal+]tn_[+maxigallery.picture.filename+] " class="thumbnail" 
title="[+maxigallery.picture.title:htmlent+]"
alt="[+maxigallery.picture.title:htmlent+]" />
       </a>
</div>

<div class="picturecontainer">
<img id="maxImage" src="[(base_url)][+maxigallery.path_to_gal+][+maxigallery.picture.filename+]" 
alt="[+maxigallery.picture.title:htmlent+]" />
</div>

  <script type="text/javascript">
  <!-- 
  var jq = jQuery.noConflict(); 
  -->
  </script>

<script type="text/javascript">
//<![CDATA[
jq(document).ready(function(){
	jq(".hoverthumb").hover(function(){
	jq(this).fadeTo("fast", 0.6); // This sets the opacity to 60% on hover
	},function(){
	jq(this).fadeTo("fast", 1.0); // This sets the opacity back to 100% on mouseout
});
});
function showPic(url,title,descr,width,height) {
  jq("#maxImage").fadeOut("slow", function(){
      var image = new Image();
      jq(image).load(function() {
        jq(this).hide();
		// with the holding div #loader, apply:
      jq('#picturecontainer')
        // remove the loading class (so no background spinner), 
        .removeClass('loading')
        // then insert our image
        .append(this);
        jq("#maxImage").attr({
          src: url,
          width: width,
          height: height
        });
        jq("#maxImage").fadeIn("fast");
        jq("#maxTitle").html(title);
        jq("#maxDescr").html(descr);
		jq('#picturecontainer').addClass('loading')
      });
      jq(image).attr({src: url, width: width, height: height});
  });
}
//]]>
</script>

<div id="picturecontainer" class="loading">
<a id="bigimage" href="[(base_url)][+maxigallery.path_to_gal+]big_[+maxigallery.picture.filename+]" rel="lightbox">
<img id="maxImage" src="[(base_url)][+maxigallery.path_to_gal+][+maxigallery.picture.filename+]" 
alt="[+maxigallery.picture.title:htmlent+]" />
</a>
</div>

<div class="hoverthumb">
<a href="javascript:showPic ('[+maxigallery.picture.gal_id+]','[+maxigallery.picture.filename+]',
'[+maxigallery.picture.title:htmlent+]','[+maxigallery.picture.descr:htmlent+]',
[+maxigallery.picture_width_normal+],[+maxigallery.picture_height_normal+])">
               <img src="[(base_url)][+maxigallery.path_to_gal+]tn_[+maxigallery.picture.filename+] " class="thumbnail" 
title="[+maxigallery.picture.title:htmlent+]"
alt="[+maxigallery.picture.title:htmlent+]" />
       </a>
</div>

<div class="picturecontainer">
<a href="[(base_url)][+maxigallery.path_to_gal+]big_[+maxigallery.picture.filename+]" rel="lightbox" id="bigLink"><img id="maxImage" src="[(base_url)][+maxigallery.path_to_gal+][+maxigallery.picture.filename+]" 
alt="[+maxigallery.picture.title:htmlent+]" /></a>
</div>

function showPic(gal_id,filename,title,descr,width,height) {
  jq("#maxImage").fadeOut("slow", function(){
      var image = new Image();
      var normalImageUrl = '/assets/galleries/'+gal_id+'/'+filename;
      var bigImageUrl = '/assets/galleries/'+gal_id+'/big_'+filename;
      jq(image).load(function() {
        jq(this).hide();
		// with the holding div #loader, apply:
      jq('#picturecontainer')
        // remove the loading class (so no background spinner), 
        .removeClass('loading')
        // then insert our image
        .append(this);
        jq("#maxImage").attr({
          src: normalImageUrl,
          width: width,
          height: height
        });
        //change url to big image
        jq("#bigLink").attr({
          href: bigImageUrl
        });
        jq("#maxImage").fadeIn("fast");
        jq("#maxTitle").html(title);
        jq("#maxDescr").html(descr);
		jq('#picturecontainer').addClass('loading')
      });
      jq(image).attr({src: normalImageUrl, width: width, height: height});
  });
}

<a href="javascript:prevPic();">Prev pic</a>  || <a href="javascript:nextPic();">Next pic</a>

<script type="text/javascript">
function nextPic() {
  // collect thumbnail links
  var thumbLinks = jq('.thumbnail').parent();
  // get url parts from current image
  var currentUrlParts = jq('#maxImage').attr('src').split("/");
  // get current filename
  var filename = currentUrlParts[currentUrlParts.length-1];
  // variable to store the "found current thumbnail" flag
  var found = false;
  // go through thumbnails
  for (i=0; i < thumbLinks.length; i++) {
    var href = thumbLinks[i].href;
    // if current thumbnail has been found, we are processing the next thumbnail, execute the showPic
    if (found) {
      jq(thumbLinks[i]).parent().addClass('aktiv');
      // collect only the showPic parameters from href contents
      var strip = href.substring(href.indexOf("'"), href.length-1);
      // remove single quotes from the parameters
      strip = strip.replace(/\'/g,"");
      // fix encoded spaces
      strip = strip.replace(/\%20/g," ");
      // split the params to an array
      var params = strip.split(',');
      // call the showPic function
      showPic(params[0],params[1],params[2],params[3],params[4],params[5]);
      return;
    } else {
      // if this is the current thumbnail, raise the found flag
      if(href.indexOf(filename) >= 0) {
      	found = true;
        // if we are not in last thumbnail
        if (i+1 < thumbLinks.length) {
          jq(thumbLinks[i]).parent().removeClass('aktiv');
        }
      } 
    }
  }
}
function prevPic() {
  // collect thumbnail links
  var thumbLinks = jq('.thumbnail').parent();
  // get url parts from current image
  var currentUrlParts = jq('#maxImage').attr('src').split("/");
  // get current filename
  var filename = currentUrlParts[currentUrlParts.length-1];
  // variable to store the "found current thumbnail" flag
  var found = false;
  // variable to store previous href
  var prevHref = "";
  // go through thumbnails
  for (i=0; i < thumbLinks.length; i++) {
    var href = thumbLinks[i].href;
    // if this is the current thumbnail, change picture to previous
    if(href.indexOf(filename) >= 0) {
      if (i==0) {
        return; //we are in first picture
      }
      jq(thumbLinks[i]).parent().removeClass('aktiv');
      jq(thumbLinks[i-1]).parent().addClass('aktiv');
    	// collect only the showPic parameters from href contents
      var strip = prevHref.substring(prevHref.indexOf("'"), prevHref.length-1);
      // remove single quotes from the parameters
      strip = strip.replace(/\'/g,"");
      // fix encoded spaces
      strip = strip.replace(/\%20/g," ");
      // split the params to an array
      var params = strip.split(',');
      // call the showPic function
      showPic(params[0],params[1],params[2],params[3],params[4],params[5]);
      return;
    } else {
      // else set this href to be the previous href
      var prevHref = href;
    }
  }
} 
</script>