@capacitor-community/photoviewer

PhotoViewer table images with fullscreen and sharing capabilities

Usage no npm install needed!

<script type="module">
  import capacitorCommunityPhotoviewer from 'https://cdn.skypack.dev/@capacitor-community/photoviewer';
</script>

README


PHOTO VIEWER

@capacitor-community/photoviewer


Capacitor 3 Android, iOS and Web

Electron 🚧


Capacitor community plugin for Web and Native Photo Viewer allowing to open fullscreen

- a selected picture from a grid of pictures with zoom-in and sharing features.

- a single picture with zoom-in and sharing features.

A picture can be acessed by url or base64. On iOS plugin, the creation of a movie from the pictures stored in the All Photos folder is now available.




Maintainers

Maintainer GitHub Social
Quéau Jean Pierre jepiqueau

Browser Support

The plugin follows the guidelines from the Capacitor Team,

meaning that it will not work in IE11 without additional JavaScript transformations, e.g. with Babel.

Installation

npm install @capacitor-community/photoviewer
npx cap sync

iOS

  • in Xcode, open Info.plist and add a new Information Property like Privacy - Photo Library Usage Description and set a value to We need to write photos. This is required to have the Shareof images and the create Movie working.

Android

  • open the project AndroidManifest.xml and add the following to the application tag
    </application>
        ...
        <provider
            android:name="androidx.core.content.FileProvider"
            android:authorities="${applicationId}.provider"
            android:exported="false"
            android:grantUriPermissions="true">
            <meta-data
                android:name="android.support.FILE_PROVIDER_PATHS"
                android:resource="@xml/file_paths"></meta-data>
        </provider>
        ...
    </application>

as well the Internet permission

<manifest>
    ...
    <!-- Permissions -->
    <uses-permission android:name="android.permission.INTERNET" />
    ...
</manifest>

  • on the res project folder create a folder xmlif it does not exist and create a file_paths.xml file containing
<?xml version="1.0" encoding="utf-8"?>
<paths xmlns:android="http://schemas.android.com/apk/res/android">
    <files-path
        name="files"
        path="."/>

</paths>
  • open the build.gradle (Project:android) and make sure that kotlin is declared
...
buildscript {
    ext.kotlin_version = '1.5.0'

    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:4.1.2'
        classpath 'com.google.gms:google-services:4.3.3'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
    }
}
...
  • open the build.gradle (Module: android.app) and do the following

    • after apply plugin: 'com.android.application' add

      apply plugin: 'kotlin-android'
      apply plugin: 'kotlin-kapt'
      
    • in the android block add

      buildFeatures {
          dataBinding = true
      }
      
    • in the repositories block add

      maven { url 'https://jitpack.io' }
      
    • in the dependencies block add

      implementation "androidx.core:core-ktx:1.6.0"
      implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
      
  • Now run Sync Project with Gradle Files and you are ready.

Web, PWA

The plugin works with the companion Stencil component jeep-photoviewer. It is mandatory to install it

npm install --save-dev jeep-photoviewer@latest

Build your App

When your app is ready

npm run build
npx cap copy
npx cap copy web
npx cap open android   // Android
npx cap open ios       // iOS
npm run serve          // Web

Supported methods

Name Android iOS Electron Web
echo ✅ ✅ ❌ ✅
show ✅ ✅ ❌ ✅

Documentation

API_Documentation

Applications demonstrating the use of the plugin

Ionic/Angular

Ionic/Vue

Usage

iOS and Android

  • In Gallery mode (Image Array with more than one Image):
    • make a tap will select the image and go fullscreen
    • In Fulscreen
      • tap will hide the share and exit buttons and open the window for other gestures.
      • double tap to zoom in and out
      • pinch with your two fingers
      • tap will show the share and exit buttons and leave the window for other gestures.
      • double tap will hide the buttons and zoom in straightforward (iOS only)
  • In One Image mode (Image Array with one Image only):
    • pinch-zoom and pan with your two fingers
    • double-tap to zoom directly to the maximum zoom

Dependencies

The Android code is using MikeOrtiz/TouchImageView allowing for the zooming in picture (https://github.com/MikeOrtiz/TouchImageView)

The iOS code is using SDWebImage for http async image downloader (https://github.com/SDWebImage/SDWebImage) and ISVImageScrollView for the pinch-zoom and pan in picture (https://github.com/yuriiik/ISVImageScrollView)

Contributors ✨

Thanks goes to these wonderful people (emoji key):


Jean Pierre Quéau

💻

Luan Freitas

💻

This project follows the all-contributors specification. Contributions of any kind welcome!