0

I've currently got the Fancybox overlay opening inside my #main div as desired, rather than the default behavior of opening inside body element.

I did this as suggested in several stackoverflow threads, by changing the jquery.fancybox.js script in this line: 

this.overlay = $('<div class="fancybox-overlay"></div>').appendTo( parent && parent.length ? parent : 'body' );

to this:

this.overlay = $('<div class="fancybox-overlay"></div>').appendTo( parent && parent.length ? parent : '#main' );

This works for positioning the overlay.

I want Fancybox to then center all popup content within that overlay. However, the first Fancybox content that opens does not center within the overlay, but rather within body - this unexpected behavior sometimes puts fancybox content partly outside the overlay. Subsequent fancybox elements do center within the overlay - it is only the first loaded element that centers on body.

Obviously, Fancybox goes to quite a bit of trouble to calculate viewport dimensions and make it possible center its content within the body element, but in this case I want all elements centered within my target #main div, within the .fancybox-overlay.

Edit - changed "parent.lenth", a typo in the original jquery.fancybox.js file, to "parent.length" - as pointed out by djehrame below. Behavior persists unfortuntately.

nimmolo
  • 191
  • 3
  • 14
  • Are you sure it's not just a typo? parent.lenth should be parent.length – Jeremy Ninnes Mar 03 '14 at 01:19
  • Thanks - unfortunately correcting that typo does not change the behavior. But you're right, and that typo is even in the original jquery.fancybox.js file I just downloaded. – nimmolo Mar 03 '14 at 01:30
  • To be clearer, the overlay does position properly. It's the content within that is incorrectly positioned. I'm not sure but I believe Fancybox calculates _content position_ from _overlay position_, though, since content positioning works as expected on subsequent elements. – nimmolo Mar 03 '14 at 01:36
  • [link](http://andrewnimmo.com/test/recent-work/posters) Click "options" on this example to see the fancybox – nimmolo Mar 03 '14 at 01:45
  • have you tried the `parent` API option? Check this http://stackoverflow.com/a/19689842/1055987, specially No. 2 – JFK Mar 03 '14 at 07:22
  • Thanks JFK - the `parent` option however does not seem to do govern the parameter I'm trying to set. I guess you could say I'm trying to change the scope - the DOM element - within which Fancybox operates (including the overlay), from `body` to `#main` – nimmolo Mar 03 '14 at 21:16
  • (above comment cont'd) … whereas the `parent` option seems to add a new DOM element. Do I understand that correctly? – nimmolo Mar 03 '14 at 22:04
  • There was a valuable comment here earlier which unfortunately got deleted - pointing out that on first load, `.fancybox-wrap` is a *sibling* of `.fancybox-overlay`, while after the second element of the gallery loads, `.fancybox-wrap` is a *child* of `fancybox-overlay` as it should be. – nimmolo Mar 03 '14 at 22:10

0 Answers0