mojjj · mojjj · Feb 6, 2017 · Feb 6, 2017 · Mar 6, 2017 · Mar 6, 2017
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,14 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+max_line_length = 140
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false
diff --git a/.gitignore b/.gitignore
@@ -1,50 +1,8 @@
-# See http://help.github.com/ignore-files/ for more about ignoring files.
-
-# compiled output
 /dist
-/tmp
-/publish
-/src/app/*.js
-/src/app/demo/*.js
-/src/app/gallery/*.js
-/src/app/services/*.js
-/src/app/viewer/*.js
-
-# dependencies
 /node_modules
-tools/node_modules
-
-# IDEs and editors
 /.idea
-.project
-.classpath
-.c9/
-*.launch
-.settings/
-
-# IDE - VSCode
-.vscode/*
-!.vscode/settings.json
-!.vscode/tasks.json
-!.vscode/launch.json
-!.vscode/extensions.json
-
-# misc
-/.sass-cache
-/connect.lock
-/coverage/*
-/libpeerconnection.log
-npm-debug.log
-testem.log
-/typings
-upload-temp.sh
-upload-prod.sh
-
-# e2e
-/e2e/*.js
-/e2e/*.map
-
-#System Files
-.DS_Store
-Thumbs.db
-images_to_convert/
+/projects/angular2-image-gallery/node_modules
+.angular
+/tmp
+/backup
+/scripts/build
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,5 @@
+/dist
+/node_modules
+/.idea
+/projects/angular2-image-gallery/node_modules
+.angular
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -0,0 +1,11 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "singleQuote": true,
+  "semi": false,
+  "bracketSpacing": true,
+  "arrowParens": "always",
+  "trailingComma": "es5",
+  "bracketSameLine": true,
+  "printWidth": 140
+}
diff --git a/.travis.yml b/.travis.yml
@@ -3,19 +3,29 @@ sudo: false
 cache:
   directories:
     - node
-    - node_modules
 dist: trusty
 node_js:
-  - '7.3.0'
+  - '8.9.4'
 branches:
   only:
-  - master
+    - master
 before_install:
- - npm install -g angular-cli
+  - npm install @angular/cli
+  - npm run lib
+before_script:
+  - export DISPLAY=:99.0
+  - sh -e /etc/init.d/xvfb start
 script:
- - ng build --prod
+  - npm run build
+  - npm run e2e
 notifications:
   webhooks:
     on_success: always
     on_failure: always
-    on_start: false
+    on_start: false
+addons:
+  apt:
+    sources:
+      - google-chrome
+    packages:
+      - google-chrome-stable
diff --git a/CLAUDE.md b/CLAUDE.md
@@ -0,0 +1,47 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+Monorepo containing an Angular 21 responsive image gallery library (`angular2-image-gallery`) and its demo application. The library is published to npm and handles high-resolution image display with multi-resolution support.
+
+## Commands
+
+- **Dev server**: `npm start` (or `npm run start-net` for network access)
+- **Build library**: `npm run lib` (builds via ng-packagr, copies convert script and README to dist)
+- **Build demo app**: `npm run build`
+- **Run tests**: `npm test`
+- **Lint**: `npm run lint`
+- **E2E tests**: `npm run e2e`
+
+The demo app depends on the built library (`"angular2-image-gallery": "file:dist/angular2-image-gallery"`), so you must run `npm run lib` before `npm start` if the library hasn't been built yet.
+
+## Architecture
+
+### Two-project structure
+
+- **`projects/angular2-image-gallery/`** - The reusable library (built with ng-packagr)
+  - `gallery/` - Grid layout component with responsive row-based image arrangement
+  - `viewer/` - Full-screen image viewer with keyboard/touch navigation and quality selection
+  - `services/image.service.ts` - RxJS Subject-based state management (image list, selected index, viewer visibility)
+  - `data/image-metadata.ts` - TypeScript type for image metadata
+  - Public API exported via `public_api.ts`
+
+- **`src/app/`** - Demo application consuming the library
+  - `demo.component.ts` - Showcases gallery with interactive sliders for configuration
+
+### Image processing pipeline
+
+`scripts/build/convert.js` uses GraphicsMagick to generate 7 resolution variants (375px to original) from source images, producing a `data.json` metadata file in `assets/img/gallery/`. The viewer dynamically selects resolution based on screen size.
+
+### Key patterns
+
+- tsconfig `paths` alias `angular2-image-gallery` to `dist/angular2-image-gallery` so the demo app imports from the built library output
+- Components use `standalone: false` with `Angular2ImageGalleryModule`
+- Touch gestures require `hammerjs` (imported globally)
+- Observable streams use `$` suffix convention
+
+## Code Style
+
+Prettier enforced: 2-space indent, single quotes, no semicolons, 140 char line width, trailing commas (es5), `bracketSameLine: true`.
diff --git a/LICENCE b/LICENCE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 Benjamin Brandmeier
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -1,93 +1,149 @@
 # Angular 2 Image Gallery
-[![Build Status](https://travis-ci.org/BenjaminBrandmeier/angular2-image-gallery.svg?branch=master)](https://travis-ci.org/BenjaminBrandmeier/angular2-image-gallery)
-[![npm version](https://badge.fury.io/js/angular2-image-gallery.svg)](https://badge.fury.io/js/angular2-image-gallery)
-[![npm downloads](https://img.shields.io/npm/dt/angular2-image-gallery.svg)](https://www.npmjs.com/package/angular2-image-gallery)
 
-A responsive image gallery designed for high resolution images.
+[![npm version](https://img.shields.io/npm/v/angular2-image-gallery?style=for-the-badge)](https://img.shields.io/npm/v/angular2-image-gallery?style=for-the-badge)
+[![npm downloads](https://img.shields.io/npm/dm/angular2-image-gallery?style=for-the-badge)](https://www.npmjs.com/package/angular2-image-gallery)
 
-The project consists of a gallery, a viewer and a script for image preparation.
+----> **compatible with Angular 21 (and older versions)** <----
 
-Before using the gallery, you have to process all of your images that will be part of your gallery with the node.js script. The processed images will be stored to your applications assets. During runtime everything runs client-side and there is no separate server-side communication involved. The viewer takes care that an optimal image quality is served based on the device resolution.
+Responsive image gallery designed for high resolution images.
+
+The project consists of a gallery (+ viewer) and a script for image preparation.
 
 ## Demo
 
-http://oidamo.de/angular2-image-gallery/
+[https://oidamo.de/blog/gallery-demo](https://oidamo.de/blog/gallery-demo)
 
-## How to use the gallery in your project
-### Pre-requirements
-Install **node (>= 4.2.2)** and **graphicsmagick**: http://www.graphicsmagick.org/README.html#installation
+### Fundamentals
 
-### Embed in your project
+Before Using the gallery, you have to process all of your images with the **convert** script.
 
-#### 1. Install angular2-image-gallery
+The processed images will be stored to your applications assets.
 
-```bash
-npm install angular2-image-gallery --save
-```
+The viewer takes care of an optimal image quality being served based on the users screen resolution.
 
-#### 2. Import angular2-image-gallery in your Angular 2 module
+### Installation
 
-```javascript
-imports: [
-  BrowserModule,
-  FormsModule,
-  HttpModule,
-  Angular2ImageGalleryModule <-----
-],
-```
+#### 1. Install graphicsmagick
 
-#### 3. Import scripts (when using angular-cli add these lines in polyfills.ts)
+Follow the instructions: [http://www.graphicsmagick.org/README.html#installation](http://www.graphicsmagick.org/README.html#installation)
 
-```javascript
-import 'web-animations-js/web-animations.min';
-import 'hammerjs/hammer';
+#### 2. Install dependencies
+
+```bash
+npm install angular2-image-gallery hammerjs --save
 ```
 
-#### 4. Import styles (when using angular-cli add this line in styles.css)
+#### 3. Import modules
 
 ```javascript
-@import '~@angular/material/core/theming/prebuilt/deeppurple-amber.css';
-@import '~https://fonts.googleapis.com/icon?family=Material+Icons';
+imports: [
+  ...,
+  Angular2ImageGalleryModule,
+  HammerModule
+],
 ```
 
-#### 5. Run convert script
+#### 4. Run convert script
 
 ```bash
 node node_modules/angular2-image-gallery/convert.js <path/to/your/images>
 ```
+
 Add a flag to define the order of the images inside the gallery
 
 `-n` sort by file name (default)
 
-`-d` sort chronologically by the original creation time (e.g. for coverages of a wedding)
+`-d` sort chronologically by the original creation time
 
 `-c` sort by primary image color
 
-#### 6. Embed gallery in your template
+Additional optional parameter to support multiple galleries. Add it if you want to put your images into a separate gallery.
+
+`--gName=yourGalleryName`
+
+#### 5. Embed gallery in your template
 
 ```javascript
-<gallery 
-    [flexBorderSize]="3" 
-    [flexImageSize]="7" 
-    (viewerChange)="yourNotificationFunction($event)">
-</gallery>
+<gallery
+    [flexBorderSize]="3"
+    [flexImageSize]="7"
+    [galleryName]="'yourGalleryName'"
+    [maxRowsPerPage]="100"
+    (viewerChange)="yourNotificationFunction($event)"
+    [includeViewer]="true"
+    [lazyLoadGalleryImages]="true"
+></gallery>
 ```
 
-All parameters are optional. You may play around on the demo site to find out what parameters suit your needs.
+All parameters are optional.
 
-The viewerChange event notifies you when the viewer component gets opened or closed.
+* **[flexBorderSize]** used to define the border thickness between the images within the gallery.
+* **[flexImageSize]** used to define the size of the images with the gallery (not the viewer).
+* **[galleryName]** used when having multiple galleries.
+* **[maxRowsPerPage]** maximum rows per gallery, this will add navigation arrows once the threshold is reached.
+* **[viewerChange]** event fires once the viewer component gets opened or closed.
+* **[includeViewer]** provides an option to manually place the viewer outside the default DOM structure. Defaults to true.
+* **[lazyLoadGalleryImages]** allows to disable lazy loading of gallery images. All images will be loaded at once when set to false. Defaults to true.
 
-That's it, start your application and have a look!
+## Different use cases
+### Fetching images from an external data source
 
-## Currently used tools
+Fetching your images from an external data source: [CLICK HERE](https://github.com/BenjaminBrandmeier/angular2-image-gallery/blob/master/docs/externalDataSource.md)
 
-- Angular 2.3.1
-- NodeJS 7.3.0
-- Angular-CLI 1.0.0-beta.24
-- graphicsmagick
+### I don't want to use the convert script and provide my own metadata JSON
+
+This is possible, but not the intent of this project. Please [CLICK HERE](https://github.com/BenjaminBrandmeier/angular2-image-gallery/blob/master/docs/ownJSON.md)
 
 ## Troubleshooting
 
 If the conversion process fails, make sure you have enough swap space provided.
 
 If you experience any other issues, please raise an issue on GitHub.
+
+## Changelog
+
+### 21.0.0
+
+* Angular 21 support
+
+### 20.0.0
+
+* Angular 20 support
+
+### 19.0.0
+
+* Angular 19 support
+
+### 18.0.0
+
+* Angular 18 support
+
+### 17.0.0
+
+* Angular 17 support
+
+### 16.0.0
+
+* Angular 16 support
+
+### 15.2.0
+
+* Adding optional parameter **[lazyLoadGalleryImages]** to turn off lazy loading when set to false and instead load all gallery images at once.
+
+### 15.1.0
+
+* Adding optional parameter [includeViewer] to support use cases where viewer is placed outside the gallery component manually
+
+### 15.0.0
+
+* Angular 15 support
+* Performance improvements
+
+### 14.1.0
+
+* Refactor convert script entirely
+* Provide smoother output for image conversion process
+
+### 14.0.0
+
+* Angular 14 support