WordPress.org

Ready to get started?Download WordPress

Forums

Easy FancyBox
[resolved] Formatting issue for mobile devices (7 posts)

  1. wattyrev
    Member
    Posted 1 year ago #

    I have Easy FancyBox on a site, and it works fine on my desktop. However, when I move to my ipad or iphone, the images do not align center, or even size correctly:

    ipad:
    http://i.imgur.com/pxo8GaL.jpg
    iphone:
    http://i.imgur.com/gqRRqm6.jpg

    Any suggestions?

    http://wordpress.org/extend/plugins/easy-fancybox/

  2. RavanH
    Member
    Plugin Author

    Posted 1 year ago #

    Hi, FancyBox 1.3.4 has not really been developed with mobile devices in mind. It's not a fix but you can disable FancyBox (using the latest release only) for smaller screens with this code:

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

    Put this code in a text widget or in your themes footer.php...

  3. wattyrev
    Member
    Posted 1 year ago #

    Hi Ravan,

    Thanks for the reply. I think I am going to continue tinkering with things to see if I cannot make it work the way I want, but that snippet may end up being the way I need to go.

  4. RavanH
    Member
    Plugin Author

    Posted 1 year ago #

    I'm not sure what actually causes this misplacement on these small devices. If it's 'just' a CSS issue, I can recommend installing Jetpack and activating (allready active by default?) the Custom CSS module. Then targeting smaller screens with media query markup tests on the Appearance > Edit CSS page.

    By the way, can you share a URL to a live example?

  5. wattyrev
    Member
    Posted 1 year ago #

    That code snippet didn't seem to do anything. The paramaters for the if statement work fine, but the $(document).off bit doesn't seem to be making any difference.

    I ended up modifying the code slightly and adding it to the jquery.fancybox-1.3.4.pack.js file. Here is what I did:

    Add this after ;(function(b){

    var pixelRatio = window.devicePixelRatio || 1;
    if(window.innerWidth < 500 || window.innerHeight < 500 || window.outerWidth < 500 || window.outerHeight < 500 ) {
    
    }else{

    Then add }; just before the })(jQuery); at the end of the document.

    Not a super clean fix, but it works.

    Live example at http://www.mshslc.org/gallery/debris-avalanche/

  6. wattyrev
    Member
    Posted 1 year ago #

    Just to clarify the above, this basically just disabled the .js file for small screens by effectively having a blank if statement, then the actual content within the else.

  7. RavanH
    Member
    Plugin Author

    Posted 1 year ago #

    Hi wattyrev, you are right. The code does not do anything because, when used in a text widget, it is loaded before the fancybox call instead of after it. I should have thought of that...

    This code should work (I tested it this time) :

    <script type="text/javascript">
    if(window.innerWidth < 500 || window.innerHeight < 500 || window.outerWidth < 500 || window.outerHeight < 500 ) {
      easy_fancybox_handler = null;
    };
    </script>

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic