Skip to content

Commit

Permalink
Update
Browse files Browse the repository at this point in the history
  • Loading branch information
MurhafSousli committed Oct 18, 2024
1 parent a20feb4 commit bed0b73
Show file tree
Hide file tree
Showing 59 changed files with 1,746 additions and 1,192 deletions.
157 changes: 157 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 3 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@
"start-demo": "ng serve ng-gallery-demo --host 0.0.0.0",
"build-demo": "ng build ng-gallery-demo --configuration production",
"build-lib": "ng build ng-gallery --configuration production",
"test-lib": "ng test ng-gallery",
"test-lib-headless": "ng test ng-gallery --watch=false --no-progress --browsers=ChromeHeadless --code-coverage",
"publish-lib": "npm publish ./dist/ng-gallery",
"storybook": "ng run ng-gallery:storybook",
"build-storybook": "ng run ng-gallery:build-storybook",
Expand Down Expand Up @@ -68,6 +70,7 @@
"jasmine-spec-reporter": "~7.0.0",
"karma": "~6.4.4",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "^2.2.1",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0",
"ng-packagr": "^18.2.1",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -31,22 +31,22 @@ export class GallerizeExampleComponent implements OnInit {
constructor(private _pixabay: Pixabay, gallery: Gallery, private _title: Title) {
this.code = code;
gallery.ref('lightbox').setConfig({
thumbPosition: 'bottom',
// thumbPosition: 'bottom',
imageSize: 'cover',
itemAutosize: false,
thumbAutosize: false,
thumbs: true
// thumbAutosize: false,
// thumbs: true
// thumbWidth: 120,
// thumbHeight: 90,
// thumbView: 'contain'
});
gallery.ref('auto-detect').setConfig({
thumbPosition: 'top',
// thumbPosition: 'top',
autoHeight: true,
imageSize: 'cover',
itemAutosize: false,
thumbAutosize: false,
thumbs: true
// thumbAutosize: false,
// thumbs: true
// thumbView: 'contain'
});
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -62,11 +62,11 @@ <h3>Example</h3>
@if (media$ | async; as config) {
<gallery id="basic"
[items]="fruits$ | async"
thumbs
bullets
[thumbWidth]="config.thumbWidth"
[thumbHeight]="config.thumbHeight"
[thumbPosition]="config.thumbPosition"/>
bullets>
<gallery-thumbs [thumbWidth]="config.thumbWidth"
[thumbHeight]="config.thumbHeight"
[position]="config.thumbPosition"/>
</gallery>
}

<hl-code [code]="code.example"/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { Title } from '@angular/platform-browser';
import { MatTabsModule } from '@angular/material/tabs';
import { MatButtonModule } from '@angular/material/button';
import { MediaChange, MediaObserver } from '@angular/flex-layout';
import { GalleryModule, GalleryItem, GalleryConfig, ThumbnailsPosition } from 'ng-gallery';
import { GalleryModule, GalleryItem, GalleryConfig, ThumbnailsPosition, GalleryThumbsComponent } from 'ng-gallery';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { Observable, map } from 'rxjs';

Expand All @@ -24,13 +24,13 @@ import { SectionTitleComponent } from '../../shared/section-title/section-title.
styleUrls: ['./gallery-example.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
imports: [SectionTitleComponent, NoteComponent, MatButtonModule, RouterLink, MatTabsModule, HlCodeComponent, NgIf, GalleryModule, FontAwesomeModule, FooterComponent, AsyncPipe]
imports: [SectionTitleComponent, NoteComponent, MatButtonModule, RouterLink, MatTabsModule, HlCodeComponent, NgIf, GalleryModule, FontAwesomeModule, FooterComponent, AsyncPipe, GalleryThumbsComponent]
})
export class GalleryExampleComponent implements OnInit {

readonly code = code;
readonly fruits$: Observable<GalleryItem[]>;
readonly media$: Observable<GalleryConfig>;
readonly media$: Observable<any>;

constructor(pixabay: Pixabay, mediaObserver: MediaObserver, private _title: Title) {
this.fruits$ = pixabay.getHDImages('vegetables');
Expand Down
12 changes: 6 additions & 6 deletions projects/ng-gallery-demo/src/app/pages/home/home.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -9,16 +9,16 @@ <h2>Simplifies the process of creating beautiful galleries.</h2>
<gallery id="basic"
*ngIf="media$ | async; let config"
[items]="camel$ | async"
[thumbWidth]="config.thumbWidth"
[thumbHeight]="config.thumbHeight"
ngStyle.lg="height: 540px"
itemAutosize="true"
imageSize="contain"
thumbPosition="top"
thumbs
loop
thumbCentralized
autoplay/>
autoplay>
<gallery-thumbs position="top"
centralized
[thumbWidth]="config.thumbWidth"
[thumbHeight]="config.thumbHeight"/>
</gallery>
</div>
<footer></footer>
</div>
6 changes: 3 additions & 3 deletions projects/ng-gallery-demo/src/app/pages/home/home.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { Title } from '@angular/platform-browser';
import { RouterLink } from '@angular/router';
import { MatButtonModule } from '@angular/material/button';
import { FlexLayoutModule, MediaChange, MediaObserver } from '@angular/flex-layout';
import { GalleryComponent, GalleryConfig, GalleryItem } from 'ng-gallery';
import { GalleryComponent, GalleryConfig, GalleryItem, GalleryThumbsComponent } from 'ng-gallery';
import { Observable, map } from 'rxjs';
import { Pixabay } from '../../service/pixabay.service';
import { FooterComponent } from '../../shared/footer/footer.component';
Expand All @@ -19,12 +19,12 @@ import { BadgesComponent } from '../../shared/badges/badges.component';
styleUrls: ['./home.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
imports: [MatButtonModule, RouterLink, BadgesComponent, NgIf, GalleryComponent, FooterComponent, AsyncPipe, FlexLayoutModule]
imports: [MatButtonModule, RouterLink, BadgesComponent, NgIf, GalleryComponent, FooterComponent, AsyncPipe, FlexLayoutModule, GalleryThumbsComponent]
})
export class HomeComponent implements OnInit {

readonly camel$: Observable<GalleryItem[]>;
readonly media$: Observable<GalleryConfig>;
readonly media$: Observable<any>;

constructor(pixabay: Pixabay, mediaObserver: MediaObserver, private _title: Title) {
this.camel$ = pixabay.getHDImages('mountain');
Expand Down
Loading

0 comments on commit bed0b73

Please sign in to comment.