Skip to content

Commit

Permalink
added gallery
Browse files Browse the repository at this point in the history
  • Loading branch information
@imayushsaini
imayushsaini committed Jul 14, 2023
1 parent 48ea12d commit 2c4b4bd
Show file tree
Hide file tree
Showing 6 changed files with 221 additions and 20 deletions.
9 changes: 9 additions & 0 deletions src/app/app-routing.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,15 @@ const routes: Routes = [
description:"Support US !",
ogUrl:'https://bombsquad-community.web.app/support'
}
},{
path:'gallery',
loadChildren:() => import ('./pages/gallery/gallery.component').then(m => m.GalleryModule),

data:{
title:'Gallery | BobmSquad',
description:"Amazing Picture Collection of Bombsquad",
ogUrl:'https://bombsquad-community.web.app/gallery'
}
},
{path:'**',redirectTo:'home'}
];
Expand Down
23 changes: 23 additions & 0 deletions src/app/pages/gallery/gallery.component.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<section class="gallery-main" style="background-color: black;padding-bottom:20px">
<h1>BombSquad Gallery</h1>
<div class="images">
<div class="load-more">

<mat-icon (click)="scrollUp()" *ngIf="startPoint!=0">keyboard_arrow_up</mat-icon>
</div>
<div class="gallery">
<div *ngFor="let image of currentimages" class="gallery-item">
<img [src]="CDN+image.url" [alt]="image.alt" (click)="openOverlay(image)" loading="lazy">
</div>
</div>
<div class="load-more">
<mat-icon (click)="scrollDown()" *ngIf="endPoint!= images.length">keyboard_arrow_down</mat-icon>
</div>
</div>
<div class="overlay" *ngIf="showOverlay">
<div class="overlay-content">
<img [src]="CDN+selectedImage.url" [alt]="selectedImage.alt">
<span class="close-btn" (click)="closeOverlay()">&times;</span>
</div>
</div>
</section>
85 changes: 85 additions & 0 deletions src/app/pages/gallery/gallery.component.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
h1 {
color: white;
text-align: center;
}
.gallery-main {
min-height: 80vh;
padding-top: 2rem;
}
.gallery {
display: grid;
min-height: 70vh;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-auto-rows: auto;
grid-gap: 10px;
}

.gallery-item {
display: flex;
justify-content: center;
align-items: center;
}

.gallery-item img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
cursor: pointer;
}

.load-more {
width: 100%;
display: flex;
justify-content: center;
}
mat-icon {
transform: scale(3);
color: white;
margin: 2rem;
cursor: pointer;
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
display: flex;
justify-content: center;
align-items: center;
z-index: 999;
overflow: auto;
}

.overlay-content {
position: relative;
max-width: 90%;
max-height: 90%;
display: flex;
justify-content: center;
align-items: center;
}
.overlay-content img {
display: block;
max-width: 100%;
max-height: 100%;
margin: 0 auto;
}

.close-btn {
position: absolute;
top: 10px;
right: 10px;
color: #fff;
font-size: 28px;
background-color: black;
padding: 14px;
cursor: pointer;
}
@media only screen and (max-width: 768px) {
/* For mobile phones: */
.gallery {
grid-template-columns: repeat(2, 1fr);
}
}
84 changes: 84 additions & 0 deletions src/app/pages/gallery/gallery.component.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
import { Component, NgModule, OnInit } from "@angular/core";
import { ActivatedRoute, RouterModule, Routes } from "@angular/router";
import { SEOServiceService } from "src/app/services/seoservice.service";
import {MatButtonModule} from '@angular/material/button';
import { HttpClient } from "@angular/common/http";
import { CommonModule } from "@angular/common";
import { MatIconModule } from '@angular/material/icon';
import { images } from './image_map';
@Component({
selector: 'app-Gallery',
templateUrl: './gallery.component.html',
styleUrls: ['./gallery.component.scss']
})
export class GalleryComponent implements OnInit {
images: { url: string; alt: string; }[] = images;

currentimages:{ url: string, alt: string }[] = this.images.slice(0, 12);
startPoint = 0;
endPoint = 12;
showOverlay = false;
selectedImage!: { url: string; alt: string; };
CDN = "https://scintillating-creponne-d386aa.netlify.app";
constructor(private http: HttpClient, private _seoService: SEOServiceService, private activatedRoute: ActivatedRoute) { }

ngOnInit(): void {
var rt = this.getChild(this.activatedRoute)
rt.data.subscribe((data: any) => {
this._seoService.updateTitle(data.title);
this._seoService.updateOgUrl(data.ogUrl);
//Updating Description tag dynamically with title
this._seoService.updateDescription(data.description)
});
}
getChild(activatedRoute: ActivatedRoute):any {
if (activatedRoute.firstChild) {
return this.getChild(activatedRoute.firstChild);
} else {
return activatedRoute;
}
}
scrollUp() {
this.startPoint -= 8;
this.endPoint -= 8;
if (this.startPoint < 0) {
this.startPoint = 0;
this.endPoint = 12;
}
this.currentimages = this.images.slice(this.startPoint, this.endPoint);
}
scrollDown() {
this.startPoint += 8;
this.endPoint += 8;
if (this.endPoint > this.images.length) {
this.endPoint = this.images.length;
this.startPoint = this.endPoint - 12;
}

this.currentimages = this.images.slice(this.startPoint, this.endPoint);

}
openOverlay(image: { url: string, alt: string }) {
this.selectedImage = image;
this.showOverlay = true;
}
closeOverlay() {
this.showOverlay = false;
}
}

