Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I just want to have 2 types of fancybox size. for mobiles version width: 95%, height: 85% for pc version - width: 85%, height: 80% How can I set these 2 versions up? should I handle in php with 2 script or is there anyway to modify (handle) in a script?

   jQuery(".openf").fancybox({
   'width'   : '95%',
   'height' : '85%',
   'autoScale' : false,
   'transitionIn'    : 'none',
   'transitionOut'   : 'none',
   'type'    : 'iframe'
   });
share|improve this question
add comment

closed as off-topic by kaiser, s_ha_dum, toscho Aug 4 '13 at 15:04

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions should be specific to WordPress within defined scope (merely happening in its context, such as generic PHP/JS/HTML/CSS, is insufficient). Might be better asked at Stack Overflow or other appropriate site of Stack Exchange network." – kaiser, s_ha_dum, toscho
If this question can be reworded to fit the rules in the help center, please edit the question.

1 Answer

up vote 0 down vote accepted

I am presuming you are using the Easy Fancybox plugin, or some equivalent plugin. Your problem could be solved by applying custom css after Fancybox has loaded, as suggested by the plugin author here. In essence, you can use media-queries to specify the size of the Fancybox to be different on various devices. See for example this article as an introduction on using media-queries.

Also, per the Easy Fancybox FAQ, a fix could be:

The lightbox does not look good on mobile devices. What can I do about that?

The FancyBox 1.3.4 script that is used in thsi plugin was not developed with mobile devices in mind. The only way around this issue is currently to disable FancyBox for small screen sizes. You can do this by adding a text widget in your sidebar with the following code snippet.

<script type="text/javascript">
if(window.innerWidth < 500 || window.innerHeight < 500 || window.outerWidth < 500 || window.outerHeight < 500 ) {
  jQuery(document).off('ready gform_post_render', easy_fancybox_handler);
};
</script>

Tweak the value 500 to target other screen sizes.

Hope this helps, best of luck!

share|improve this answer
    
thanks so much. –  pulla Aug 11 '13 at 6:08
add comment

Not the answer you're looking for? Browse other questions tagged or ask your own question.