в общем решение нашел, но не совсем правильно работает. перелистывание картинок идет на ура, но при клике по превьюшке изображение не пролистывается до нужного, а подгружается на место первого
т.е. если пролистать до хотя бы 2 второго изображения и кликнуть по превьюшке, то изображение подгрузиться на место первого, вместо того чтобы пролистнуться до нужного
возможно есть вариант задать id по переменной $count и использовать его.
в общем в тупике
код шаблона<?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"> </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');
});
}
});
22.08.2016, 18:16:24