fullscreen images on click ionic4

Question

I'm looking to make a live go fullscreen when I click on it, but I did not succeed to find any tutorial that matches my specific case... I tried to use javascript but did not succeed :/ so my home.page.ts is empty, but here is my HTML code:

<ion-content>
  <ion-grid>
    <ion-row>
      <ion-col>
          <button >
          <ion-card color="dark" >
              <ion-card-header>
                  <b>Parking</b>
              </ion-card-header>     
              <ion-card-content>
                  <img id="img" width="250" height="160" src="http://131.173.8.23:80/mjpg/video.mjpg"/>
              </ion-card-content>
            </ion-card>
          </button>
      </ion-col>
      <ion-col>
          <button>
          <ion-card color="dark">
              <ion-card-header>
                  <b>Hall</b>
              </ion-card-header>     
              <ion-card-content>
                  <img width="250" height="160" src="http://131.95.3.162:80/mjpg/video.mjpg"/>
              </ion-card-content>
            </ion-card>
            </button>
      </ion-col>
      <ion-col>
          <button>
          <ion-card color="dark">
              <ion-card-header>
                  <b>Accueil</b>
              </ion-card-header>     
              <ion-card-content>
                  <img width="250" height="160" src="http://84.87.238.54:80/SnapshotJPEG?Resolution=640x480&amp;Quality=Clarity&amp;0"/>
              </ion-card-content>
            </ion-card>
            </button>
      </ion-col>          
    </ion-row>
  </ion-grid>
</ion-content>

you're gonna need js to do that. I think you need to add and remove a css class on your images with each click — , Nov 18 '19 at 23:52

score 1 · Answer 1 · edited Nov 17 '20 at 17:11

1

If you want to display an image full screen when clicked you can use the ionic plugin Photo Viewer. It also adds the ability to pan, zoom, and share the image.

edited Nov 17 '20 at 17:11

leonheess

16,068
14
77
112

answered Nov 18 '19 at 23:37

dzallger

11
1

hi ! thank you for your answer ! unfortunately i tried this plugin and since i'm willing to use .mjpg files it dosent fit :/ – delouisiano Nov 19 '19 at 08:47

score 0 · Answer 2 · answered Nov 19 '19 at 07:03

Try this code. I hope it will helps you.

HTML:

  <ion-content>
    <div class="ion-padding">
        <ion-row>
            <ion-col>
                <button>
          <ion-card color="dark">
            <ion-card-header>
              <b>Parking</b>
            </ion-card-header>
            <ion-card-content>
              <img id="img" width="250" height="160"
                src="https://images.pexels.com/photos/326055/pexels-photo-326055.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
                (click)="clickImage('https://images.pexels.com/photos/326055/pexels-photo-326055.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500')" />
            </ion-card-content>
          </ion-card>
        </button>
            </ion-col>
            <ion-col>
                <button>
          <ion-card color="dark">
            <ion-card-header>
              <b>Accueil</b>
            </ion-card-header>
            <ion-card-content>
              <img width="250" height="160"
                src="https://images.unsplash.com/photo-1541233349642-6e425fe6190e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80://84.87.238.54:80/SnapshotJPEG?Resolution=640x480&amp;Quality=Clarity&amp;0"
                (click)="clickImage('https://images.unsplash.com/photo-1541233349642-6e425fe6190e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80://84.87.238.54:80/SnapshotJPEG?Resolution=640x480&amp;Quality=Clarity&amp;0')" />
            </ion-card-content>
          </ion-card>
        </button>
            </ion-col>
        </ion-row>
    </div>

TS:

import { Component } from '@angular/core';
import { PhotoViewer } from '@ionic-native/photo-viewer/ngx';
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor(private photoViewer: PhotoViewer) {}

  clickImage(image){
    console.log("image clicked",image);
    this.photoViewer.show(image);
  }

}

hi ! thank you for your answer ! as i said a little bit higher, this plugin doesn't woked for me, i'm using .mjpg files, wich are a sequence of pictures, but not a video... so images viewers don't work, neither video players (at least i fdidn't find one) — delouisiano, Nov 19 '19 at 08:52
then maybe try doing something on the canvas yourself. You can check this answer as well. https://stackoverflow.com/questions/13500558/motion-jpeg-in-html5-canvas — Monomachus, Nov 19 '19 at 14:49

fullscreen images on click ionic4

2 Answers2