Mobile image Swipe

Question

I would like to add mobile image swipe to my product pages.

Only on the product page where you see the gallery slider beneath and the product image above I want users to be able to drag their finger across the main product image and see the next one in the list from the carousel while also being able to use the carousel.

I need to either modify the existing product image code to load these images up and allow swipe through jQuery OR possibly embed an existing jQuery library to handle this.

I have found 1 link and dont know where to put all these codes

http://demos.jquerymobile.com/1.4.2/swipe-page/#popupDemo&ui-state=dialog

Can you help me?

Answer 1

You indeed need JavaScript to get this done. Just pick the one that suits you best. Upload the JavaScript file to your theme and add the file to your theme via your layout.xml file.

After that you'll need to modify the app/design/frontend/[package]/[theme]/catalog/product/view/media.phtml file, so it can be used for the jQuery/JavaScript functionality you're using. Since this differs per jQuery extension, you'll have to get the source code from the extension's webpage.

If you want to make it possible to easily reuse the feature in other projects, it might be a good idea to create a Magento extension for it, so you can configure stuff.