0

We are developing a site with fluid layout (so it works on mobile too), that adjusts itself when resizing the window.

Everything is ok but an area when we use fancybox to zoom the images. What I want it to disable fancybox when I call our "mobile ajusts" function (triggered by window.resize already) on our gallery, and re-enable it again when when going back to the "desktop" version.

I've tried a lot of things like preventDefault on 'click', using the $('.case-gallery a').fancybox($.fancybox.cancel) and stuff like that, but it seems that as fancybox is already stored in the DOM element, I'm not being able to disable it and enable it again on the fly - and my knowledge of JS is not really advanced.

Any help?

Felipe Spengler
  • 23
  • 1
  • 5
  • Can't you just init Fancybox from within the resizing function? For example, instead of having `jQuery( document ).ready( function( $ ) { **fancybox**, **resize** } )`, can you not use `jQuery( document ).ready( function( $ ) { **resize: { *resize code*, *fancybox code* } ** } );`. Apologies for the pseudo-code; didn't want to publish this as an answer because I don't have time to check it out. – turbonerd Mar 19 '12 at 16:27
  • Hi, yeah, I figured it out few minutes about my post. I still init the fancybox on document ready, but when I call my "mobile" function, I rewrite the fancybox properties all over again. This way I was able to not need to disable it, but then called some properties to customize fancybox for mobile with a better view. Then when I call my "desktop" function I just re-write fancybox with my default document.ready properties. I still don't know if this is the correct way of doing this, looks like a little "dirty" to me. – Felipe Spengler Mar 19 '12 at 18:32

2 Answers2

0

I have the same problem, and here is my current working thought:

jQuery check if event exists on element

use this answer to check a variable property to the DOM... like check if DOM.style.whatever > 10. just my working thought. I have a site that has a carousel of products in DIVs, and i want the not-displayed products to not be clickable based on their DIVs opacity. I'll repost in a day if i figure it out.

Community
  • 1
  • 1
jonc
  • 119
  • 1
  • 2
  • 8
0

try this to listen to fancybox onStart event and then use $.fancybox.cancel() (don't forget (). It's a function).

Alytrem
  • 2,620
  • 1
  • 12
  • 13
  • Yeah, I figured it out after I post, I just called $('.case-gallery a').fancybox({'beforeLoad' : function(){$.fancybox.cancel();}}); and then I re-write the fancybox with my default properties when going back to desktop version. I just don't know if its the correct way of do that. – Felipe Spengler Mar 19 '12 at 18:37