import { Component, OnInit, ElementRef } from '@angular/core';
declare var JQuery : any;
@Component({
selector: 'app-presentation',
templateUrl: './presentation.component.html',
styleUrls: ['./presentation.component.scss']
})
export class PresentationComponent implements OnInit {
public count=0;
public imgUrl ='http://192.168.1.90:8080/pdf/temp';
constructor( public _eleRef : ElementRef ) {
this.count=0
this.imgUrl='http://192.168.1.90:8080/pdf/temp'+this.count+".jpg"
}
ngOnInit() {
jQuery(this._eleRef.nativeElement).find('#Fullscreen').on('click',function(){
jQuery('#exampleImage').width(jQuery(window).width());
jQuery('#exampleImage').height(jQuery(window).height());
});
}
back(){this.count--;
if(this.count>=0 && this.count<13){
this.imgUrl='http://192.168.1.90:8080/pdf/temp'+this.count+".jpg"
}
else{
this.count++;
}
}
next(){this.count++;
if(this.count>=0 && this.count<13){
this.imgUrl='http://192.168.1.90:8080/pdf/temp'+this.count+".jpg"
}
else{
this.count--;
}
}
}.slide-control {
z-index: 5;
background-color: #323232;
overflow: hidden;
border: 0;
padding: 0;
width: 100%;
color: #fff;
font-size: 13px;
max-height: 56px;
min-height: 50px;
///text-align: center;
}
.control {
font-size: 20px;
padding: 10px;
cursor: pointer;
}
.slide-control #fullscreen {
float: right !important;
}
.imageArea {
background-color: #e5e5e5;
border: 1px inset #323232;
}<div class="row imageArea">
<div class="mx-auto">
<img [src]="imgUrl" id="exampleImage" class="img-fluid" alt="Responsive image">
</div>
<div class="slide-control form-inline">
<div class="mx-auto">
<span class="control" (click)="back(count)"><i class="fa fa-arrow-left" aria-hidden="true"></i></span>
<span>{{count+1}} / 13</span>
<span class="control" (click)="next(count)"><i class="fa fa-arrow-right" aria-hidden="true"></i></span>
</div>
<div class="fullscreen float-right">
<span class="control" id="Fullscreen"><i class="fa fa-arrows-alt text-right" aria-hidden="true"></i></span>
</div>
</div>
</div>hello, I am developing my own presentation viewer using Angular 2. I have implemented a fullscreen button that zooms the image to the size of the container when clicked. However, I would like to make this button toggleable. This means that when clicked again, it should display the zoomed image in its original size, as it was when the page loaded initially.