Jscrollpane in a fancybox doesn't work

I have a problem using the jscrollpane in a fancybox. Although after a nightmare of efforts I made the custom scrollbar to appear, it only appears the first t开发者_JS百科ime I open the lightbox. When I close the lightbox, and try to open it again, it looks like the jscrollpane finds no content and consequently doesn't run properly.

Having a constant look at the firebug, I notice that when I close the lightbox, only the jspScrollable class (added by the jscrollpane) remains but all of the extra html is gone. When I open it again, the extra html is not created any more. It looks that this time the jscrollpane runs before the content is loaded.

Here is my script:

    <script type="text/javascript" >

    $(document).ready(function() {

            $("a.enlarge-image").fancybox(
                 {
                   'overlayColor' : '#000',
                   'overlayOpacity' : '0.6',
                   'autoScale' : false,
                   'onComplete' : (function(){
                         $('#fancybox-content').jScrollPane();

            })
        })
    })

     </script>

Any help would be much appreciated.

I finally worked this out. I firstly created an jscrollpane object which I destroy everytime I close the fancybox (onClosed) and recreate it again every time I open the fancybox (onComplete).

So here is my script now:

    <script type="text/javascript">
        var scrollpane;
            $(document).ready(function() {

                $("a.enlarge-image").fancybox(
                                        {       
                'overlayColor' : '#000',
                'overlayOpacity' : '0.6',
                'autoScale' : false,
                'onComplete' : (function(){
                    scrollpane = $('#fancybox-content').jScrollPane({showArrows: true, scrollbarWidth : '20'}).data().jsp;
                       }),
                'onStart' : (function(){
                        }),
                'onClosed' : (function() {

                     scrollpane.destroy();
                       })

                    });
                })
                    </script>

This seems to make the fancybox and the jscrollpane inside working perfect together. However, I discovered a problem just on IE7 & IE6 browsers. So when I close the overlay window I get this error: '0.nodeName' is null or not an Object

I think that the problem is that when I destroy the scrollpane onClose, then there is no declared variable scrollpane. I just don't know how to fix that.

Any thoughts please? Cheers..

Had the same issue and spent about 10 hours to make the scrollpane works in the fancybox. So. You should use an old fancy 1.3.4, and use a jscrollpane Version: 2.0.0beta12, Last updated: 2012-09-27 from github from demo.

JS code:

$.fancybox(img, {
                    'padding': 0,
                    'width': 1000,
                    'centerOnScroll': false,
                    'overlayOpacity' : 0,
                    'autoScale' : false,
                    'onComplete' : (function(){
                        if (scrollpane) scrollpane.reinitialise();
                        else 
                        scrollpane = $('.fancybox-content').jScrollPane({showArrows: false,
                        verticalGutter: 30}).data().jsp;                    
                           })
                }); 

And only one thing to make it work fine after closing and next button clicking is add to the jquery.jscrollpane.js 89'th line.

pane = undefined;