### Installation

Source: https://github.com/capacitor-community/photoviewer/blob/main/README.md

Install the plugin and sync Capacitor.

```bash
npm install @capacitor-community/photoviewer
npx cap sync
```

--------------------------------

### Install Dependencies

Source: https://github.com/capacitor-community/photoviewer/blob/main/CONTRIBUTING.md

Installs the necessary Node.js dependencies for the project.

```shell
npm install
```

--------------------------------

### Install SwiftLint (macOS)

Source: https://github.com/capacitor-community/photoviewer/blob/main/CONTRIBUTING.md

Installs SwiftLint using Homebrew, a tool for enforcing Swift style and conventions.

```shell
brew install swiftlint
```

--------------------------------

### Install jeep-photoviewer

Source: https://github.com/capacitor-community/photoviewer/blob/main/README.md

Install the companion Stencil component jeep-photoviewer.

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

--------------------------------

### Install Capacitor 4 (Next) Version

Source: https://github.com/capacitor-community/photoviewer/blob/main/docs/info_releases.md

Command to install the next version of the Capacitor Photoviewer plugin for Capacitor 4.

```bash
npm install @capacitor-community/photoviewer@next
```

--------------------------------

### Show PhotoViewer with custom headers

Source: https://github.com/capacitor-community/photoviewer/blob/main/README.md

Example of how to use the PhotoViewer.show method with custom headers for image requests.

```typescript
PhotoViewer.show({
  images: [
    {
      url: 'https://picsum.photos/id/237/200/300',
      title: 'Title'
    },
    {
      url: 'https://picsum.photos/id/238/200/300',
      title: 'Title'
    },
  ],
  options: {
    customHeaders: {
      accept: 'image/jpeg, image/png, image/gif, image/webp, image/svg+xml, image/*;q=0.8, */*;q=0.5',
      cookie: 'session=foo;',
    },
  },
  mode: 'slider'
})
```

--------------------------------

### getInternalImagePaths method

Source: https://github.com/capacitor-community/photoviewer/blob/main/docs/API.md

Get the internal image path list

```typescript
getInternalImagePaths() => Promise<capPaths>
```

--------------------------------

### PhotoViewer in Vue Template

Source: https://github.com/capacitor-community/photoviewer/blob/main/docs/Ionic-Vue-Usage.md

Example of how to integrate the PhotoViewer component within the template of a Vue page, including suspense for loading states.

```html
<template>
    ...
    <div id="container">
        <Suspense>
            <template #default>
                <PhotoViewer />
            </template>
            <template #feedback>
                <div> Loading ... </div>
            </template>
        </Suspense>
    </div>
    ...
</template>    

```

--------------------------------

### PhotoViewer Usage in Ionic Angular Component

Source: https://github.com/capacitor-community/photoviewer/blob/main/docs/Ionic-Angular-Usage.md

Example of using Capacitor Community PhotoViewer within an Ionic Angular component, including error handling and platform-specific actions.

```typescript
      console.log(`after show ret: ${JSON.stringify(result)}`);
      // base64 images call
      //ret = await show(base64List, options);
      if(!result.result) {
          await showToast(JSON.stringify(result));
      }
      if(result.result && Object.keys(result).includes('message')) {
          await showToast(JSON.stringify(result));
      }
    } catch (err) {
        console.log(`in catch before toast err: ${err}`);
        await showToast(err);
        if(this.platform === 'web' || this.platform === 'electron') {
            window.location.reload();
        }
    }

  }
}
```

--------------------------------

### Build your App

Source: https://github.com/capacitor-community/photoviewer/blob/main/README.md

Commands to build the app, copy plugins, and open native projects or serve the web app.

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

--------------------------------

### show method

Source: https://github.com/capacitor-community/photoviewer/blob/main/docs/API.md

Show the PhotoViewer

```typescript
show(options: capShowOptions) => Promise<capShowResult>
```

--------------------------------

### echo method

Source: https://github.com/capacitor-community/photoviewer/blob/main/docs/API.md

Echo a given string

