0

I have a site with two plugins: jscrollpane and fancybox.

I want a div with jscrollpane to scroll until is finish. and inside there are many image clickable with fancybox.

When I scroll down with the scroller (scroll-pane) and click an image doesn't open a fancybox but go to the top of the div. Why? If I don't scroll the div and click on the first photo the fancybox works. How to fix this problem?

This is my javascript and html

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


    $(function()
    {
        jQuery('.scroll-pane').jScrollPane({
            autoReinitialise: true
         });

    });



    $("a.fancy").fancybox({
        'transitionIn'  :   'fade',
        'transitionOut' :   'fade',
        'speedIn'       :   600, 
        'speedOut'      :   200, 
        'overlayShow'   :   true
    });

});


</script>

<div class="scroll-pane">
                    <a href="img/gallery/big/01.jpg" class="fancy" rel="group"><img src="img/gallery/thumb/01.jpg" class="gallery" style="margin-top:0px;"/></a>
                    <a href="img/gallery/big/02.jpg" class="fancy" rel="group"><img src="img/gallery/thumb/02.jpg" class="gallery" style="margin-top:0px;"/></a>
                    <a href="img/gallery/big/03.jpg" class="fancy" rel="group"><img src="img/gallery/thumb/03.jpg" class="gallery" style="margin-top:0px;"/></a>
                    <a href="img/gallery/big/04.jpg" class="fancy" rel="group"><img src="img/gallery/thumb/04.jpg" class="gallery" style="margin-top:0px;"/></a>
                    <a href="img/gallery/big/05.jpg" class="fancy" rel="group"><img src="img/gallery/thumb/05.jpg" class="gallery" style="margin-top:0px;"/></a>
                    <a href="img/gallery/big/06.jpg" class="fancy" rel="group"><img src="img/gallery/thumb/06.jpg" class="gallery" /></a>
</div>

css of scroll-pane 

.scroll-pane
{
    width: 98%;
    height: 380px;
    overflow: auto;
}
Alessandro Minoccheri
  • 35,521
  • 22
  • 122
  • 171
  • Possibly you will need to show some working example. It takes time to collect testing page and problem seams to be not obvious – Viktor S. Sep 13 '12 at 14:56
  • Well... while waiting for luck (problem seams to be specific and I'm not sure if someone already had something like that) you can always go and debug jScrollPane code. – Viktor S. Sep 13 '12 at 15:05
  • 1
    Do you know if jscrollpane (I dunno) add the non-visible elements dynamically to the container while scrolling down? If so, you seem to be using fancybox v1.3.4 and that version doesn't support dynamically added elements. In that case check http://stackoverflow.com/a/9084293/1055987 for a workaround. – JFK Sep 13 '12 at 18:48

0 Answers0