0 Пользователей и 1 Гость просматривают эту тему.
  • 6 Ответов
  • 1912 Просмотров
*

galograff

  • Осваиваюсь на форуме
  • 57
  • 1
  • верю в чудеса
ребят возникла потребность добавить в ПЛАГИН sigpro 2.5.5 шаблон для вывода Galleria добавить навигацию стрелочками, ктонить делал подобное или может подсказать откуда можно содрать, сам не силен в написании...
Код
<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>

« Последнее редактирование: 27.03.2014, 13:58:23 от galograff »
*

galograff

  • Осваиваюсь на форуме
  • 57
  • 1
  • верю в чудеса
Re: Добавить навигацию в плагин sigpro
« Ответ #1 : 09.02.2014, 11:43:12 »
ну во первых наверно надо сделать так
Код
<a href=#" id="prev">назад</a>
<a href=#" id="next">вперед</a>
а затем добавить в скрипт behavior.js функцию которая будет отрабатывать навигацию как в Lightbox
подскажите ...
*

galograff

  • Осваиваюсь на форуме
  • 57
  • 1
  • верю в чудеса
Re: Добавить навигацию в плагин sigpro
« Ответ #2 : 10.02.2014, 17:35:55 »
в общем решение нашел, но не совсем правильно работает. перелистывание картинок идет на ура, но при клике по превьюшке изображение не пролистывается до нужного, а подгружается на место первого
т.е. если пролистать до хотя бы 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">&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');

});
}

});
    
*

galograff

  • Осваиваюсь на форуме
  • 57
  • 1
  • верю в чудеса
Re: Добавить навигацию в плагин sigpro
« Ответ #3 : 20.02.2014, 12:05:32 »
переписал код скрипта не оставив живого места
но так и не получается сделать нормальную связь между превьюшками и галереей
Код
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();});
}

});
*

galograff

  • Осваиваюсь на форуме
  • 57
  • 1
  • верю в чудеса
Re: Добавить навигацию в плагин sigpro
« Ответ #4 : 20.02.2014, 12:06:16 »
есть желающие помочь? за вознаграждение хотя бы
*

galograff

  • Осваиваюсь на форуме
  • 57
  • 1
  • верю в чудеса
Re: Добавить навигацию в плагин sigpro
« Ответ #5 : 18.03.2014, 13:53:35 »
Тема закрыта.

в процессе получился совершенно новый шаблон для плагина sigpro - ссылка на базовый(корявый) вариант -http://jsfiddle.net/gall/Acezx/10/
плагина sigpro используется вместо штатной галереи K2.

функциональность:
- навигация при помощи стрелок
- навигация при помощи миниатюр
- полная совместимость с Joomla 2.5 + k2 2.6.8 + SIG PRO (by JoomlaWorks) 2.5.5

особенности:
- анимированное появление стрелок при наведении на бокс с главным изображением
- автоматическая смена фокуса превюьшек
- неограниченное количество изображений

возможно кому-то потребуется пишите на мыло
*

denjer

  • Осваиваюсь на форуме
  • 38
  • 0
RE: Добавить навигацию в плагин sigpro
« Ответ #6 : 21.04.2016, 13:35:05 »
Тема закрыта.

в процессе получился совершенно новый шаблон для плагина sigpro - ссылка на базовый(корявый) вариант -http://jsfiddle.net/gall/Acezx/10/
плагина sigpro используется вместо штатной галереи K2.

функциональность:
- навигация при помощи стрелок
- навигация при помощи миниатюр
- полная совместимость с Joomla 2.5 + k2 2.6.8 + SIG PRO (by JoomlaWorks) 2.5.5

особенности:
- анимированное появление стрелок при наведении на бокс с главным изображением
- автоматическая смена фокуса превюьшек
- неограниченное количество изображений

возможно кому-то потребуется пишите на мыло

а можете поделиться решением?
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

плагин Simple Image Gallery (by JoomlaWorks)

Автор Batyanya

Ответов: 5
Просмотров: 2481
Последний ответ 22.08.2016, 18:16:24
от Gorbunoff
Не работает плагин в настраиваемых полях

Автор she-r

Ответов: 5
Просмотров: 662
Последний ответ 01.03.2016, 18:08:48
от she-r
Обрезаются превью ( плагин Simple Image Gallery 3.0.1)

Автор dyushasun

Ответов: 2
Просмотров: 1061
Последний ответ 24.12.2014, 15:13:33
от dyushasun
Переделка sigpro

Автор Аркадий

Ответов: 0
Просмотров: 657
Последний ответ 14.10.2013, 22:02:38
от Аркадий
[Решено] Галерея в материалах не отображается

Автор mpar1

Ответов: 1
Просмотров: 1181
Последний ответ 10.09.2013, 16:21:27
от Иван