Notorious Penguin Magicians

    @capacitor-community/photoviewer
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.8 • Public • Published


    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

    Note to developers

    🚨 Since release 1.0.8 ->> 🚨

    • Add mode slider
    • the call to the method show has been modified as follows;
        const show = async (imageList: Image[], mode: string,
                 startFrom: number, options?: ViewerOptions): Promise<capShowResult> => {

    with

    • mode in ["one","gallery","slider"]
    • startFrom: imageIndex in the imageList table valid only for mode "one" & mode "slider"

    🚨 Since release 1.0.8 <<- 🚨

    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

    • on the res project folder open the file_paths.xml file and add
        <files-path name="files" path="."/>
    • open the build.gradle (Project:android) and make sure that kotlin is declared
    ...
    buildscript {
        ext.kotlin_version = '1.6.10'
        dependencies {
            ...
            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

    React

    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!

    Install

    npm i @capacitor-community/photoviewer

    DownloadsWeekly Downloads

    101

    Version

    1.0.8

    License

    MIT

    Unpacked Size

    204 kB

    Total Files

    69

    Last publish

    Collaborators

    • capcombot
    • jcesarmobile
    • maxlynch
    • mhartington
    • dotnetkow
    • it_mike_s
    • byrds
    • rdlabo
    • priyankpatel
    • dwieeb
    • stewan
    • arielhernandezmusa
    • jeepq
    • start9keagan
    • boosten
    • nklayman
    • ihadeed
    • danielprr
    • ckgaparajita
    • jpender
    • nhyatt
    • pwespi
    • epicshaggy
    • thomasvidas
    • robingenz
    • diachedelic
    • johnborges
    • tobyas
    • elylucas
    • larsmikkelsen
    • giodimiliaionic
    • brownoxford
    • mrbatista
    • bazuka5801
    • hemang