jscrollpane breaks image gallery (simple image gallery pro)

Question

I Am using simple image gallery pro from joomlaworks. I made some changes to the css of it. I positioned the thumbs to the bottom of the page and made the scrollable horizontally. Now I need to change the scrollbar with jScrollPane. The scrollbar appears and works fine but when it is active the thumbs don't appear in the main image view (the bigger one) when clicked.

I think this is because jScrollPane appends some divs to the thumbs ul, but my limited javascript/jquery skills make it hard to actually see where the problem is occurring and solving it.

Url: http://goo.gl/9Dgq3

Answer 1

Yes, you right, this is because jscrollpane add additional div.

To fix this you need to make changes in /lvj/plugins/content/jw_sigpro/jw_sigpro/tmpl/Galleria/js/behaviour.js file:

Find line:

var outerContainer = el.parent().parent().parent().parent().parent();

And change it to:

var outerContainer = el.parent().parent().parent().parent().parent().parent().parent();

Answer 2

update the behavior js file to be

    $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');

    });