```typescript
echo(options: capEchoOptions) => Promise<capEchoResult>
```

--------------------------------

### Android build.gradle (Module: app) Configuration - Dependencies

Source: https://github.com/capacitor-community/photoviewer/blob/main/README.md

Add Kotlin stdlib and core-ktx dependencies in the app-level build.gradle file for Android.

```js
implementation "androidx.core:core-ktx:1.15.0"
implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"

```

--------------------------------

### Android build.gradle (Module: app) Configuration - Repositories

Source: https://github.com/capacitor-community/photoviewer/blob/main/README.md

Add Jitpack IO to the repositories block in the app-level build.gradle file for Android.

```js
maven { url 'https://jitpack.io' }

```

--------------------------------

### Show Method Signature for Capacitor 3

Source: https://github.com/capacitor-community/photoviewer/blob/main/docs/info_releases.md

The modified signature of the 'show' method for Capacitor 3 releases, including new parameters for mode and startFrom.

```javascript
const show = async (imageList: Image[], mode: string,
             startFrom: number, options?: ViewerOptions): Promise<capShowResult> => {
```

--------------------------------

### Android build.gradle (Project) Configuration

Source: https://github.com/capacitor-community/photoviewer/blob/main/README.md

Ensure Kotlin is declared in the project-level build.gradle file for Android.

```js
buildscript {
    ext.kotlin_version = '1.9.25'
    dependencies {
        ...
        classpath 'com.android.tools.build:gradle:8.8.1'
        classpath 'com.google.gms:google-services:4.4.2'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
    }
}

```

--------------------------------

### Android build.gradle (Module: app) Configuration - Plugins

Source: https://github.com/capacitor-community/photoviewer/blob/main/README.md

Apply Kotlin plugins in the app-level build.gradle file for Android.

```js
apply plugin: 'kotlin-android'
apply plugin: 'kotlin-kapt'

```

--------------------------------

### Android build.gradle (Module: app) Configuration - Build Features

Source: https://github.com/capacitor-community/photoviewer/blob/main/README.md

Enable data binding in the android block of the app-level build.gradle file for Android.

```js
buildFeatures {
    dataBinding = true
}

```

--------------------------------

### Publish Plugin

Source: https://github.com/capacitor-community/photoviewer/blob/main/CONTRIBUTING.md

Publishes the plugin to the npm registry. A pre-publish hook ensures the plugin is prepared before publishing.

```shell
npm publish
```

--------------------------------

### saveImageFromHttpToInternal method

Source: https://github.com/capacitor-community/photoviewer/blob/main/docs/API.md

Download an image from http and save it locally

```typescript
saveImageFromHttpToInternal(options: capHttpOptions) => Promise<capHttpResult>
```

--------------------------------

### Android file_paths.xml Configuration

Source: https://github.com/capacitor-community/photoviewer/blob/main/README.md

Add a file-path entry to res/xml/file_paths.xml for Android.

```xml
<files-path name="files" path="."/>
```

--------------------------------

### main.ts Configuration

Source: https://github.com/capacitor-community/photoviewer/blob/main/docs/Ionic-Angular-Usage.md

This snippet shows how to import and define custom elements for jeep-photoviewer and pwa-elements in the main.ts file for an Angular application.

```javascript
import {
  enableProdMode
} from '@angular/core';
import {
  platformBrowserDynamic
} from '@angular/platform-browser-dynamic';

import {
  AppModule
} from './app/app.module';
import {
  environment
} from './environments/environment';
import {
  defineCustomElements as jeepPhotoviewer
} from 'jeep-photoviewer/loader';
import {
  defineCustomElements as pwaElements
} from '@ionic/pwa-elements/loader';

if (environment.production) {
  enableProdMode();
}
jeepPhotoviewer(window);
pwaElements(window);

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));

```

--------------------------------

### Capacitor Configuration

Source: https://github.com/capacitor-community/photoviewer/blob/main/README.md

Modify capacitor.config.ts to specify image locations for saving downloaded images.

