2012-05-16 31 views
1

我使用joomlaworks的简单图像库专业版。 我对它的css做了一些改变。 我将拇指放在页面底部,并水平滚动。 现在我需要使用jScrollPane更改滚动条。滚动条出现并正常工作,但当它处于活动状态时,点击时拇指不会出现在主图像视图(较大的那个)中。jscrollpane打破图像库(简单图像库专业版)

我认为这是因为jScrollPane附加了一些div到大拇指ul,但是我有限的javascript/jquery技能使得很难真正地发现问题出现在哪里并解决它。

网址:http://goo.gl/9Dgq3

+0

注意他们是一个库,将$改为$ K2,这可能会导致一些jQuery脚本不能运行 –

回答

1

是的,你的权利,这是因为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(); 
+0

令人惊讶的是,我找不到这个。我将专注于在即将到来的假期中学习更多js。非常感谢您的回答!当我需要等待的24小时已经过去时,赏金将会来:) – Jarco

+0

不客气:); – antyrat

+0

还有一个问题,有些javascript库会将$改为$ K2 –

1

更新行为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'); 

    }); 
+0

为什么需要更改$ K2? – Jarco

+0

因为它们是您的应用程序中使用以下行的js文件:var $ K2 = jQuery.noConflict();这意味着你正在创建另一个别名而不是$是$ K2,并且使用了这种技术,因为还有其他的JavaScript库使用相同的别名,即$,所以它们是一个js文件,它将jquery $更改为$ K2,我知道,当我试图使用浏览器的控制台来作出任何选择,美元没有工作,但当我调查你的js文件,我知道$ K2将被用来代替$,它的工作,所以我更新了behavior.js文件以支持$ K2 –