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
Related
You can also test official demos at http://www.jacklmoore.com/zoom/ on simple responsive mode on Firefox with Tap emulator, it's just not working and I don't get why.
The code I use is combo with colorbox taken from jQuery Zoom inside a colorbox
$('a.colorbox').colorbox({
'onComplete': function(){
$('#cboxLoadedContent').zoom({ on:'click' });
}
});
Which works fine on desktop. We tried click and grab modes. On mobile it's just full screen image, beyond phone resolution size and does not move.
update: found on official github https://github.com/jackmoore/zoom/issues/130 the user was trying to add touch:true but no success.
I ended up wrapping my code above with if ($(window).width() > 786) {} so the jQuery zoom is triggered only on desktop devices and on mobile you just expand image with default method built in every phone (you know, the thing you do on your phone photos, with your two fingers that zooms photo in and out).
i am working on my website: http://www.antologiaoliveoil.com/ES/index.html
All looking good, however, when I preview this on Iphone, the image called Lataorganica.jpg does not display well on the first time it shows up on vertically, and the slider does not work. Once I rotate the iPhone horizontally, and then back vertically it works fine.
any idea anyone?
Many thanks
Part of the problem you have is that your text is in your image. On an iPhone or other mobile device where the width is very small, all the text is squish into the image because the image is squish into the mobile width.
One way to fix that is to create separate mobile slider image where there is less text and it is easier to read on a mobile. You can use CSS Media Queries to trigger the mobile slider to show if the width is small.
As for your question about the slider, are you using Owl Carousel (http://www.owlcarousel.owlgraphic.com/)? If you are, include the code you are using so we know how to troubleshoot.
Thanks!
He is using owl carousel. I see you are also using bootstrap. Is there a reason you are not using the bootstrap carousel? See here for reference
You have the required files to use the linked solution.
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 :)
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!
I have a requirement where I need to slide divs in and out of a screen given the users swipe gesture.
I am looking for a javaScript library/decent tutorial that will let me create an effect like the iPhone home screen where you can swipe left and right and have a card/screen slide in/out. It is important it is NOT a framework like Sencha or jqTouch. Essentially I need swipe gesture support and a smooth sliding transition.
Also any effects need to be smooth on the device. (use CSS3 animation (with hardware acceleration) as I need the experience to be smooth.
Targeted devices are Android and iPhone.
Any help or direction would be appreciated.
Here are some jQuery plugins you could use to achieve what you are looking to do without the full overhead of Sencha or jqTouch. These would still require jQuery and the plugin but I imagine if you are doing any reasonable web app or interface you are using jQuery :]
http://plugins.jquery.com/plugin-tags/touch
But here are multiple options, one should work to get the slide effect you are looking for or allow you to handle that gesture appropriately.