+- ZenphotoCMS Forum (https://forum.zenphoto.org)
+-- Forum: Support (https://forum.zenphoto.org/forum-1.html)
+--- Forum: General support (https://forum.zenphoto.org/forum-4.html)
+--- Thread: Code for enabling image swiping in iOs (/thread-10119.html)
Code for enabling image swiping in iOs - risottto - 2012-06-29
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')) { ?>
<script type="text/javascript" src="<?php echo $_zp_themeroot; ?>/scripts/jquery.mobile-1.1.0.min.js"></script>
<?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:
`
<script>
<?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 } ?>
</script>
`
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.
Code for enabling image swiping in iOs - risottto - 2012-06-29
i forgot, don't forget to include the jQuery Mobile stylesheet as well:
http://jquerymobile.com/download/
direct links to your head are:
`<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />`
and
`<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>`
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.
Code for enabling image swiping in iOs - acrylian - 2012-06-29
FYI, Zenphoto 1.4.3 will include a new specific jQuery mobile theme which can be previewed in the beta naturally.
Code for enabling image swiping in iOs - risottto - 2012-06-29
Good news, I was waiting for the final release, only 2 days left!
Code for enabling image swiping in iOs - darkufo - 2013-02-03
Thank you for this, just implementing it now
