diff --git a/package-lock.json b/package-lock.json index ed4d5e1..59381da 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,6 +17,7 @@ "@angular/platform-browser": "^16.1.5", "@angular/platform-browser-dynamic": "^16.1.5", "@angular/router": "^16.1.5", + "@fortawesome/fontawesome-free": "^6.4.2", "@ngrx/store": "^16.0.0", "bootstrap": "^5.3.0", "rxjs": "~7.5.0", @@ -2756,6 +2757,15 @@ "node": ">=12" } }, + "node_modules/@fortawesome/fontawesome-free": { + "version": "6.4.2", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.4.2.tgz", + "integrity": "sha512-m5cPn3e2+FDCOgi1mz0RexTUvvQibBebOUlUlW0+YrMjDTPkiJ6VTKukA1GRsvRw+12KyJndNjj0O4AgTxm2Pg==", + "hasInstallScript": true, + "engines": { + "node": ">=6" + } + }, "node_modules/@isaacs/cliui": { "version": "8.0.2", "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz", @@ -13341,6 +13351,11 @@ "dev": true, "optional": true }, + "@fortawesome/fontawesome-free": { + "version": "6.4.2", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.4.2.tgz", + "integrity": "sha512-m5cPn3e2+FDCOgi1mz0RexTUvvQibBebOUlUlW0+YrMjDTPkiJ6VTKukA1GRsvRw+12KyJndNjj0O4AgTxm2Pg==" + }, "@isaacs/cliui": { "version": "8.0.2", "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz", diff --git a/package.json b/package.json index 5afa8dd..f65cbb2 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "@angular/platform-browser": "^16.1.5", "@angular/platform-browser-dynamic": "^16.1.5", "@angular/router": "^16.1.5", + "@fortawesome/fontawesome-free": "^6.4.2", "@ngrx/store": "^16.0.0", "bootstrap": "^5.3.0", "rxjs": "~7.5.0", diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index e7d59f4..f289ea8 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -1,9 +1,11 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { PageComponent } from './pages/page/page.component'; +import { TestGalleryComponent } from './pages/test-gallery/test-gallery.component'; const routes: Routes = [ - { path: 'page/:id', component: PageComponent } + { path: 'page/:id', component: PageComponent }, + { path: 'test_gallery', component: TestGalleryComponent }, ]; @NgModule({ diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 251d80f..0aa3823 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -13,6 +13,9 @@ import { ButtonComponent } from './components/button/button.component'; import { WorkshoplistComponent } from './workshoplist/workshoplist.component'; import { TimeplanComponent } from './timeplan/timeplan.component'; import { GalleryComponent } from './gallery/gallery.component'; +import { TestGalleryComponent } from './pages/test-gallery/test-gallery.component'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; + @@ -25,11 +28,13 @@ import { GalleryComponent } from './gallery/gallery.component'; HeadermenuComponent, PageComponent, ButtonComponent, + TestGalleryComponent, ], imports: [ BrowserModule, HttpClientModule, - AppRoutingModule + AppRoutingModule, + BrowserAnimationsModule ], providers: [], bootstrap: [AppComponent] diff --git a/src/app/gallery/gallery.component.html b/src/app/gallery/gallery.component.html index dd5181a..6d56f04 100644 --- a/src/app/gallery/gallery.component.html +++ b/src/app/gallery/gallery.component.html @@ -1,10 +1,27 @@ -

Galerie mit {{ galleryData.columns }} Bildern pro Zeile

- - - + + + +
+ +
+
+ {{currentLightboxImageIndex + 1}}/{{totalImagesCount}} + + + + +
+ +
+
+
\ No newline at end of file diff --git a/src/app/gallery/gallery.component.scss b/src/app/gallery/gallery.component.scss index 5adaecc..c0aa296 100644 --- a/src/app/gallery/gallery.component.scss +++ b/src/app/gallery/gallery.component.scss @@ -1,37 +1,130 @@ -.gallery { - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: space-around; - align-items: center; - align-content: space-between; - margin-bottom: 24px; - - a { +@import "@fortawesome/fontawesome-free/css/all.css"; + +:host { + display: block; + text-align: center; + .gallery { display: flex; - flex: 0 0 auto; - width: 25%; - padding: 10px; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-around; + align-items: center; + align-content: space-between; + margin-bottom: 24px; - img { + a { display: flex; - flex: 1 0 auto; + flex: 0 0 auto; + width: 25%; + padding: 10px; + + img { + display: flex; + flex: 1 0 auto; + } } - } - &.columns-1 a { - width: 100%; - } + &.columns-1 a { + width: 100%; + } - &.columns-2 a { - width: 50%; - } + &.columns-2 a { + width: 50%; + } + + &.columns-3 a { + width: 33.3333333%; + } - &.columns-3 a { - width: 33.3333333%; + &.columns-4 a { + width: 25%; + } } - &.columns-4 a { - width: 25%; + .gallery-lightbox-container { + width: 100%; + max-width: 1000px; + margin: 0 auto; + + .lightbox { + display: flex; + align-items: center; + justify-content: center; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(#000000, 0.8); + } + .lightbox-img img { + max-width: 70%; + height: auto; + } + .count { + position: absolute; + top: 0; + left: 0; + width: 7%; + height: 10%; + color: #fff; + opacity: 0.4; + font-size: 2rem; + display: flex; + justify-content: center; + align-items: center; + margin-left: 5px; + } + + .close-btn { + position: absolute; + top: 0; + right: 0; + padding: 0; + color: #fff; + background: 0 0; + border: 0; + cursor: pointer; + width: 7%; + height: 10%; + z-index: 2; + font-size: 2rem; + } + .btn-carousel { + position: absolute; + display: flex; + justify-content: center; + align-items: center; + z-index: 1; + width: 8%; + height: 8%; + color: #fff; + padding: 0; + font-size: 2rem; + text-align: center; + background: 0 0; + border: 0; + } + .btn-lightbox-prev { + left: 0; + } + .btn-lightbox-next { + right: 0; + } + .i-carousel { + color: #fff; + opacity: 0.45; + transition: all 0.3s ease-in-out; + &:hover { + opacity: 0.9; + } + &:active { + opacity: 0.5; + } + .i-prev, + .i-next { + font-size: 2rem; + } + } } } diff --git a/src/app/gallery/gallery.component.ts b/src/app/gallery/gallery.component.ts index 4e586c5..6141a2d 100644 --- a/src/app/gallery/gallery.component.ts +++ b/src/app/gallery/gallery.component.ts @@ -1,20 +1,96 @@ +import { animate, style, transition, trigger } from '@angular/animations'; import { Component, Input } from '@angular/core'; - @Component({ selector: 'dd-gallery', templateUrl: './gallery.component.html', - styleUrls: ['./gallery.component.scss'] + styleUrls: ['./gallery.component.scss'], + }) + export class GalleryComponent { + [x: string]: any; - @Input() galleryData : GalleryData; + @Input() galleryData: GalleryData = { + previews: [], + links: [], + columns: 0, + alttexts: [] + }; @Input() public set galleryjson(value: string) { this.galleryData = JSON.parse(value) as GalleryData; } + + previewImages = false; + showMask = false; + currentLightboxImage = this.galleryData.previews[0]; + currentLightboxImageIndex = 0; + controls = true; + totalImagesCount = 0; + alttexts = ''; + + constructor() { + this.galleryData = { + previews: [ + 'https://devday.webdesign-elbflorenz.de/wp-content/uploads/2023/07/fayette-reynolds-zmBdWQL7L4-unsplash-150x150.jpg', + 'https://devday.webdesign-elbflorenz.de/wp-content/uploads/2023/07/fayette-reynolds-4o-mbzx3TvU-unsplash-150x150.jpg', + 'https://devday.webdesign-elbflorenz.de/wp-content/uploads/2023/07/fayette-reynolds-zmBdWQL7L4-unsplash-150x150.jpg', + 'https://devday.webdesign-elbflorenz.de/wp-content/uploads/2023/07/fayette-reynolds-4o-mbzx3TvU-unsplash-150x150.jpg', + ], + links: [ + 'https://devday.webdesign-elbflorenz.de/wp-content/uploads/2023/07/fayette-reynolds-4o-mbzx3TvU-unsplash-scaled.jpg', + 'https://devday.webdesign-elbflorenz.de/wp-content/uploads/2023/07/fayette-reynolds-zmBdWQL7L4-unsplash-scaled.jpg', + 'https://devday.webdesign-elbflorenz.de/wp-content/uploads/2023/07/fayette-reynolds-4o-mbzx3TvU-unsplash-scaled.jpg', + 'https://devday.webdesign-elbflorenz.de/wp-content/uploads/2023/07/fayette-reynolds-zmBdWQL7L4-unsplash-scaled.jpg', + ], + columns: 4, + alttexts: [ + 'Image 1 Alt Text', + 'Image 2 Alt Text', + ] + }; + } + + ngOnInit(): void { + this.totalImagesCount = this.galleryData.previews.length; + } + + onPreviewClick(index: number) { + this.showMask = true; + this.previewImages = true; + this.currentLightboxImageIndex = index; + this.currentLightboxImage = this.galleryData.links[index]; + this.alttexts = this.galleryData.alttexts[index]; + } + + onAnimationDone(event: any) { + if (event.toState === 'void') { + this.showMask = false; + } + } + + onClosePreviewClick() { + this.previewImages = false; + this.showMask = false; + + } + prev(){ + if(this.currentLightboxImageIndex > 0){ + this.currentLightboxImageIndex--; + this.currentLightboxImage = this.galleryData.links[this.currentLightboxImageIndex]; + this.alttexts = this.galleryData.alttexts[this.currentLightboxImageIndex]; + } + } + next(){ + if(this.currentLightboxImageIndex < this.totalImagesCount - 1){ + this.currentLightboxImageIndex++; + this.currentLightboxImage = this.galleryData.links[this.currentLightboxImageIndex]; + this.alttexts = this.galleryData.alttexts[this.currentLightboxImageIndex]; + } + } } -interface GalleryData { +export interface GalleryData { previews: string[], links: string[], columns: number, diff --git a/src/app/pages/page/page.component.html b/src/app/pages/page/page.component.html index 11e5adb..64ed3e4 100644 --- a/src/app/pages/page/page.component.html +++ b/src/app/pages/page/page.component.html @@ -1 +1 @@ -
+
13212
diff --git a/src/app/pages/test-gallery/test-gallery.component.html b/src/app/pages/test-gallery/test-gallery.component.html new file mode 100644 index 0000000..2894a5b --- /dev/null +++ b/src/app/pages/test-gallery/test-gallery.component.html @@ -0,0 +1,7 @@ +
+

My Image Gallery

+ +
+ \ No newline at end of file diff --git a/src/app/pages/test-gallery/test-gallery.component.scss b/src/app/pages/test-gallery/test-gallery.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/pages/test-gallery/test-gallery.component.spec.ts b/src/app/pages/test-gallery/test-gallery.component.spec.ts new file mode 100644 index 0000000..a4896f9 --- /dev/null +++ b/src/app/pages/test-gallery/test-gallery.component.spec.ts @@ -0,0 +1,21 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { TestGalleryComponent } from './test-gallery.component'; + +describe('TestGalleryComponent', () => { + let component: TestGalleryComponent; + let fixture: ComponentFixture; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [TestGalleryComponent] + }); + fixture = TestBed.createComponent(TestGalleryComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/pages/test-gallery/test-gallery.component.ts b/src/app/pages/test-gallery/test-gallery.component.ts new file mode 100644 index 0000000..4d21f02 --- /dev/null +++ b/src/app/pages/test-gallery/test-gallery.component.ts @@ -0,0 +1,26 @@ +import { Component } from '@angular/core'; +import { GalleryData } from '../../gallery/gallery.component'; // Импортируйте интерфейс GalleryData + +@Component({ + selector: 'app-test-gallery', + templateUrl: './test-gallery.component.html', + styleUrls: ['./test-gallery.component.scss'] +}) +export class TestGalleryComponent { + + galleryDataMock: GalleryData = { + previews: [ + 'https://devday.webdesign-elbflorenz.de/wp-content/uploads/2023/07/fayette-reynolds-zmBdWQL7L4-unsplash-150x150.jpg', + 'https://devday.webdesign-elbflorenz.de/wp-content/uploads/2023/07/fayette-reynolds-4o-mbzx3TvU-unsplash-150x150.jpg', + ], + links: [ + 'https://devday.webdesign-elbflorenz.de/wp-content/uploads/2023/07/fayette-reynolds-4o-mbzx3TvU-unsplash-scaled.jpg', + 'https://devday.webdesign-elbflorenz.de/wp-content/uploads/2023/07/fayette-reynolds-zmBdWQL7L4-unsplash-scaled.jpg', + ], + columns: 2, + alttexts: [ + 'Image 1 Alt Text', + 'Image 2 Alt Text', + ] + }; +}