WordPress.org

Forums

Shadowbox JS
Is it possible to disable Shadowbox for iPhone/iPad (7 posts)

  1. marklandoz
    Member
    Posted 4 years ago #

    I have Shadowbox installed on my site, and while it works perfectly in standard browsers, it doesn't work so well on my iPhone - specifically, when initiated the shadowbox loads only at the top of the page, even if you've scrolled half way down, which means that users might not notice that anything has happened if they don't scroll up to the top.

    This problem has been notified on other forums by other users (apparently the problem also happens on the iPad), so I know it's not something I've done wrong particularly.

    My question is, is it possible to add some code (to the <head>?) that will disable Shadowbox when viewed on an iPhone/iPad? This seems like a simpler way of bypassing the problem until a better fix is found (and included in a future update of Shadowbox?). While I'm fairly fluent in CSS/HTML my knowledge of javascript is pretty non-existent, and I'm assuming if it is possible to do this, you'd need to use javascript to do it.

    Any help much appreciated.

  2. ouija
    Member
    Posted 4 years ago #

    I was interested in the very same thing, so today I took the initiative and managed to get this to work. I also managed to disable Shadowbox-JS in conjunction with WPTouch in that you can choose to disable Shadowbox-JS only when viewing the mobile theme and leave it enabled when the user turns off the mobile theme by click the toggle in the footer of the WPTouch template.

    Please note that I have tested this and confirmed working on both an iPhone 3GS and iPod Touch, and used a Firefox plugin to emulate it working for the iPad. Please let me know if you have any issues or concerns.

    To disable Shadowbox-JS completely across the site when it is being viewed using an iPhone, iPod, or iPad, edit the "shadowbox-js.php" file and near the end of that file (at line 168) look for the line:

    } else {
    	if ( @include ( dirname ( __FILE__ ) . '/inc/frontend.php' ) ) { $ShadowboxFrontend = new ShadowboxFrontend (); }
    }

    and replace it with the following:

    } else {
    	if ( @include ( dirname ( __FILE__ ) . '/inc/frontend.php' ) ) { // detect if iPhone/iPad/iPod and disable shadowbox if true
    $browser = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
    	if ($browser == false)  {
    		$browser = strpos($_SERVER['HTTP_USER_AGENT'],"iPod");
    			if ($browser == false)  {
    				$browser = strpos($_SERVER['HTTP_USER_AGENT'],"iPad");
    					if ($browser == false)  { $ShadowboxFrontend = new ShadowboxFrontend (); } } }
    // end detection
    }

    .. and now Shadowbox-JS is now automatically disabled when your site is viewed on either an iPod, iPhone or iPad. (You can add/remove/change the HTTP_USER_AGENT lines to your liking if you only want to disable it on iPad or have it include another platform like Android or whatever you like)

    If you use WPTouch and would like to disable Shadowbox-JS *only* when the user is viewing it under the mobile theme, and have it re-enable when they view the full site (which is kind of pointless as Shadowbox still won't work properly on any iDevice) but if you want it to work this way, you'll first need to add the iPad User Agent to the WPTouch "wptouch.php" file (otherwise the mobile theme will not display when viewing on an iPad). Edit around line 242 of the "wptouch.php" file and add the iPad user agent to the $useragents array:
    "iPad", // Apple iPad

    Now edit the "shadowbox-js.php" file and (at line 168) look for the line:

    } else {
    	if ( @include ( dirname ( __FILE__ ) . '/inc/frontend.php' ) ) { $ShadowboxFrontend = new ShadowboxFrontend (); }
    }

    and replace it with the following:

    } else {
    	if ( @include ( dirname ( __FILE__ ) . '/inc/frontend.php' ) ) { // detect if iPhone/iPad/iPod and disable shadowbox if true
    if (strpos($_SERVER['HTTP_USER_AGENT'],"iPhone") | strpos($_SERVER['HTTP_USER_AGENT'],"iPad") | strpos($_SERVER['HTTP_USER_AGENT'],"iPod"))  { include ('./wp-content/plugins/wptouch/wptouch.php');
    if ( bnc_is_iphone() && $wptouch_plugin->desired_view == 'normal' ) {  $ShadowboxFrontend = new ShadowboxFrontend (); }
    }
    
    else { $ShadowboxFrontend = new ShadowboxFrontend (); }
    // end detection
    }

    And that should do it.

    Enjoy.

  3. ouija
    Member
    Posted 4 years ago #


  4. Matt Martz
    Member
    Plugin Author

    Posted 4 years ago #

    There is an easier way to detect mobile safari by evaluating the global $is_iphone variable.

    But just keep in mind that hacking the plugin is not necessarily a good idea, as every time you upgrade you will have to rehack.

    The better solution is to create another plugin or modify your themes functions.php that hooks in to one of the many filters in shadowbox-js and returns a null value for the shadowbox.js url. Something like:

    <?php
    global $is_iphone;
    if ( $is_iphone ) {
        add_filter('shadowbox-js', '__return_false');
    }
    ?>
  5. Tim Rogers
    Member
    Posted 4 years ago #

    Yeah but how about if I already have the mobile browser detection set up (for numerous other device eventualities) in something like mobiledetect.php that I include in the header of the wordpress theme.
    My detection script has an if statement at the end:

    if($mobile_browser>0) {
       // do something
       header( 'Location: http://whatevercorp.net/?wptheme=mobiblog' ) ;
    }
    else {
       // do something else
    }

    so what do I do to use $mobile_browser
    thanks, if you'd be kind enough to reply here or to leeroy.hc [at] gmail

  6. Matt Martz
    Member
    Plugin Author

    Posted 4 years ago #

    Perhaps something like:

    if($mobile_browser>0) {
       // do something
       add_filter('shadowbox-js', '__return_false');
       header( 'Location: http://whatevercorp.net/?wptheme=mobiblog'; ) ;
    }
    else {
       // do something else
    }

    As long as this code is run in header.php before <?php wp_head(); ?> is run you should be fine.

  7. Tim Rogers
    Member
    Posted 4 years ago #

    Thanks for the reply Matt!
    I put the add_filter line you suggested in the detection script mobiledetect.php, which I included right before <?php wp_head(); ?> in header.php, but I'm afraid it's not doing the thing.

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Shadowbox JS
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic