Code for enabling image swiping in iOs

After some work and failed experiments I got my zenphoto gallery working with swipes on iOs devices (image mode only). Here's how it works:

First you need to load the jQuery mobile framework, I put it in a subfolder of my theme directory called scripts. I also only have it active if you are on an iOs device (some things get messed up on regular browsers if it's active on a computer).

Use the PHP code in the head:

`
<?php if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod') || strstr($_SERVER['HTTP_USER_AGENT'],'iPad')) { ?>

/scripts/jquery.mobile-1.1.0.min.js">

<?php ;} ?>
`
This wrapper is also handy if you want to put in a custom CSS for mobile devices.

For the swipes I targeted the body tag because it accepts swipes over the whole screen. I had the following script code wrapped in the same PHP iOS detection wrapper, but just took it out as it did not affect the functionality of the page in a regular browser:

The code:

`


<?php if (hasPrevImage()) { ?>
$(function() {
$('body').bind('swiperight', function(event) {
//Action below
window.location.href = "<?php echo html_encode(getPrevImageURL());?>";
});
});

<?php } if (hasNextImage()) { ?>

$(function() {
$('body').bind('swipeleft', function(event) {
//Action below
window.location.href = "<?php echo html_encode(getNextImageURL());?>";
});
});
<?php } ?>


`
I put this in the head by the colorbox java. It's basically the same as the PREV/NEXT for regular image navigation but with swipes.

It was a pretty easy process once I figured out that Mobile jquery was the way to go, lost several hours messing with touchswipe and wipetouch, which are overly complicated has some crazy side-effects.

Will post my site on the showcase when it's all done.

Comments

  • i forgot, don't forget to include the jQuery Mobile stylesheet as well:

    http://jquerymobile.com/download/

    direct links to your head are:
    ``

    and

    ``

    it sais you are supposed to use jQuery 1.6.4, even through the latest version included with zenphoto is 1.7, seems to work ok, a few things turned blue, but that can be fixed with some css fiddling.
  • acrylian Administrator, Developer
    FYI, Zenphoto 1.4.3 will include a new specific jQuery mobile theme which can be previewed in the beta naturally.
  • Good news, I was waiting for the final release, only 2 days left!
  • Thank you for this, just implementing it now :)
Sign In or Register to comment.