Форум русской поддержки Joomla!® CMS
04.12.2016, 20:23:49 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1]   Вниз
  Добавить закладку  |  Печать  
Автор

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

 (Прочитано 1490 раз)
0 Пользователей и 1 Гость смотрят эту тему.
galograff
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Пол: Мужской
Сообщений: 57


верю в чудеса


« : 07.02.2014, 18:20:54 »

ребят возникла потребность добавить в ПЛАГИН 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
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Пол: Мужской
Сообщений: 57


верю в чудеса


« Ответ #1 : 09.02.2014, 11:43:12 »

ну во первых наверно надо сделать так
Код:
<a href=#" id="prev">назад</a>
<a href=#" id="next">вперед</a>
а затем добавить в скрипт behavior.js функцию которая будет отрабатывать навигацию как в Lightbox
подскажите ...
Записан
galograff
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Пол: Мужской
Сообщений: 57


верю в чудеса


« Ответ #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
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Пол: Мужской
Сообщений: 57


верю в чудеса


« Ответ #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
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Пол: Мужской
Сообщений: 57


верю в чудеса


« Ответ #4 : 20.02.2014, 12:06:16 »

есть желающие помочь? за вознаграждение хотя бы
Записан
galograff
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Пол: Мужской
Сообщений: 57


верю в чудеса


« Ответ #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
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Пол: Мужской
Сообщений: 38


« Ответ #6 : 21.04.2016, 14: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

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

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

а можете поделиться решением?
Записан
Страниц: [1]   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet