[Решено] Добавить навигацию в плагин sigpro - Simple Image Gallery

<div class="sigProGalleriaPlaceholderContainer">
<div class="sigProGalleriaPlaceholder">
<a name="img" class="sigProGalleriaTargetLink<?php echo $extraClass; ?>" rel="<?php echo $relName; ?>[gallery<?php echo $gal_id; ?>]" title="<?php echo $gallery[0]->captionDescription.$gallery[0]->downloadLink.$modulePosition; ?>">
<img class="sigProGalleriaTargetImg" src="<?php echo $gallery[0]->sourceImageFilePath; ?>" alt="<?php echo JText::_('JW_SIGP_LABELS_08').' '.$gallery[0]->filename; ?>" title="<?php echo JText::_('JW_SIGP_LABELS_08').' '.$gallery[0]->filename; ?>" />
</a>
<p class="sigProGalleriaTargetTitle"><?php echo $gallery[0]->captionTitle; ?></p>
</div>
//добавить гденить тут ссылки "назад" "вперед"
<a href="#next">вперед</a><a href="#prev">назад</a>
</div>

<a href=#" id="prev">назад</a>
<a href=#" id="next">вперед</a>

<?php
// no direct access
defined('_JEXEC') or die('Restricted access');

$document->addScript($pluginLivePath.'/tmpl/Galleria/js/behaviour.js');

?>

<div id="sigProGalleria<?php echo $gal_id; ?>" class="sigProContainer sigProGalleriaContainer">

	<div class="sigProGalleriaPlaceholderContainer" id="slider-wrap" >
	<ul id="slider">
		<?php foreach($gallery as $count=>$photo): ?>
		<li>
			<div class="sigProGalleriaPlaceholder">
				<a name="img" class="sigProGalleriaTargetLink" rel="<?php echo $relName; ?>[gallery<?php echo $gal_id; ?>]">
					<img class="sigProGalleriaTargetImg" src="<?php echo $photo->sourceImageFilePath; ?>" alt=" " />
				</a>
			</div>
		</li>
		<?php endforeach; ?>
	</ul>
	<div id="slider-controls">
		<a href="#" id="slider-prev"><img src="../images/l_st_a.png" alt="" onmouseover="this.src='../images/l_st_n.png'" onmouseout="this.src='../images/l_st_a.png'"></a>
		<a href="#" id="slider-next"><img src="../images/r_st_a.png" alt="" onmouseover="this.src='../images/r_st_n.png'" onmouseout="this.src='../images/r_st_a.png'"></a>
	</div>	
	</div>
	
	<ul id="sigProId<?php echo $gal_id; ?>" class="sigProGalleria<?php echo ' sigProGalleria'.$singleThumbClass; ?>">
		<?php foreach($gallery as $count=>$photo): ?>
		<li class="sigProThumb"<?php if($gal_singlethumbmode && $count==0) echo ' style="display:none;"'; ?>>
			<span class="sigProLinkOuterWrapper">
				<span class="sigProLinkWrapper">
					<a href="<?php echo $photo->sourceImageFilePath; ?>" class="sigProGalleriaLink sigProLink<?php if($count==0) echo ' sigProLinkSelected'; ?>" 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="sigProImg" src="<?php echo $photo->thumbImageFilePath; ?>" alt=" " style="width:<?php echo $photo->width; ?>px;height:<?php echo $photo->height; ?>px;background:url(<?php echo $photo->thumbImageFilePath; ?>);" onmouseover="javascript:this.src='/images/a-hover.png',this.style.backgroundColor ='#EEE'" onmouseout="javascript:this.src='<?php echo $photo->thumbImageFilePath; ?>'"/>
						<?php endif; ?>
					</a>
				</span>
			</span>
		</li>
		<?php endforeach; ?>
		<li class="sigProClear">&nbsp;</li>
	</ul>
</div>

