Early Bird Registration for DrupalCon Portland 2024 is open! Register by 23:59 PST on 31 March 2024, to get $100 off your ticket.
Websites are used more and more on mobile devices like phones and tablets. These are touch based devices and people are starting to expect they can navigate through a slideshow simply by swiping it left or right.
See for inspiration http://us.blackberry.com which apparantly uses the overscroll plugin (http://azoffdesign.com/overscroll) to create such an effect.
As far as I'm aware this is currently not available functionality in views_slideshow (or any other jquery based slideshow module in Drupal). It would be awesome to see this happen!
Comment | File | Size | Author |
---|---|---|---|
#24 | views_slideshow-974482-23.patch | 2.91 KB | stefan.r |
Comments
Comment #1
aaron CreditAttribution: aaron commentedactually, Views Slideshow: ImageFlow does support iPhone touch swipes.
Comment #2
askibinski CreditAttribution: askibinski commentedActually, I used Imageflow and it does not offer this functionality. Basically it's just 'point + click' while I'm talking about 'click(hold) + sweep'.
Comment #3
tchilly CreditAttribution: tchilly commentedI would probably use a jQuery plugin like http://plugins.jquery.com/plugin-tags/touch, and apply it to my slideshow. Could be used with jQuery cycle plugin quite easily for creating slideshows.
Comment #4
aaron CreditAttribution: aaron commentedi don't have an iphone to test, @askibinski. could you confirm that on the demo at http://finnrudolph.de/ImageFlow/Introduction as well?
thanks!
Comment #5
askibinski CreditAttribution: askibinski commented@aaron I can confirm the demo does not work as expected on android mobile. I'm pretty sure it's the same on iphone.
The only way to scroll by holding is to use the slider beneath the images, but that's just wrong ;)
By the way, scratch overscroll, that doesn't work on mobile browsers either, but @tchilly's solution seems to be in the right direction.
Comment #6
jon_stewart CreditAttribution: jon_stewart commented+1 subscribing. The demo doesn't swipe on HTC desire.
Comment #7
redndahead CreditAttribution: redndahead commentedMoving to 7 since it's not 6 specific
Comment #8
askibinski CreditAttribution: askibinski commentedSee also this related issue about flexslider, which support touch gestures.
#1251388: Support FlexSlider
Comment #9
stovak CreditAttribution: stovak commentedHere's an implementation you can put in a global.js in your theme:
https://gist.github.com/1343996
Comment #10
miaoulafrite CreditAttribution: miaoulafrite commented+1 sounds promising
Comment #11
eigentor CreditAttribution: eigentor commentedHere are some sliders that work, have not checked how hard they would be to implement
http://unoslider.heroku.com/
http://dimsemenov.com/plugins/royal-slider/
(Royal slider site is no mobile site, swiping the image still works)
Both build as Jquery Plugins.
Comment #12
tchilly CreditAttribution: tchilly commented@9 - Works like a charm!
+1 add into module
Comment #13
jdanthinne CreditAttribution: jdanthinne commented#9 Working fine with Cycle slideshows!
Comment #14
jdanthinne CreditAttribution: jdanthinne commentedAnd with #9 working, it would be nice to have an option to decide to respond only to swiping left and right OR up and down (OR both like it does now), because when trying to scroll the page up when swiping up over the slideshow, now it moves to the next slide instead of scrolling the page…
Comment #15
kinsker-studio CreditAttribution: kinsker-studio commented@eigentor Thank you so much for tip about RoyalSlider (http://dimsemenov.com/plugins/royal-slider/), saved me so much time
Comment #16
renenee CreditAttribution: renenee commentedI'm pretty sure #9 saved me a ton of time. Thank you so much!
Comment #17
design.er CreditAttribution: design.er commented@stovak, you are incredible! :)
Thank you soo much for this implementation. It works perfectly on my phone, even with Views Slideshow JCarousel.
It would be really great to see this feature implemented - maybe as an option (checkbox on the settings page).
Comment #18
ChristianP CreditAttribution: ChristianP commented#9 Doesn't work for me. I use Drupal 6 and Views Slideshow 6.x 3.0.
Is there something different I need to change in the javascript file?
It's weird because I thought it worked for a second, but then it stopped working. Also is there any specific setting/effect I need to use, or can I use fade as well as slideHorz?
Comment #19
argiope CreditAttribution: argiope commentedI ended up including this as a custom module on my site. It only looks for left and right actions be it could be easily modified to detect up and down and the type easing.
Comment #20
douglasmiller CreditAttribution: douglasmiller commentedI modified the code in comment #9 to allow for click events to work. It has a 0 tolerance for short swipes, but that could be modified fairly easily.
https://gist.github.com/4170907
Comment #21
stewest CreditAttribution: stewest commentedYou may also use this plugin for views slideshow in Drupal 7 - http://drupal.org/project/flexslider or see this custom implementation http://www.daymuse.com/blogs/creating-swiping-hero-drupal using the jQuery TouchSwipe plugin.
Comment #22
angrytoast CreditAttribution: angrytoast commentedI modified the jQuery bindings in #19 above:
Comment #23
RgnYLDZ CreditAttribution: RgnYLDZ commentedHow do I implement the code in #22 to my site ?
Comment #24
stefan.r CreditAttribution: stefan.r commentedThis is the code from #22 without the Modernizr dependency
Comment #25
santhoshbabu CreditAttribution: santhoshbabu commented"views_slideshow-974482-23.patch" working fine on iPad
can you someone help me with iphone(same script not working)
Comment #26
shaktik"views_slideshow-974482-23.patch" its working fine.
Comment #27
NickDickinsonWildeApplied, using @stefan.r's implementation/patch, except put in in the views_slideshow_cycle.js since it is cycle specific rather than just views_slideshow.
Thanks for the discussion and code everyone!