I have a theme that I bought and the UI is not optimized for mobile devices (touch interface ability, Drag, slide...)

Anyway, I found the touch punch js code and don't know the first thing to implanting it. I only need to have one or two areas where I'd like touch capabilities.

The main implementation would be for the slide show. I have full screen images that progress and I'd like the user to be able to drag to slide to the next frame.

However, my main concern is the thumbnail slider is set as a mouse scrub and is absolutely useless when viewed on an iPad or other touch device. You have NO ability to scrub over. I'd like the thumbnail slider to use the draggable element in the touch punch js.

You can view the site at www.MichaelHerbPhoto.com Click on the bottom arrow to bring up the thumbnails. Move back and forth to see the functionality.

The code that operates this is as follows

/* Thumbnail Mouse Scrub
    		if (api.options.mouse_scrub){
                    $(vars.thumb_tray).mousemove(function(e) {
                        var containerWidth = $(vars.thumb_tray).width(),
                            listWidth = $(vars.thumb_list).width();
                        if (listWidth > containerWidth){
                            var mousePos = 1,
                            diff = e.pageX - mousePos;
                            if (diff > 10 || diff < -10) { 
                                mousePos = e.pageX; 
                                newX = (containerWidth - listWidth) * (e.pageX/containerWidth);
                                diff = parseInt(Math.abs(parseInt($(vars.thumb_list).css('left'))-newX )).toFixed(0);
                                $(vars.thumb_list).stop().animate({'left':newX}, {duration:diff*0, easing:'easeOutExpo'});
Any help or advice would be appreciated.