```typescript
const config: CapacitorConfig = {
  ...
  plugins: {
    PhotoViewer: {
      iosImageLocation: 'Library/Images',
      androidImageLocation: 'Files/Images',
    }
  }
  ...
};

export default config;

```

--------------------------------

### home.module.ts Configuration

Source: https://github.com/capacitor-community/photoviewer/blob/main/docs/Ionic-Angular-Usage.md

This snippet illustrates the NgModule configuration for a home page that includes the PhotoviewerComponentModule in an Ionic Angular application.

```javascript
import {
  NgModule
} from '@angular/core';
import {
  CommonModule
} from '@angular/common';
import {
  IonicModule
} from '@ionic/angular';
import {
  FormsModule
} from '@angular/forms';
import {
  HomePage
} from './home.page';
import {
  PhotoviewerComponentModule
} from '../components/photoviewer/photoviewer.module';
import {
  HomePageRoutingModule
} from './home-routing.module';


@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    PhotoviewerComponentModule,
    HomePageRoutingModule
  ],
  declarations: [HomePage]
})
export class HomePageModule {}

```

--------------------------------

### PhotoViewer Component

Source: https://github.com/capacitor-community/photoviewer/blob/main/docs/Ionic-Vue-Usage.md

A Vue component that integrates the PhotoViewer functionality.

```typescript
<template>
    <div id="photoviewer-container">

    </div>
</template>
<script lang="ts">
import { defineComponent, onMounted } from 'vue';
import { PhotoViewer, Image, ViewerOptions, 
         capEchoOptions, capEchoResult,
         capShowOptions, capShowResult} from '@capacitor-community/photoviewer';
import { Toast } from '@capacitor/toast';
import { base64List } from '@/utils/base64Images';
export default defineComponent({
    name: 'PhotoViewer',
    async setup() {
        const echo = async (value: string): Promise<capEchoResult> => {
            const val: any = {};
            val.value = value;
            const ret = await PhotoViewer.echo(val);
            return ret;
        }
        const imageList: Image[] = [
            {url: "https://i.ibb.co/wBYDxLq/beach.jpg", title: "Beach Houses"},
            {url: "https://i.ibb.co/gM5NNJX/butterfly.jpg", title: "Butterfly"},
            {url: "https://i.ibb.co/10fFGkZ/car-race.jpg", title: "Car Racing"},
            {url: "https://i.ibb.co/ygqHsHV/coffee-milk.jpg", title: "Coffee with Milk"},
            {url: "https://i.ibb.co/7XqwsLw/fox.jpg", title: "Fox"},
            {url: "https://i.ibb.co/L1m1NxP/girl.jpg", title: "Mountain Girl"},
            {url: "https://i.ibb.co/wc9rSgw/desserts.jpg", title: "Desserts Table"},
            {url: "https://i.ibb.co/wdrdpKC/kitten.jpg", title: "Kitten"},
            {url: "https://i.ibb.co/dBCHzXQ/paris.jpg", title: "Paris Eiffel"},
            {url: "https://i.ibb.co/JKB0KPk/pizza.jpg", title: "Pizza Time"},
            {url: "https://i.ibb.co/VYYPZGk/salmon.jpg", title: "Salmon "},
        ]

        const mode: string = "one";
        const startFrom: number = 2;

        const options: ViewerOptions = {} as ViewerOptions;
        
        const show = async (imageList: Image[], mode: string,
                            startFrom: number, options?: ViewerOptions
                            ): Promise<capShowResult> => {
            const opt: capShowOptions = {} as capShowOptions;
            opt.images = imageList;
            opt.mode = mode;
            opt.startFrom = startFrom;
            if(options) opt.options = options
            try {
                const ret = await PhotoViewer.show(opt);
                if(ret.result) {
                    return Promise.resolve(ret);
                } else {
                    return Promise.reject(ret);
                }
            } catch (err) {
                const ret: capShowResult = {} as capShowResult;
                ret.result = false;
                ret.message = err.message;
                return Promise.reject(ret);
            }

        }

        const showToast = async (message: string) => {
            await Toast.show({
                text: message,
                position: 'center',
            });
        };

        onMounted(async () => {
            let ret: any = await echo("Hello from jeepq");
            if(!ret.value) {
                await showToast("no value to echo")
            }
            try {
                // **************************************
                // here you defined the different options
                // **************************************

                // uncomment the following desired lines below
                // options.title = false;
                // options.share = false;
                // options.transformer = "depth";
                // options.spancount = 2

                // **************************************
                // here you defined url or Base64 images
                // **************************************

                // comment or uncomment as you wish

                // http images call
                ret = await show(imageList, mode, startFrom, options);

                // base64 images call
                // ret = await show(base64List, options);

                if(!ret.result) {
                    await showToast(JSON.stringify(ret));
                }

            } catch (err) {
                await showToast(err.message);
            }
        });
        return
    }
});
</script>
```

