360° Rotation not working in UIWebView

Question

I'm trying to implement a 360° rotation for an iOS application. My objective is to do it on HTML and loading it in UIWebView.

What I have tried:

I used JQuery Reel Plugin for 360° rotation.

And my HTML code looks like:

<script src="JQuery.js" type="text/javascript"></script>
<script src="reel.js" type="text/javascript"></script>

 <img src="images/360_1.jpg" width="480" height="360"
        class="reel"
        data-images="images/360_#.jpg|1..36"
        data-frames="10"
        data-footage="2"
        data-revolution="800">

Result :

This is working on Windows (Firefox, Chrome & IE) and on Mac OS (Safari). But in iOS UIWebView it is only displaying the initial image and not rotating.

iOS code:

In iOS I added the whole files to my project and loading the page like:

NSURL *url = [NSURL fileURLWithPath:[[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"]];
[self.webview loadRequest:[NSURLRequest requestWithURL:url]];

Also tried:

NSString *path = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];
NSString *html = [[NSString alloc] initWithContentsOfFile:path encoding:NSUTF8StringEncoding error:nil];  
[self.webviewloadHTMLString:html baseURL:[[NSBundle mainBundle] bundleURL]];

But nothing solved my issue, please help me.

Answer 1

Finally I fixed the issue by following steps.

1) Added the folder that contains the HTML file as "Reference" by selecting "Create folder references for any added folders" in the XCode.

2) I used the following code to load the HTML and it worked:

// 360 is the folder which contains the HTML files
NSURL *url = [NSURL fileURLWithPath:[[NSBundle mainBundle] pathForResource:@"index" ofType:@"html" inDirectory:@"360"]];
[self.webview loadRequest:[NSURLRequest requestWithURL:url]];