jQuery.noConflict();
jQuery(document).ready(function($){

	// Gallery
	if(jQuery("#slider").length){  

    // Declare variables
        var totalImages = jQuery("#slider > li").length, 
            imageWidth = jQuery("#slider > li:first").outerWidth(true),
            totalWidth = imageWidth * totalImages,
            visibleImages = Math.round(jQuery("#slider-wrap").width() / imageWidth),
            visibleWidth = visibleImages * imageWidth,
            stopPosition = (visibleWidth - totalWidth),
            allImages = totalWidth - (imageWidth + visibleWidth);
			jQuery("#slider").width(totalWidth);
        
        jQuery("#slider-prev").click(function(){
            if(jQuery("#slider").position().left < 0 && !jQuery("#slider").is(":animated")){
                jQuery("#slider").animate({left : "+=" + imageWidth + "px"});
            }
            return false;
        });
        
        jQuery("#slider-next").click(function(){
            if(jQuery("#slider").position().left > stopPosition && !jQuery("#slider").is(":animated")){
                jQuery("#slider").animate({left : "-=" + imageWidth + "px"});
            }
            if(jQuery("#slider").position().left == stopPosition ){
				jQuery("#slider").animate({left : "+=" + imageWidth + "px"});
			}
            return false;
        });
    

	$('.sigProGalleriaLink').click(function(event){

		event.preventDefault();

		// Prevent clicks upon animation
		if($(':animated').length) return false;

		// Assign element
		var el = $(this);

		// Parent container
		var outerContainer = jQuery("#slider > li").length;
		var placeholderContainer = outerContainer.find(".sigProGalleriaPlaceholderContainer div:first");

		// Placeholder elements
	  var targetLink = placeholderContainer.find("a:first");
	  var targetTitle = placeholderContainer.find("p:first");
	  var targetImg = targetLink.find("img:first");

	  if(targetLink.hasClass('sigProGalleriaTargetLink')){

			// Source elements
		  var sourceLinkHref = el.attr("href");
		//  var sourceLinkTitle = el.attr("title");
		  var sourceImage = el.find("img:first");
		  if(el.find("span:nth-child(2)")){
		  	var sourceTitle = el.find("span:nth-child(2)").find("b:first").html();
		  } else {
		  	var sourceTitle = false;
		  }
			
			placeholderContainer.animate({'opacity':0},300,function(){
				targetImg.attr("src",sourceLinkHref);
			//	targetImg.load(function(){					
				//	targetImg.attr("title",sourceImage.attr("title"));
				//	targetImg.attr("alt",sourceImage.attr("alt"));
					//targetLink.attr("href",sourceLinkHref);
				//	targetLink.attr("title",sourceLinkTitle);
				//	if(targetTitle.hasClass('sigProGalleriaTargetTitle') && sourceTitle) targetTitle.html(sourceTitle);
					placeholderContainer.animate({'opacity':1},600);
				//});
			});

	  }

		// Set class for current thumb
		var thumbs = outerContainer.find("ul:first").find("a");
		thumbs.each(function(){
			if($(this).hasClass('sigProLinkSelected')){
				$(this).removeClass('sigProLinkSelected');
			}
		});
		el.addClass('sigProLinkSelected');

	});
}

});
    

jQuery.noConflict();
jQuery(document).ready(function($){
// галерея
	if(jQuery("#slider").length){  

    // Declare variables
        var totalImages = jQuery("#slider > li").length, 
            imageWidth = jQuery("#slider > li:first").outerWidth(true),
            totalWidth = imageWidth * totalImages,
            visibleImages = Math.round(jQuery("#slider-wrap").width() / imageWidth),
            visibleWidth = visibleImages * imageWidth,
            stopPosition = (visibleWidth - totalWidth),
            allImages = totalWidth - (imageWidth + visibleWidth);
			jQuery("#slider").width(totalWidth);
//element id
	var i=0;
	var k=0;
	jQuery("#slider li").each(function(){
		i++;
	$(this).attr("id","slide_"+i);
	});
	jQuery("#sigProId li").each(function(){
		k++;
	$(this).attr("id","tumb_"+k);
	});

	 jQuery("#slider-prev").click(function(){
            if(jQuery("#slider").position().left < 0 && !jQuery("#slider").is(":animated")){
                jQuery("#slider").animate({left : "+=" + imageWidth + "px"});
            }
            return false;
        });
        
        jQuery("#slider-next").click(function(){
            if(jQuery("#slider").position().left > stopPosition && !jQuery("#slider").is(":animated")){
                jQuery("#slider").animate({left : "-=" + imageWidth + "px"});
            }
            if(jQuery("#slider").position().left == stopPosition ){
				jQuery("#slider").animate({left : "+=" + allImages  +"px"});
			}
            return false;
        });
		
		var linkOver = jQuery('div#slider-controls').hide();
		var myImg = jQuery('div.sigProGalleriaPlaceholderContainer');
		myImg.hover(function ()	{jQuery(this).find('#slider-controls').fadeIn("normal");},
		function () {jQuery(this).find('#slider-controls').fadeOut("normal");}
		);

// смена класса привьюшки
	jQuery('a#img_act').click(function(){
		jQuery(".active").removeClass('active');
		jQuery(this).addClass('active');

//пролистывание галереи до нужной картинке
		//if(jQuery("#slider").position().left < 0 && !jQuery("#slider").is(":animated")){
           	//jQuery("#slider").animate({left : "+=" + imageWidth + "px"});
        //}
	});

	$('.sigProGalleriaLink').click(function(event){event.preventDefault();});
}

});