Member
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.
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.
Member
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.
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.
Administrator
Member
