Home > DeveloperSection > Forums > How to make Fancybox 2 opening at top of page
Pooja Malohtra
Pooja Malohtra

Total Post:47

Posted on    January-30-2015 10:07 PM

 ASP.Net JQuery  JavaScript 

 1 Reply(s)
 642  View(s)
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" />


      $(document).ready(function() {


        padding : 0,

        openEffect  : 'elastic'




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.

Chintoo Semi

Total Post:135

Posted on    January-30-2015 10:26 PM

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:


  padding: 0,

  helpers: {

    overlay: {

      locked: false




Don't want to miss updates? Please click the below button!

Follow MindStick