Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

fancybox2 / fancybox causes page to to jump to the top

I have implemented fancybox2 on a dev site.

When I engage the fancybox (click the link etc) the whole html shifts behind it - and goes to the top. I have it working fine in another demo, but when I drag the same code to this project it jumps to the top. Not only with the links to inline divs, but also for simple image gallery.

Has anyone experienced this?

like image 858
sheriffderek Avatar asked Nov 25 '12 00:11

sheriffderek


People also ask

How do I open Fancybox on button click?

jQuery(document). ready(function($) { $('button'). on('click', function() { $. fancybox(); }); });

What is Fancybox in HTML?

fancybox is designed to display images, video, iframes and any HTML content. For your convenience, there is a built in support for inline content and ajax.

How do I add a title to fancybox?

fancybox({ beforeLoad: function() { this. title = $(this. element). attr('caption'); } });


2 Answers

This can actually be done with a helper in Fancybox 2.

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

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

like image 62
Dave Kiss Avatar answered Sep 25 '22 23:09

Dave Kiss


Jordanj77 is correct but easiest solution is to just go to stylesheet jquery.fancybox.css and comment out the row saying overflow: hidden !important; in section .fancybox-lock

like image 28
fast-reflexes Avatar answered Sep 25 '22 23:09

fast-reflexes