【问题标题】:jscrollpane breaks image gallery (simple image gallery pro)jscrollpane 打破图片库(简单的图片库专业版)
【发布时间】:2012-05-24 00:10:17
【问题描述】:

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

我认为这是因为 jScrollPane 将一些 div 附加到拇指 ul,但我有限的 javascript/jquery 技能使得很难实际看到问题发生在哪里并解决它。

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

【问题讨论】:

  • 注意它们是一个库,将 $ 更改为 $K2 可能导致某些 jquery 脚本无法运行

标签: jquery joomla jscrollpane joomla-k2


【解决方案1】:

是的,你说得对,这是因为 jscrollpane 添加了额外的 div。

要解决此问题,您需要在 /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。非常感谢您的回答!当我需要等待的 24 小时过去后,赏金就会到来:)
  • 你还有一个问题,一些 javascript 库将 $ 更改为 $K2
【解决方案2】:

将行为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 进行此更改?
  • 因为它们是您的应用程序中的一个 js 文件,它使用以下行: var $K2 = jQuery.noConflict();这意味着您正在创建另一个别名而不是 $ 是 $K2 并且使用此技术是因为还有其他 javascript 库使用相同的别名 $ 所以它们是一个将 jquery $ 更改为 $K2 的 js 文件和我知道当我尝试使用浏览器的控制台制作任何选择器时,$ 不起作用但是当我调查您的 js 文件时,我知道要使用 $K2 而不是 $ 并且它起作用了所以我更新了 behavior.js 文件以支持 $K2
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2012-07-23
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-02-06
  • 1970-01-01
相关资源
最近更新 更多