Swipe to next/previous posts

  • Hello and good day everyone.
    I am working on a WordPress blog. The PC version is almost complete (just waiting for the list of bugs to fix), so I moved on to ‘mobilizing’ it, creating a new, separate theme for the mobile/android/iPad/whatever. So my site has two themes, PC and mobile.

    In this new mobile theme, I want to add this swiping feature while on the post page. If I swipe left/right, then I’ll be brought to the previous/next post (if there are any).

    I’ve looked and searched through Google and tried these Javascript and jQuery methods, but none of them seemed to work.

    So I wanna ask you guys if you know of any ways for me to add this feature.

    Thanks and good day~

Viewing 6 replies - 1 through 6 (of 6 total)

  • I’ve used the TouchSwipe library on several occations for this kind of stuff.

    Have you checked it out?

    Thread Starter destinedjagold

    (@destinedjagold)

    Thank you for sharing. This one looks really promising. ^^

    Just for clarification, I only need to put the following files inside my [js] folder and call these files in my header for this to work, right?
    – jquery.touchSwipe.js
    – jquery.touchSwipe.min.js

    I’ve checked the demo pages that was included in the download, so I’m uncertain if those two files are the only ones I need to add, or do I also need to add this in my header…
    – <script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js”></script&gt;

    Thanks and good day~

    Thread Starter destinedjagold

    (@destinedjagold)

    Well, after testing on a test html, it seems that I only need the [jquery.touchSwipe.min.js] file, plus I also need to add this in my header.
    – <script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js”></script&gt;

    I’m going to test this on my actual site now. ^^

    Thread Starter destinedjagold

    (@destinedjagold)

    Well, after hours of testing, I wasn’t able to make it work on my actual site. :/
    Here’s a skeletal html structure of the site where I tested it on…

    <html><head>
...
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.touchSwipe.min.js"></script>

<?php wp_head(); ?>
...
</head>
<body>
...

<div class="test_area" style="padding-bottom: 10px;">
	Testing
	<p id="test_p"></p>
</div>

<script>
$(function() {
	$(".test_area").swipe( {
		swipeLeft:function(event, direction, distance, duration,) {
			$("#test_p").text("You swiped " + direction );
		},
		swipeRight:function(event, direction, distance, duration,) {
			$("#test_p").text("You swiped " + direction );
		},

		threshold:0
	});
});
</script>
...
</body></html>
    Moderator bcworkz

    (@bcworkz)

    You’ve fallen into the WP jQuery trap. Don’t feel bad, many hundreds have preceded you. Don’t load an external jQuery, WP has its own version which causes conflicts. You also need to enqueue your touchswipe script, specifying the local jquery as a dependency. This is all explained in Function Reference/wp enqueue script

    Thread Starter destinedjagold

    (@destinedjagold)

    Thank you for sharing!
    I’m going to study this for a while then and hope I can fix this little issue of mine.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Swipe to next/previous posts’ is closed to new replies.