Cordova plugin to display image files full screen inside your iOS/Android app

A while ago I blogged about a customized HTML5 canvas/js implementation for full screen image display inside your cordova app. The advantage of this method was that it retained the application header and footer, however the drawback was that pinch zoom did not work well under device orientation changes. For anyone who doesn't want to deal with the complexities of a canvas based pinch zoom capable js solution a much simpler solution is to utilize iOS and Android native capabilities to launch the image in the default image viewer, from inside your application.

iOS

Inside a cordova plugin for ios implement the following call UIDocumentInteractionController.

        NSString *fullPath = @"specify file path here";
        NSURL *URL = [NSURL fileURLWithPath:fullPath];
       
        if (URL) {
            UIDocumentInteractionController *documentInteractionController = [UIDocumentInteractionController interactionControllerWithURL:URL];
             [documentInteractionController setDelegate:[[[UIApplication sharedApplication] keyWindow] rootViewController]];
            if (![documentInteractionController presentPreviewAnimated:YES])
                NSLog(@"Failed to open document in Document Directory");
}

Also let your cordova applications main view controller implement the UIDocumentInteractionControllerDelegate.

Android

Inside a cordova plugin for android implement the following call to an intent

Intent intent = new Intent();
intent.setAction(Intent.ACTION_VIEW);
intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
intent.setDataAndType(Uri.parse(filePath), "image/*");
context.startActivity(intent);

You will need to implement threading to prevent the UI thread from hanging.

For details on setting up a Cordova plugin inside iOS/Android refer to http://devgirl.org/2013/07/17/tutorial-how-to-write-a-phonegap-plugin-for-android/