bugfix: use thumbnail in modal view list (#8)

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.2.2] - 2025-01-15
+
+### Bugfix
+
+- fixed issue with using original image instead of thumbnail in modal view list
+
 ## [1.2.1] - 2025-01-15
 
 ### Bugfix

projects/ngx-simple-gallery/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-simple-gallery",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "Simple Angular Gallery",
   "author": "Zoltan Magyar <[email protected]> (https://github.com/zolcsi)",
   "homepage": "https://github.com/zolcsi/ngx-simple-gallery",

projects/ngx-simple-gallery/src/lib/ngx-simple-gallery.component.html

@@ -1,8 +1,8 @@
 <div class="gallery-wrapper">
-  @for (image of items(); track image.src; let i = $index) {
+  @for (item of items(); track item.src; let i = $index) {
     <div role="presentation" class="thumbnail-wrapper" (click)="openDialog(i)">
       <img class="thumbnail-image"
-           [src]="image.thumbnail ?? image.src"
+           [src]="item.thumbnail ?? item.src"
            [width]="thumbnailSize()"
            [height]="thumbnailSize()"
            [alt]="'Gallery image ' + i" />

projects/ngx-simple-gallery/src/lib/thumbnail-list/thumbnail-list.component.html

@@ -4,7 +4,7 @@
       <img class="thumbnail-item"
            role="presentation"
            [ngClass]="{'selected': selectedItemIndex() === i}"
-           [src]="item.src"
+           [src]="item.thumbnail ?? item.src"
            [alt]="'Gallery image ' + i"
            (click)="selectItem(i)"
            (load)="itemLoaded()" />

src/app/app.component.ts

@@ -53,12 +53,21 @@ export class AppComponent {
     { src: 'img/image4.jpg' },
     { src: 'img/image5.jpg' },
     { src: 'img/image6.jpg' },
-    { src: 'img/image7.jpg' },
-    { src: 'img/image8.jpg' },
-    { src: 'img/image9.jpg' },
-    { src: 'img/image10.jpg' },
-    { src: 'img/image11.jpg' },
-    { src: 'img/image12.jpg' },
-    { src: 'img/image13.jpg' },
+    {
+      src: 'https://picsum.photos/id/110/800/1200',
+      thumbnail: 'https://picsum.photos/id/110/160/160',
+    },
+    {
+      src: 'https://picsum.photos/id/118/1200/1800',
+      thumbnail: 'https://picsum.photos/id/118/160/160',
+    },
+    {
+      src: 'https://picsum.photos/id/121/800/1200',
+      thumbnail: 'https://picsum.photos/id/121/160/160',
+    },
+    {
+      src: 'https://picsum.photos/id/122/800/1200',
+      thumbnail: 'https://picsum.photos/id/122/160/160',
+    },
   ];
 }