(Android/iphone) Image gallery with multiple images is giving problems?
I have made an image gallery in HTML5, JavaScript and CSS by using jQuery mobile. IE Phonegap platform ok.
The images are coming dynamically and are loaded in it, like this:
http://torontographic.com/wordpress/mouseSwipe/mouseSwipe.html
Above mouseSwipe Slider:
TYPE: 'mouseSwipe'
HORIZ: true
plugin available at
torontographic.wordpress.com
The problem coming with it is that I cannot click on the image and go to next page, because two events are occurring together.
The second problem is that I cannot swipe the page up down, from the place where gallery is placed, except the other area where gallery is not present.
To make it more clear, I am making news application in which I have added 5 - 10 gallery like Pulse news application.
I'm a little confused about some of the details of the issue, but I hate to see this question go completely unanswered in case someone else has this issue.
This plugin (mouseSwipe) overrides the default dragging functionality for mobile devices. Whereas normally devices would scroll the page on the mouse starting event, this plugin overrides that behavior to detect click movement across an element. Since it interrupts that functionality, dragging the opposite direction (for scrolling) is also broken. If the plugin were still being maintained by the owner (it doesn't appear to be), it could be updated to fix this issue, or emit events that could be used to manually create the functionality you're wanting.
I assume this is also what is giving you trouble for clicking to go to the specified page.
If you want my honest opinion, I would choose a different library, perhaps one that focuses solely on the swipability of mobile devices, and then handle desktop functionality separately (though, if you're using PhoneGap, it's likely you aren't even publishing this to a web platform for desktops). If it's going to be on the web, you can use modernizr (or the like) to figure out if the device supports touch input, and then implement something like the following:
http://labs.rampinteractive.co.uk/touchSwipe/demos/Image_gallery_example.html
For devices that do not support touch, you could fall back to button/arrow-based navigation (after all, as a desktop user, I do not expect to be able to drag it back and forth with the mouse).
In the file http://torontographic.com/wordpress/mouseSwipe/jquery.mouseSwipe.js onmousedown function has the code below. This will stop the event from the default behaviour and in cases stop captured/bubbled. You may want to look at these or the way event are being handled by the libraries.
e.preventDefault()
Here is more on how to stop JQuery propagation and regular behaviour.
event.preventDefault() vs. return false What is event bubbling and capturing?
The reason you cannot swipe up and down is likely due to that the "swipe" event is hogging the "movestart" or "move" event.
I ran into a similar problem once when using this plugin: http://stephband.info/jquery.event.swipe/
Their solution as pointed on on their website was to call the preventDefault method on the event to keep it from blocking as seen here.
jQuery('.mydiv')
.on('movestart', function(e) {
// If the movestart is heading off in an upwards or downwards
// direction, prevent it so that the browser scrolls normally.
if ((e.distX > e.distY && e.distX < -e.distY) ||
(e.distX < e.distY && e.distX > -e.distY)) {
e.preventDefault();
}
});
I have no experience with jQuery mobile, but i would reckon the problems are similar.
链接地址: http://www.djcxy.com/p/27042.html上一篇: 我怎样才能知道滑动手势识别器的力量？