HOW TO MAKE FANCYBOX 2 OPENING AT TOP OF PAGE

Pooja Malohtra

Total Post:47

Points:331
Posted by  Pooja Malohtra
 984  View(s)
Ratings:
Rate this:

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.

  1. Chintoo Semi

    Post:135

    Points:947
    Re: How to make Fancybox 2 opening at top of page

    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

        }

      }

    });

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!