const routes: Routes = [{path: '', component: GalleryComponent}];

@NgModule({
imports: [
CommonModule,
RouterModule.forChild(routes),
MatButtonModule,
MatIconModule
],
exports: [GalleryComponent],
declarations: [GalleryComponent],
providers: []
})
export class GalleryModule {
}
2 changes: 2 additions & 0 deletions src/app/pages/gallery/image_map.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@

export const images = [{"url": "/construction/IMG_0043.webp", "alt": "IMG_0043.webp"}, {"url": "/construction/IMG_0083.webp", "alt": "IMG_0083.webp"}, {"url": "/construction/IMG_0087.webp", "alt": "IMG_0087.webp"}, {"url": "/construction/IMG_0210.webp", "alt": "IMG_0210.webp"}, {"url": "/construction/IMG_0261.webp", "alt": "IMG_0261.webp"}, {"url": "/construction/IMG_0275.webp", "alt": "IMG_0275.webp"}, {"url": "/construction/IMG_0355.webp", "alt": "IMG_0355.webp"}, {"url": "/construction/IMG_0357.webp", "alt": "IMG_0357.webp"}, {"url": "/construction/IMG_0371.webp", "alt": "IMG_0371.webp"}, {"url": "/construction/IMG_0374.webp", "alt": "IMG_0374.webp"}, {"url": "/construction/IMG_0599.webp", "alt": "IMG_0599.webp"}, {"url": "/construction/IMG_0661.webp", "alt": "IMG_0661.webp"}, {"url": "/construction/IMG_0662.webp", "alt": "IMG_0662.webp"}, {"url": "/construction/IMG_0669.webp", "alt": "IMG_0669.webp"}, {"url": "/construction/IMG_0671.webp", "alt": "IMG_0671.webp"}, {"url": "/construction/IMG_0674.webp", "alt": "IMG_0674.webp"}, {"url": "/construction/IMG_0677.webp", "alt": "IMG_0677.webp"}, {"url": "/construction/IMG_0687.webp", "alt": "IMG_0687.webp"}, {"url": "/construction/IMG_0704.webp", "alt": "IMG_0704.webp"}, {"url": "/construction/IMG_0705.webp", "alt": "IMG_0705.webp"}, {"url": "/construction/IMG_0742.webp", "alt": "IMG_0742.webp"}, {"url": "/construction/IMG_0745.webp", "alt": "IMG_0745.webp"}, {"url": "/construction/IMG_0756.webp", "alt": "IMG_0756.webp"}, {"url": "/construction/IMG_0757.webp", "alt": "IMG_0757.webp"}, {"url": "/construction/IMG_0757202.webp", "alt": "IMG_0757202.webp"}, {"url": "/construction/IMG_0758.webp", "alt": "IMG_0758.webp"}, {"url": "/construction/IMG_0763.webp", "alt": "IMG_0763.webp"}, {"url": "/construction/IMG_0774.webp", "alt": "IMG_0774.webp"}, {"url": "/construction/IMG_0790.webp", "alt": "IMG_0790.webp"}, {"url": "/construction/IMG_0793.webp", "alt": "IMG_0793.webp"}, {"url": "/construction/IMG_0799.webp", "alt": "IMG_0799.webp"}, {"url": "/construction/IMG_0801.webp", "alt": "IMG_0801.webp"}, {"url": "/construction/IMG_0807.webp", "alt": "IMG_0807.webp"}, {"url": "/construction/IMG_0808.webp", "alt": "IMG_0808.webp"}, {"url": "/construction/IMG_0811.webp", "alt": "IMG_0811.webp"}, {"url": "/construction/IMG_0813.webp", "alt": "IMG_0813.webp"}, {"url": "/construction/IMG_0817.webp", "alt": "IMG_0817.webp"}, {"url": "/construction/IMG_0820.webp", "alt": "IMG_0820.webp"}, {"url": "/construction/IMG_0821.webp", "alt": "IMG_0821.webp"}, {"url": "/construction/IMG_0822.webp", "alt": "IMG_0822.webp"}, {"url": "/construction/IMG_0829.webp", "alt": "IMG_0829.webp"}, {"url": "/construction/IMG_0830.webp", "alt": "IMG_0830.webp"}, {"url": "/construction/IMG_0830202.webp", "alt": "IMG_0830202.webp"}, {"url": "/construction/IMG_0832.webp", "alt": "IMG_0832.webp"}, {"url": "/construction/IMG_0834.webp", "alt": "IMG_0834.webp"}, {"url": "/construction/IMG_0835.webp", "alt": "IMG_0835.webp"}, {"url": "/construction/IMG_0837.webp", "alt": "IMG_0837.webp"}, {"url": "/construction/IMG_0839.webp", "alt": "IMG_0839.webp"}, {"url": "/construction/IMG_0840.webp", "alt": "IMG_0840.webp"}, {"url": "/construction/IMG_0845.webp", "alt": "IMG_0845.webp"}, {"url": "/construction/IMG_0846.webp", "alt": "IMG_0846.webp"}, {"url": "/construction/IMG_0850.webp", "alt": "IMG_0850.webp"}, {"url": "/construction/IMG_0851.webp", "alt": "IMG_0851.webp"}, {"url": "/construction/IMG_0856.webp", "alt": "IMG_0856.webp"}, {"url": "/construction/IMG_0857.webp", "alt": "IMG_0857.webp"}, {"url": "/construction/IMG_0876.webp", "alt": "IMG_0876.webp"}, {"url": "/construction/IMG_0887.webp", "alt": "IMG_0887.webp"}, {"url": "/construction/IMG_0888.webp", "alt": "IMG_0888.webp"}, {"url": "/construction/IMG_0889.webp", "alt": "IMG_0889.webp"}, {"url": "/construction/IMG_0890.webp", "alt": "IMG_0890.webp"}, {"url": "/construction/IMG_0890202.webp", "alt": "IMG_0890202.webp"}, {"url": "/construction/IMG_0893.webp", "alt": "IMG_0893.webp"}, {"url": "/construction/IMG_0896.webp", "alt": "IMG_0896.webp"}, {"url": "/construction/IMG_0897.webp", "alt": "IMG_0897.webp"}, {"url": "/construction/IMG_0897202.webp", "alt": "IMG_0897202.webp"}, {"url": "/construction/IMG_0898.webp", "alt": "IMG_0898.webp"}, {"url": "/construction/IMG_0899.webp", "alt": "IMG_0899.webp"}, {"url": "/construction/IMG_0900.webp", "alt": "IMG_0900.webp"}, {"url": "/construction/IMG_0901.webp", "alt": "IMG_0901.webp"}, {"url": "/construction/IMG_0917.webp", "alt": "IMG_0917.webp"}, {"url": "/construction/IMG_0919.webp", "alt": "IMG_0919.webp"}, {"url": "/construction/IMG_0921.webp", "alt": "IMG_0921.webp"}, {"url": "/construction/IMG_0923.webp", "alt": "IMG_0923.webp"}, {"url": "/construction/IMG_0978.webp", "alt": "IMG_0978.webp"}, {"url": "/construction/IMG_1023.webp", "alt": "IMG_1023.webp"}, {"url": "/construction/IMG_1032.webp", "alt": "IMG_1032.webp"}, {"url": "/construction/IMG_1201.webp", "alt": "IMG_1201.webp"}, {"url": "/construction/IMG_1364.webp", "alt": "IMG_1364.webp"}, {"url": "/construction/IMG_1364202.webp", "alt": "IMG_1364202.webp"}, {"url": "/construction/IMG_1366.webp", "alt": "IMG_1366.webp"}, {"url": "/construction/IMG_1366202.webp", "alt": "IMG_1366202.webp"}, {"url": "/construction/IMG_1371.webp", "alt": "IMG_1371.webp"}, {"url": "/construction/IMG_1371202.webp", "alt": "IMG_1371202.webp"}, {"url": "/construction/IMG_1374.webp", "alt": "IMG_1374.webp"}, {"url": "/construction/IMG_1375.webp", "alt": "IMG_1375.webp"}, {"url": "/construction/IMG_1377.webp", "alt": "IMG_1377.webp"}, {"url": "/construction/IMG_1380.webp", "alt": "IMG_1380.webp"}, {"url": "/construction/IMG_1380202.webp", "alt": "IMG_1380202.webp"}, {"url": "/construction/IMG_1381.webp", "alt": "IMG_1381.webp"}, {"url": "/construction/IMG_1382.webp", "alt": "IMG_1382.webp"}, {"url": "/construction/IMG_1383.webp", "alt": "IMG_1383.webp"}, {"url": "/construction/IMG_1384.webp", "alt": "IMG_1384.webp"}, {"url": "/construction/IMG_1393.webp", "alt": "IMG_1393.webp"}, {"url": "/construction/IMG_1395.webp", "alt": "IMG_1395.webp"}, {"url": "/construction/IMG_1397.webp", "alt": "IMG_1397.webp"}, {"url": "/construction/IMG_1401.webp", "alt": "IMG_1401.webp"}, {"url": "/construction/IMG_1403.webp", "alt": "IMG_1403.webp"}, {"url": "/construction/IMG_1408.webp", "alt": "IMG_1408.webp"}, {"url": "/construction/IMG_1408202.webp", "alt": "IMG_1408202.webp"}, {"url": "/construction/IMG_1426.webp", "alt": "IMG_1426.webp"}, {"url": "/construction/IMG_1428.webp", "alt": "IMG_1428.webp"}, {"url": "/construction/IMG_1429.webp", "alt": "IMG_1429.webp"}, {"url": "/construction/IMG_1430.webp", "alt": "IMG_1430.webp"}, {"url": "/construction/IMG_1440.webp", "alt": "IMG_1440.webp"}, {"url": "/construction/IMG_1441.webp", "alt": "IMG_1441.webp"}, {"url": "/construction/IMG_144102.webp", "alt": "IMG_144102.webp"}, {"url": "/construction/IMG_1443.webp", "alt": "IMG_1443.webp"}, {"url": "/construction/IMG_1457.webp", "alt": "IMG_1457.webp"}, {"url": "/construction/IMG_1457202.webp", "alt": "IMG_1457202.webp"}, {"url": "/construction/IMG_1462.webp", "alt": "IMG_1462.webp"}, {"url": "/construction/IMG_1462202.webp", "alt": "IMG_1462202.webp"}, {"url": "/construction/IMG_1472.webp", "alt": "IMG_1472.webp"}, {"url": "/construction/IMG_1472202.webp", "alt": "IMG_1472202.webp"}, {"url": "/construction/IMG_1474.webp", "alt": "IMG_1474.webp"}, {"url": "/construction/IMG_1474202.webp", "alt": "IMG_1474202.webp"}, {"url": "/construction/IMG_1485.webp", "alt": "IMG_1485.webp"}, {"url": "/construction/IMG_1498.webp", "alt": "IMG_1498.webp"}, {"url": "/construction/IMG_1499.webp", "alt": "IMG_1499.webp"}, {"url": "/construction/IMG_1502.webp", "alt": "IMG_1502.webp"}, {"url": "/construction/IMG_1906.webp", "alt": "IMG_1906.webp"}, {"url": "/construction/IMG_1907.webp", "alt": "IMG_1907.webp"}, {"url": "/construction/IMG_1908.webp", "alt": "IMG_1908.webp"}, {"url": "/construction/IMG_1909.webp", "alt": "IMG_1909.webp"}, {"url": "/construction/IMG_1910.webp", "alt": "IMG_1910.webp"}, {"url": "/construction/IMG_1946.webp", "alt": "IMG_1946.webp"}, {"url": "/construction/IMG_1951.webp", "alt": "IMG_1951.webp"}, {"url": "/construction/IMG_1954.webp", "alt": "IMG_1954.webp"}, {"url": "/construction/IMG_1955.webp", "alt": "IMG_1955.webp"}, {"url": "/construction/IMG_1958.webp", "alt": "IMG_1958.webp"}, {"url": "/construction/IMG_1960.webp", "alt": "IMG_1960.webp"}, {"url": "/construction/IMG_1988.webp", "alt": "IMG_1988.webp"}, {"url": "/construction/IMG_2008.webp", "alt": "IMG_2008.webp"}, {"url": "/construction/IMG_2028.webp", "alt": "IMG_2028.webp"}, {"url": "/construction/IMG_2031.webp", "alt": "IMG_2031.webp"}, {"url": "/construction/IMG_2032.webp", "alt": "IMG_2032.webp"}, {"url": "/construction/IMG_2033.webp", "alt": "IMG_2033.webp"}, {"url": "/construction/IMG_2043.webp", "alt": "IMG_2043.webp"}, {"url": "/construction/IMG_2044.webp", "alt": "IMG_2044.webp"}, {"url": "/construction/IMG_2069.webp", "alt": "IMG_2069.webp"}, {"url": "/construction/IMG_2088.webp", "alt": "IMG_2088.webp"}, {"url": "/construction/IMG_2090.webp", "alt": "IMG_2090.webp"}, {"url": "/construction/IMG_2118.webp", "alt": "IMG_2118.webp"}, {"url": "/construction/IMG_2119.webp", "alt": "IMG_2119.webp"}, {"url": "/construction/IMG_2134.webp", "alt": "IMG_2134.webp"}, {"url": "/construction/IMG_2171.webp", "alt": "IMG_2171.webp"}, {"url": "/construction/IMG_2187.webp", "alt": "IMG_2187.webp"}, {"url": "/construction/IMG_2189.webp", "alt": "IMG_2189.webp"},{"url": "/construction/BombSquadBannerAlt.webp", "alt": "BombSquadBannerAlt.webp"}, {"url": "/construction/BombSquadBannerAltChinese.webp", "alt": "BombSquadBannerAltChinese.webp"}, {"url": "/construction/bombsquadBannerChinese.webp", "alt": "bombsquadBannerChinese.webp"}, {"url": "/construction/bombsquadBannerChinese732x480.webp", "alt": "bombsquadBannerChinese732x480.webp"}, {"url": "/construction/bombsquadBanner_732_480.webp", "alt": "bombsquadBanner_732_480.webp"}, {"url": "/construction/BombSquadCharacterOutline.webp", "alt": "BombSquadCharacterOutline.webp"}, {"url": "/construction/BombSquadIcon.webp", "alt": "BombSquadIcon.webp"}, {"url": "/construction/BombSquadIconSquareCorners.webp", "alt": "BombSquadIconSquareCorners.webp"}, {"url": "/construction/BombSquadLogo.webp", "alt": "BombSquadLogo.webp"}, {"url": "/construction/BombSquadLogo2.webp", "alt": "BombSquadLogo2.webp"}, {"url": "/construction/BombSquadLogo24.webp", "alt": "BombSquadLogo24.webp"}, {"url": "/construction/BombSquadLogoBW.webp", "alt": "BombSquadLogoBW.webp"}, {"url": "/construction/BombSquadLogoNoBack.webp", "alt": "BombSquadLogoNoBack.webp"}, {"url": "/construction/BombSquadTitleBW.webp", "alt": "BombSquadTitleBW.webp"}, {"url": "/construction/BombSquadTitleFull.webp", "alt": "BombSquadTitleFull.webp"}, {"url": "/construction/BombSquadTitleFullChinese.webp", "alt": "BombSquadTitleFullChinese.webp"}, {"url": "/construction/ctf.webp", "alt": "ctf.webp"}, {"url": "/construction/football.webp", "alt": "football.webp"}, {"url": "/construction/happyThoughts.webp", "alt": "happyThoughts.webp"}, {"url": "/construction/hockey.webp", "alt": "hockey.webp"}, {"url": "/construction/IconBig.webp", "alt": "IconBig.webp"}, {"url": "/construction/keepaway.webp", "alt": "keepaway.webp"}, {"url": "/construction/levelConstruction3.webp", "alt": "levelConstruction3.webp"}, {"url": "/construction/levelConstruction4.webp", "alt": "levelConstruction4.webp"}, {"url": "/construction/onslaught.webp", "alt": "onslaught.webp"}, {"url": "/construction/promo.webp", "alt": "promo.webp"}, {"url": "/construction/promo_square.webp", "alt": "promo_square.webp"}, {"url": "/construction/race.webp", "alt": "race.webp"}, {"url": "/construction/Runaround.webp", "alt": "Runaround.webp"}, {"url": "/construction/stepRightUp.webp", "alt": "stepRightUp.webp"}]
Loading

0 comments on commit 2c4b4bd

Please sign in to comment.