我使用joomlaworks的簡單圖像庫專業版。 我對它的css做了一些改變。 我將拇指放在頁面底部,並水平滾動。 現在我需要使用jScrollPane更改滾動條。滾動條出現並正常工作,但當它處於活動狀態時,點擊時拇指不會出現在主圖像視圖(較大的那個)中。jscrollpane打破圖像庫(簡單圖像庫專業版)
我認爲這是因爲jScrollPane附加了一些div到大拇指ul,但是我有限的javascript/jquery技能使得很難真正地發現問題出現在哪裏並解決它。
我使用joomlaworks的簡單圖像庫專業版。 我對它的css做了一些改變。 我將拇指放在頁面底部,並水平滾動。 現在我需要使用jScrollPane更改滾動條。滾動條出現並正常工作,但當它處於活動狀態時,點擊時拇指不會出現在主圖像視圖(較大的那個)中。jscrollpane打破圖像庫(簡單圖像庫專業版)
我認爲這是因爲jScrollPane附加了一些div到大拇指ul,但是我有限的javascript/jquery技能使得很難真正地發現問題出現在哪裏並解決它。
是的,你的權利,這是因爲JScrollPane中添加額外股利。
要解決這個問題,你需要做出改變/lvj/plugins/content/jw_sigpro/jw_sigpro/tmpl/Galleria/js/behaviour.js
文件:
查找行:
var outerContainer = el.parent().parent().parent().parent().parent();
並將其更改爲:
var outerContainer = el.parent().parent().parent().parent().parent().parent().parent();
更新行爲js文件是
$K2('.sigProGalleriaLink').click(function(event){
console.log("here");
event.preventDefault();
// Prevent clicks upon animation
if($K2(':animated').length) return false;
// Assign element
var el = $K2(this);
// Parent container
var outerContainer = el.parent().parent().parent().parent().parent();
var placeholderContainer = $K2(".sigProGalleriaPlaceholderContainer div:first");
console.log(outerContainer);
console.log(placeholderContainer);
// Placeholder elements
var targetLink = placeholderContainer.find("a:first");
console.log(targetLink);
var targetTitle = placeholderContainer.find("p:first");
console.log(targetTitle);
var targetImg = targetLink.find("img:first");
console.log(targetImg);
// Source elements
var sourceLinkHref = el.attr("href");
console.log(sourceLinkHref);
var sourceLinkTitle = el.attr("title");
console.log(sourceLinkTitle);
var sourceImage = el.find("img:first");
console.log(sourceImage);
if(targetLink.attr("href")!==sourceLinkHref){
console.log("should do the animation");
if(el.find("span:nth-child(2)")){
var sourceTitle = el.find(".sigProCaption").html();
} else {
var sourceTitle = false;
}
placeholderContainer.animate({'opacity':0},300,function(){
targetImg.attr("src",sourceLinkHref);
var counter = 0;
targetImg.load(function(){
if (counter++ == 0) {
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);
}
});
}); //.delay(500).animate({'opacity':1},300);
}
// Set class for current thumb
var thumbs = outerContainer.find("ul:first").find("a");
thumbs.each(function(){
if($K2(this).hasClass('sigProLinkSelected')){
$K2(this).removeClass('sigProLinkSelected');
}
});
el.addClass('sigProLinkSelected');
});
爲什麼需要更改$ K2? – Jarco
因爲它們是您的應用程序中使用以下行的js文件:var $ K2 = jQuery.noConflict();這意味着你正在創建另一個別名而不是$是$ K2,並且使用了這種技術,因爲還有其他的JavaScript庫使用相同的別名,即$,所以它們是一個js文件,它將jquery $更改爲$ K2,我知道,當我試圖使用瀏覽器的控制檯來作出任何選擇,美元沒有工作,但當我調查你的js文件,我知道$ K2將被用來代替$,它的工作,所以我更新了behavior.js文件以支持$ K2 –
注意他們是一個庫,將$改爲$ K2,這可能會導致一些jQuery腳本不能運行 –