Implementing Swipe In My Image Gallery (Jquery) - javascript

what i want to do is that i have a nice image Gallery which is currently working on Next and Previous Links to go back and forward.
i want to do the same when ever user swipe that is just like iPhone etc (touch Mobiles).
i am implementing it on my website for PC's not for mobiles.swipe in sense of mouse not thumb
how to catch these Events???
Any Idea will be ll help full

I had to do something similar for jquery draggable items.
Check out http://code.google.com/p/jquery-ui-for-ipad-and-iphone/ it makes all jquery-ui elements work on iPhone and iPad :)

Related

Smooth swiping in jQuery Mobile like iOS swiping

I am new to jQuery Mobile, and I am trying to replicate a native iOS app.
The problem I am facing is the that I cannot find a way to smoothly swipe between pages which is common on iOS. In jQuery Mobile, it seems to register a swipe occurred and then swipes the page for you, but I like the feel of having the page follow your swipe.
In iOS, you could use a UIScrollView with page control, but it was also really easy to do yourself by listening to touch events in a UIView.
Are there any libraries/packages that will help me create smooth swiping transitions? If not, are there jQuery bindings to track where the finger is on screen as it moves, so I can move the page and create such a transition myself?
Thanks

Mobile Photo Gallery App

I have to make a photo gallery for a mobile phone app, where I can swipe from one picture to another. Here is an example.
unfortunately I can't use this library, because I need an inertial scrolling effect in fullscreen and you should be able to pinch to zoom in.
Any help? How should I make it? Any tips?
Have a look at http://swipejs.com
You may try Galleria or pick one from 5 jQuery Mobile Gallery Plugins

Enable and disable touch

The last days I'm working on a webapp for tablets, pc's, phones etc.. I have noticed that the user experience of this app is greatly improved in some cases by disabling the elastic effect of for example the iPad.
(Elastic effect meaning; when you touch the page on a plane that does
nothing, it will follow your finger and move the complete webpage,
even beyond de borders of the screen and on release launch it back to
the original position.)
Anyway! I have a little javascript code which does the trick, and I have been able to adapt it so most touch sensitive part do still work, whilst the page they are on is 'un'-touchable.
This is the piece of code: $(document).bind('touchmove', false);
Is there an easy way to apply this to the whole page, but make an exception for a div? I have tried some stuff but I'm not getting anywhere. Any help is appreciated! :D
Thanks!
I'm not sure whether this will work but its worth a shot. You select all elements on the page, then you remove your div from the list and bind the event to all these elements.
$('*').not('#yourdivId').bind('touchmove', false);

How to modify Kwicks.js with links for mobile/touch navigation?

I am trying to build a website with the excellent Wordpress theme Minimatica. Problem is, Minimatica uses a Kwicks.js (jQuery) based slider of image links for its main navigation. These are rollover slides and they don't behave nicely on mobile, since touching any of the slides causes a click-through. I want to tweak it so that on mobile/touch devices, the first touch causes the slider to open, and the second touch actually clicks through. I am not sure how to do this.
A working demo of the theme and the Kwicks panel can be found here:
http://demo.onedesigns.com/minimatica/
Opening it on a mobile device should readily demonstrate the problem.

Facebook's mobile app/site horizontal slide menu : Jquery plugin?

Does anybody know a good horizontal slide menu jquery plugin that could emulate Facebook's relatively new mobile site/app's menu?
Basically you have a view of all the content, and when you click a button, a menu slides from the left, moving the content a little to the right (to the width of the menu sliding in). When a button on the menu is clicked, the menu slides out of view, the content slides back, and then changes corresponding to whatever menu button was clicked.
Aldomatics code doesn't behave well in windows phone and doesn't handle orientation issues
This topic is old but here is a working solution for mobile devices (Build with Jquery) :
it's working on Windows phone, iOs and Android Devices.
I've tried to keep the code as simple as possible, it's easy to understand and modifiy.
http://apptitudes.github.com/SlidingMenuJS/
I was looking for the same thing.
The best example I can find is a paid mobile Wordpress theme:
http://themeforest.net/item/hotcake-mobile-business-html-template/1065437
Pretty slick and you could at least see how it is done.
Cheers,
I find this implementation the best example currently available:
https://github.com/aldomatic/FB-Style-Page-Slide-Menu
It's not a jQuery plug-in, per se, but it should to the trick!

Categories

Resources