[robobobo]

Hi there,

I've recently designed this site davidpark.eu which uses a Jquery slider as you can see. It works great however it doesn't work on touch devices. Ideally I'd like to be able to just swipe the pictures to move across, but I can't even grab hold of the slider button to move it. The only way to do it is by tapping beside the slider and it moves over which isn't good enough.

I've never worked with JQuery code before so I've a novice at this. I do know that the Jquery ui doesn't support touch events so I found this work around - touchpunch
http://touchpunch.furf.com/

However I'm not sure how to implement, here's what I did, following the instructions as best as I could.

<!--New Jquery-->
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>

<!-- Jquery and plugins -->
<script type="text/javascript" src="<?php bloginfo( 'stylesheet_directory' ); ?>/js/jquery.js"></script>
<script type="text/javascript" src="<?php bloginfo( 'stylesheet_directory' ); ?>/js/jquery.ui.js"></script>
<script type="text/javascript" src="<?php bloginfo( 'stylesheet_directory' ); ?>/js/fancybox/jquery.fancybox-1.3.0.js"></script>
<script type="text/javascript" src="<?php bloginfo( 'stylesheet_directory' ); ?>/js/jquery.easing.js"></script>
<script type="text/javascript" src="<?php bloginfo( 'stylesheet_directory' ); ?>/js/anythingSlider.js"></script>

but alas it doesn't work.

Anyone any ideas for me?

Thanks

[dukevyner]

The main problem may be that the "jquery.ui.touch-punch.min.js"
is not on your site... or attached to the main document

[robobobo]

I have uploaded the script to the right directory and updated the code to the following

<!--New Jquery-->
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>
<script type="text/javascript" src="<?php bloginfo( 'stylesheet_directory' ); ?>/js/jquery.ui.touch-punch.min.js"></script>

<!-- Jquery and plugins -->
<script type="text/javascript" src="<?php bloginfo( 'stylesheet_directory' ); ?>/js/jquery.js"></script>
<script type="text/javascript" src="<?php bloginfo( 'stylesheet_directory' ); ?>/js/jquery.ui.js"></script>
<script type="text/javascript" src="<?php bloginfo( 'stylesheet_directory' ); ?>/js/fancybox/jquery.fancybox-1.3.0.js"></script>
<script type="text/javascript" src="<?php bloginfo( 'stylesheet_directory' ); ?>/js/jquery.easing.js"></script>
<script type="text/javascript" src="<?php bloginfo( 'stylesheet_directory' ); ?>/js/anythingSlider.js"></script>


However it still doesn't appear to work

[dukevyner]

try this

<!-- Jquery and plugins -->

<script type="text/javascript" src="http://davidpark.eu/wp-content/themes/Kratong/js/jquery.js"></script>

<script type="text/javascript" src="http://davidpark.eu/wp-content/themes/Kratong/js/jquery.ui.js"></script>

<script type="text/javascript" src="http://davidpark.eu/wp-content/themes/Kratong/js/fancybox/jquery.fancybox-1.3.0.js"></script>

<script type="text/javascript" src="http://davidpark.eu/wp-content/themes/Kratong/js/jquery.easing.js"></script>

<script type="text/javascript" src="http://davidpark.eu/wp-content/themes/Kratong/js/anythingSlider.js"></script>





<script type="text/javascript" src="http://davidpark.eu/wp-content/themes/Kratong/js/jquery.validate.js"></script>

<script type="text/javascript" src="http://davidpark.eu/wp-content/themes/Kratong/js/custom.js"></script>




<!-- This site is optimized with the Yoast WordPress SEO plugin v1.2.3 - http://yoast.com/wordpress/seo/ -->
<!--New Jquery-->
<script type="text/javascript" src="http://davidpark.eu/wp-content/themes/Kratong/js/jquery.ui.touch-punch.min.js"></script>

i placed the touch punch after the rest of the jquery(as advised on the site) an removed the two external jquery as they are redundant considering you have them locally

[robobobo]

Thank you for your reply yet again,

I tried your solution as above, however that broke the sidebar drop down menu and also the scroll bar disappeared when viewed on a mobile device and didn't work.

Ideally what I need it to be able to do is scroll across when the images are swipped

[dukevyner]

ah... well that is simply not achievable with touch punch, will have to do some looking into on that

[dukevyner]

not for mobile devices
http://jbkflex.wordpress.com/2012/01...-html5-part-1/

[dukevyner]

i take that back... doesnt work on phone
maybe this http://stackoverflow.com/questions/5...-left-to-right

[dukevyner]

this on the other hand does work for phones and likly the touch device you are attempting to use
http://dev.sencha.com/deploy/touch/e...#demo/carousel
note: this page is in HTML5 which some mobile devices may not support all functions

[robobobo]

Thank you very much for all your help, I've never worked with Jquery before so I'm a bit stumped with it. However I found this Jquery plugin in which I should be able to make work

http://dimsemenov.com/plugins/touchcarousel/