Fancybox 2 opening at top of page

Question

I have Fancybox2 set up and working, it opens the image in the frame and has the title and the close button as i want it to. however it opens each image by scrolling right back to the top of the page. So when pressing the close button the visitor has to scroll back down to the images to choose the next one.

The only other Javascript I have running is Bootstrap as the site wsa built with that. Any ideas of what might be happening at all, or how to sort it out so the image opens in the same place as the image link?

In the head I have:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <link rel="stylesheet" href="source/jquery.fancybox.css" media="screen" />
    <script>
      $(document).ready(function() {
      $('.fancybox').fancybox({
        padding : 0,
        openEffect  : 'elastic'
       });
     });
    </script>

And then for image links i use:

    <a href="img/addons/Advanced_filters.jpg" class="fancybox" title="Advanced Filters"><img src="img/addons/Advanced_filters.jpg" class="addon_img" /></a>

And all my javascript is run at the bottom of the page, with the fancybox code as:

    <script src="source/jquery.fancybox.pack.js"></script>

All of this is exactly how the instruction say to set it up

many thanks, paul.

Answer 1

Try making a small change to jquery.fancybox.css: comment out the rule that says overflow: hidden !important; for .fancybox-lock

And if that does do it, try:

$('.image').fancybox({
  padding: 0,
  helpers: {
    overlay: {
      locked: false
    }
  }
});

Source: http://davekiss.com/prevent-fancybox-from-jumping-to-the-top-of-the-page/