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 |
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 likePrivacy - Photo Library Usage Description
and set a value toWe need to write photos
. This is required to have theShare
of images and thecreate Movie
working.
Android
- on the
res
project folder open thefile_paths.xml
file and add
<files-path name="files" path="."/>
- open the
build.gradle (Project:android)
and make sure thatkotlin
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 followingafter
apply plugin: 'com.android.application'
addapply plugin: 'kotlin-android' apply plugin: 'kotlin-kapt'
in the
android
block addbuildFeatures { dataBinding = true }
in the
repositories
block addmaven { url 'https://jitpack.io' }
in the
dependencies
block addimplementation "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
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 outpinch
with your two fingerstap
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)
- make a
- In
One Image
mode (Image Array with one Image only):pinch-zoom
andpan
with your two fingersdouble-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!