--------------------------------

### app.module.ts Configuration

Source: https://github.com/capacitor-community/photoviewer/blob/main/docs/Ionic-Angular-Usage.md

This snippet demonstrates the necessary imports and NgModule configuration for integrating the photoviewer component within an Angular application's AppModule.

```javascript
import {
  CUSTOM_ELEMENTS_SCHEMA,
  NgModule
} from '@angular/core';
import {
  BrowserModule
} from '@angular/platform-browser';
import {
  RouteReuseStrategy
} from '@angular/router';

import {
  IonicModule,
  IonicRouteStrategy
} from '@ionic/angular';

import {
  AppComponent
} from './app.component';
import {
  AppRoutingModule
} from './app-routing.module';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}

```

--------------------------------

### Photoviewer Component HTML

Source: https://github.com/capacitor-community/photoviewer/blob/main/docs/Ionic-Angular-Usage.md

The basic HTML structure for the Photoviewer component.

```html
<div id="photoviewer-container">
</div>
```

--------------------------------

### Photoviewer Component TypeScript

Source: https://github.com/capacitor-community/photoviewer/blob/main/docs/Ionic-Angular-Usage.md

The TypeScript code for the Photoviewer component, including image list initialization, viewer options, and methods for showing images and handling echoes.

```typescript
import {
  Component,
  OnInit,
  AfterViewInit
} from '@angular/core';
import {
  PhotoViewer,
  Image,
  ViewerOptions,
  capEchoResult,
  capShowOptions,
  capShowResult
} from '@capacitor-community/photoviewer';
import {
  Capacitor
} from '@capacitor/core';
import {
  Toast
} from '@capacitor/toast';

@Component({
  selector: 'app-photoviewer',
  templateUrl: './photoviewer.component.html',
  styleUrls: ['./photoviewer.component.scss'],
})
export class PhotoviewerComponent implements OnInit, AfterViewInit {
  platform: string;
  imageList: Image[];
  mode: string = "one";
  startFrom: number = 0;
  options: ViewerOptions = {} as ViewerOptions;

  constructor() {
    this.platform = Capacitor.getPlatform();
   }

  async ngOnInit() {
    this.imageList = [
      {url: 'https://i.ibb.co/wBYDxLq/beach.jpg', title: 'Beach Houses'},
      {url: 'https://i.ibb.co/gM5NNJX/butterfly.jpg', title: 'Butterfly'},
      {url: 'https://i.ibb.co/10fFGkZ/car-race.jpg', title: 'Car Racing'},
      {url: 'https://i.ibb.co/ygqHsHV/coffee-milk.jpg', title: 'Coffee with Milk'},
      {url: 'https://i.ibb.co/7XqwsLw/fox.jpg', title: 'Fox'},
      {url: 'https://i.ibb.co/L1m1NxP/girl.jpg', title: 'Mountain Girl'},
      {url: 'https://i.ibb.co/wc9rSgw/desserts.jpg', title: 'Desserts Table'},
      {url: 'https://i.picsum.photos/id/1009/5000/7502.jpg?hmac=Uj6crVILzsKbyZreBjHuMiaq_-n30qoHjqP0i7r30r8', title: 'Surfer'},
      {url: 'https://i.picsum.photos/id/1011/5472/3648.jpg?hmac=Koo9845x2akkVzVFX3xxAc9BCkeGYA9VRVfLE4f0Zzk', title: 'On a Lac'},
      {url: 'https://i.ibb.co/wdrdpKC/kitten.jpg', title: 'Kitten'},
      {url: 'https://i.ibb.co/dBCHzXQ/paris.jpg', title: 'Paris Eiffel'},
      {url: 'https://i.ibb.co/JKB0KPk/pizza.jpg', title: 'Pizza Time'},
      {url: 'https://i.ibb.co/VYYPZGk/salmon.jpg', title: 'Salmon '},
    ];
  }
  async ngAfterViewInit() {
    const show = async (imageList: Image[], mode: string,
              startFrom: number, options?: ViewerOptions
              ): Promise<capShowResult> => {
      const opt: capShowOptions = {} as capShowOptions;
      opt.images = imageList;
      opt.mode = mode;
      if( mode === 'one' || mode === 'slider') {
        opt.startFrom = startFrom;
      }
      if(options) {
        opt.options = options;
      }
      try {
          const ret = await PhotoViewer.show(opt);
          console.log(`in const show ret: ${JSON.stringify(ret)}`);
          if(ret.result) {
              console.log(`in const show ret true: ${JSON.stringify(ret)}`);
              return Promise.resolve(ret);
          }
 else {
              console.log(`in const show ret false: ${JSON.stringify(ret)}`);
              return Promise.reject(ret.message);
          }
      } catch (err) {
          const ret: capShowResult = {} as capShowResult;
          ret.result = false;
          ret.message = err.message;
          console.log(`in const show catch err: ${JSON.stringify(ret)}`);
          return Promise.reject(err.message);
      }
    };
    const showToast = async (message: string) => {
      await Toast.show({
          text: message,
          position: 'center',
      });
    };

    const echo = await PhotoViewer.echo({value:'Hello from PhotoViewer'});
    console.log(`echo ${echo.value}`);
    if(!echo.value) {
      await showToast('no value to echo');
    } else {
      await showToast(`echo ${echo.value}`);
    }
    try {
      this.mode = "one";
      this.startFrom = 2;
      // **************************************
      // here you defined the different options
      // **************************************
      // uncomment the following desired lines below
      // options.title = false;
      // options.share = false;
      // options.transformer = "depth";
      // options.spancount = 2
      this.options.maxzoomscale = 3;
      this.options.compressionquality = 0.6;
      this.options.movieoptions = {mode: 'portrait', imagetime: 3};
      // **************************************
      // here you defined url or Base64 images
      // **************************************
      // comment or uncomment as you wish
      // http images call
      const result = await show(this.imageList, this.mode,
                                this.startFrom,this.options);

```

--------------------------------

### home.page.html Template

Source: https://github.com/capacitor-community/photoviewer/blob/main/docs/Ionic-Angular-Usage.md

This snippet shows how to include the photoviewer component in the HTML template of an Ionic Angular page.

```html
<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Home
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Home</ion-title>
    </ion-toolbar>
  </ion-header>

  <div id="container">
    <app-photoviewer></app-photoviewer>
  </div>
</ion-content>


```

--------------------------------

### Photoviewer Module

Source: https://github.com/capacitor-community/photoviewer/blob/main/docs/Ionic-Angular-Usage.md

The NgModule definition for the Photoviewer component, including necessary imports and declarations.

```typescript
import {
  NgModule
} from '@angular/core';
import {
  CommonModule
} from '@angular/common';
import {
  FormsModule
} from '@angular/forms';

import {
  IonicModule
} from '@ionic/angular';

import {
  PhotoviewerComponent
} from './photoviewer.component';

@NgModule({
  imports: [ CommonModule, FormsModule, IonicModule],
  declarations: [PhotoviewerComponent],
  exports: [PhotoviewerComponent]
})
export class PhotoviewerComponentModule {}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.