CHANGELOG.md

Changelog

8.0.4

• fix(core): Fix VideoItem typo, closes #529.
• enhance(lightbox): Allow multiple classes for backdropPanel and panelClass config, closes 31368ed and #541.

8.0.3

• fix(core): SSR error, closes 532 in #533.

8.0.2

• feat(core): Add loadingAttr option to img and iframe elements, closes #513 in 093789b.
• fix(core): Videos are unplayable if type not specified, closes #515 in 11ba153.

8.0.1

• fix(core): Gallery nav icons are not alignment properly, in d4dca8b.
• fox(core): Gallery dots is not horizontally centralized, in f2d6910.
• fix(core): Fix lib's angular peerDependencies version to >=15 in 9ea5ea3.

8.0.0

• feat(core): Add isActive to custom gallery template context, in 0b3f8bf.
• refactor(core): Fix the iframe error regarding the allow attribute.
• refactor(core): Change default navigation icons.
• refactor(core): Change default dots size.
• refactor(core): Change default counter styles.
• regret(core): RemoveitemLoaded output.

8.0.0-beta.5

• regret(core): RemovecontentVisibilityAuto option for version 8.
• feat(core): Add itemLoaded output which emits after an item is loaded, for image items it emits after the image is loaded.
• feat(core): Add autoHeight option, when set to true, the gallery height will fit the active item height.
• feat(core): Add autoItemSize option, when set to true, the item will fit its image aspect ratio.
• feat(core): Add autoThumbSize option, when set to true, the thumb will fit its image aspect ratio.
• feat(core): Add scrollBehavior option.
• feat(core): Add navScrollBehavior option.
• feat(core): Add thumbImageSize option.
• feat(core): Add more options to the video item.
• feat(core): Add configSnapshot to GalleryRef class.
• feat(core): Add an optional parameter behavior to all next(behavior?), prev(behavior?), set(index, behavior?) functions, fallbacks to the scrollBehavior config.
• refactor(core): Only display custom item template container when itemTemplate is provided.

8.0.0-beta.4

• feat(core): Add contentVisibilityAuto option to set the proper content-visibility and contain-intrinsic-size value on all gallery items/thumbs, in 73b20a9.
• feat(core): Use native loading attribute on all img and iframe for native lazy loading.
• refactor(core): Fix loop issue when sliding with using the mouse, in 1572bea.
• refactor(core): Remove lazy-image directive.

8.0.0-beta.3

• fix(core): Set current index in sliding event does not work if slider size number has fraction, in 58e89fb.

8.0.0-beta.2

• fix(lightbox): close button is not displayed, in 506249b.

8.0.0-beta.1

• feat(core): Use scrolling slider instead of transform method, allows touchpad scroll to slide the gallery as well as native sliding on mobile browser.
• feat(core): Add resizeDebounceTime option which is used to update the gallery on window resize event in 34a2723 and d867630.
• feat(core): Add slidingEase and slidingDuration to customize sliding ease and duration in 4c1db03.
• feat(core): Add thumbDetached to detach thumb slider, closes #289 in 1f47484.
• feat(core): Add boxTemplate to the gallery, closes #487 in f46e33a.
• feat(core): Add slidingDisabled and thumbSlidingDisabled options to enable/disable sliding on Mobile and Desktop using the touchpad. in 2451581.
• feat(core): Add mouseSlidingDisabled and mouseThumbSlidingDisabled options to enable/disable sliding on Desktop using the mouse. in 2451581.
• feat(core): Images not shown, when number of images get larger, closes #484 in e819ebe.
• fix(core): thumbView="contain" Sliding thumbnails using gestures has an issue, closes #417 in e819ebe.
• refactor(core): Remove thumbMode option from the gallery, in 18f71e3
• refactor(core): Remove tapClick event and use native click event, in 3d960cc.
• refactor(core): Remove ng-content from the gallery, in 63e3b6b.
• refactor(core): Remove panSensitivity option, in d1f8d34.
• refactor(core): Remove gestures option, in 70cb00c.
• refactor(core): Remove reserveGesturesAction option, in 4b07fc7.
• refactor(core): Remove zoomOut option, in 19ba2b8.

Breaking changes:

HammerJs is only used for sliding using the mouse on desktop only, Sliding on mobile devices is now native scroll.

• gestures option has been deprecated.
• thumbMode option has been deprecated, sliding thumbnails is free.
• zoomOut has been deprecated.
• reserveGesturesAction has been deprecated.
• panSensitivity has been deprecated.
• Remove ng-content from the gallery, use boxTemplate option to add your custom layer.
• The default value for loadingStrategy option has changed to LoadingStrategy.Preload.
• Added new dependency bezier-easing.

7.1.2

• fix(core): Fix reserveGestureAction input and its default value in the lightbox, in ba95036.
• fix(core): Update gallery sliding position properly on window resize, in f786d0a.
• fix(core): Slide bug with touch scroll with gallery thumbnails, related to #465 in eb1e60c in a26d63f.

7.1.1

• feat(core): New option reserveGesturesAction adds the ability to block the scrolling of page when sliding the gallery on mobile browser, closes #477 in c105f21.
• fix(core): Slide bug with touch scroll, closes #465 in eb1e60c.

7.1.0

• feat(core): Settings change shouldn't require restart, closes #466 in ee71e52.
• fix(core): Unable to drag thumbnails properly, closes 473 in 8635701.
• fix(core): Setting gestures to false breaks the gallery, closes #464, #467 and #469 in a374603.
• fix(core): Set alt on gallery thumbnails and add role="button" to gallery nav, closes #468 in 57bebca.
• fix(lightbox): Close icon in lightbox container being re-rendered all the time due to bug in template, closes #307 in 6bdc7a4.
• enhance(core, lightbox): Remove deprecated usage, in 23506eb.

7.0.4

• fix(core): imageSize option when set to contain, in 3ecf94e.

7.0.3

• enhance(core): Use img element instead of div background image to display images, in b6b5120.
• feat(core): Add alt property to GalleryImage, in b6b5120.

7.0.2

• fix(core): Should not show sliding effect on initial state, closes #458 in c810039.

7.0.1

• feat(core): Avoid triggering change detection while dragging in 8ed5948.
• fix(core): Gallery thumbs vertical slider does not navigate when direction is up, closes #454 in 4eb7d2f.

7.0.0

• Update to Angular 14 in 64d5620.

6.0.1

• fix: Downgrade rxjs peerDependencies to v6 in 35f58fd.

6.0.0

• Update to Angular 13, closes #424 in #420.

5.1.1

Adds a new option to the global config as well as an input called thumbView which is expects a value of either default or contain

• feat(core): Thumbnails should always use the available space, closes #340 in ad3e514 and 5523b2e.
• feat(core): Add stateSnapshot property to GalleryRef to get an instant snapshot of the gallery state observable.
• fix(core): Video item displays the application instead of video, closes #398 in f07c304.
• fix(core): Issue with gallery.remove() function, closes #405 in f0fb1c3 and 6e080b4.

Special thanks to @NexGenUA for his PR

5.0.0

• Upgrade to Angular 10.
• feat(Lightbox): Add start/exit animation options, closes #346 in 6799a1c.
• feat(video item): ability to disable video controls, in f6b48b1.
• feat(video item, youtube item): Ability to autoplay, closes #304 in 9caf8bf.
• feat(youtube item): Allow url parameters, closes #302 in 3760789.
• fix(lightbox): Remove cdk styles import from the library.
• fix(video item): Cannot read property 'nativeElement' of undefined, closes #353 in ff10363.
• fix(video item): Sanitized urls not working in

5.0.0-beta.1

• Upgrade to Angular 9.
• Combine all packages in one package.
• Remove import HttpClientModule from GalleryModule.

Breaking changes

Before:

• The packages were published on @ngx-gallery/core, @ngx-gallery/lightbox and @ngx-gallery/gallerize.

After:

• All the packages are now combined in ng-gallery (NOTE: it is not ngx-gallery that is a different package).
• Import GalleryMlodule from ng-gallery and LightboxModule from ng-gallery/lightbox.
• The module GallerizeModule has been removed, the [gallerize] directive can still be used from the LightboxModule.

5.0.0-beta.0

• regret: Remove mode=intermediate option, closes #309 and #297 in b1df18c.

Breaking changes (There could be more breaking changes until version 5 is released which will make it compatible with Angular 9 and ivy)

• The loadingMode option has been removed from the gallery component's input and from the global options.

4.0.3

• fix(core): Fix universal error, closes #262 in fc6c3f7.
• fix(core): clean up state subject in <gallery-image> component in 7796b50.

4.0.2-beta.0

• feat(core): Add thumbLoadingIcon and thumbLoadingError to gallery config, in 3f8cdca and f2cae92.
• refactor(core): refactor the if/else logic in gallery image template, in f7d6a22.

4.0.1

• fix(core): Encapsulate the cache interceptor to gallery images only, closes #237 in 4616eec.

4.0.0

• feat(gallerize): Scan imageSrc and thumbSrc attributes for image sources, in 4826d52.
• enhance(core, lightbox, gallerize): Ability to lazy load the library.
• enhance(core, lightbox): Export GALLERY_CONFIG and LIGHTBOX_CONFIG tokens, in 56c704f and 9cab04b.
• fix(core, lightbox): Add Optional() on injected config in gallery and lightbox services, closes #234 in 31624f9.
• refactor(core, lightbox): Rename forRoot(config?) to withConfig(config), in 8446c1a.
• refactor(lightbox): Remove providedIn: 'root' from Lightbox service and provid it locally in its module, in 7ba8dd9.

Breaking Changes

• The function forRoot() has been removed from GalleryModule and LightboxModule.
• Use GalleryModule.withConfig({ ... }) to set config that applies on a module and its children (same applies on LightboxModule).
• To set global config across the entire app while still lazy load the library, provide the GALLERY_CONFIG token with the config value in the root module (same applies on LightboxModule with LIGHTBOX_CONFIG).

Example: Lazy load the library

In this example, will set global config without importing the library in the main bundle

• Provide GALLERY_CONFIG value in the root module

import { GALLERY_CONFIG } from '@ngx-gallery/core';

@NgModule({
  providers: [
    {
      provide: GALLERY_CONFIG, 
      useValue: {
        dots: true,
        imageSize: 'cover'
      }
    }
  ]
})
export class AppModule { }

• Import GalleryModule in a feature module

import { GalleryModule } from '@ngx-gallery/core';

@NgModule({
  imports: [
    GalleryModule
  ]
})
export class FeatureModule { }

4.0.0-beta.1

• feat(core): Add indeterminate option to the radial progress, in df682c4.
• enhance(core): Enhance thumbnails loading styles, in f34f90a.
• fix(core): Expose [dotSize], [dotsPosition] and [counterPosition] options as inputs, in 946a856.
• fix(core): Add [loadingMode] option to gallery images which accepts determinate or indeterminate , in e8bdfb2.
• regression(core): Fix undisplayed thumb image when a custom thumb template is used, in 34f2cc6.
• enhance(gallerize): Run gallerize detector outside angular zone, makes opening the lightbox smoother, in 284925d and 98901b9.

4.0.0-beta.0

• update(core, lightbox, gallerize): Update peer dependencies, closes #228 in bd8cdd3.

• feat(core): Add dotsPosition option, closes #211 in 263d297.

• feat(core): Add dotsSize option, in e2e58b6.

• feat(core): Add counterPosition option, closes in ce7a8ad.

• feat(core): Use HttpClient to load and cache images in [lazyImage] directive, in 15c3e88.

• feat(core): Replace icon loader with a new radial progress component to report image loading progress while keeping the svg loading icon as an option, in a1028e8.

• feat(core): Add default error template to <gallery-image> in case if loading failed and add loadingError option for custom error template, in cd258f5 and 9dbf6c4.

• enhance(core): Enhance gallery dots styles, in de8d22b.

• enhance(core): Allow gallery image to use unsafe URLs, closes #218 in da1ace1.

• enhance(core): Use animationFrameScheduler for smoother sliding animation, in 38b0aa6.

• fix(core): Fix vertical scroll when using the gallery on touch devices, closes #161 in a239c29. (kudos goes to @harm-less)

• refactor(core): [lazyImage] directive => (loaded) event no longer emits on error.

• feat(lightbox): Set the focus back on the previously focused element when the lightbox is closed, in 266eddb.

• feat(lightbox): Add role, ariaLabel, ariaLabelledBy and ariaDescribedBy attributes to the lightbox config LightboxConfig, in a11d20d, 5b550e7.

• enhance(lightbox): Import overlay default styles from @angular/cdk/overlay, in 54c5d88.

• enhance(lightbox): Improve lightbox styles, in 4a52161.

• enhance(lightbox): Update lightbox overlay animation, closes #224 in bec077f.

• refactor(lightbox): Use disposeOnNavigation instead of Location service, in 2262164.

3.3.1

• fix(core): Remove duplicate delete execution in the destroyer function, in ae541ca
• fix(core): Check galleryRef exists before deleting, in a2b32e2
• fix(core): Remove duplicate config set, in 834c001
• fix(core): Remove unnecessary PortalModule import from GalleryModule, in 46ef735
• refactor(core): Use povidedIn: 'root' for the Gallery service, in 86eeaa7
• fix(core, lightbox): Fix peer dependencies, in 236e540.

3.3.0

• refactor(core): Use Map<string, GalleryRef> for instances holder type instead of untyped object in ac08077.
• refactor(core): Rename gallery state$ and config$ to state and config in 8de515b and 1e4fd06.
• enhance(core): Improve instance destroyer, gallery delete its instance on component destroy in 65f3358.

Breaking Changes

• Gallery can now be destroyed using its instance galleryRef.destroy().
• In Gallery service the function destroy() has been removed.

3.2.0

• feature(core): Do not require importing global styles, closes #197 in ea041a5.
• feature(core): Set the video type attribute on videos items, closes #199 in 06b3601.
• feature(lightbox): Add a lightbox directive, closes #200 in ad2255b.
• fix(gallery): fix LazyImage error event, closes #205 in db231aa

Breaking changes

• No need to manually import the styles anymore, they are imported internally with the components.

• Adding a video item with multiple url sources

  Before:

galleryRef.addVideo({
  src: ['MP4_URL', 'OGG_URL'],
  thumb: '(OPTIONAL)VIDEO_THUMBNAIL_URL',
  poster: '(OPTIONAL)VIDEO_POSTER_URL'
});

After:

galleryRef.addVideo({
  src: [
    { url: 'MP4_URL', type: 'video/mp4' },
    { url: 'OGG_URL', type: 'video/ogg' }
  ],
  thumb: '(OPTIONAL)VIDEO_THUMBNAIL_URL',
  poster: '(OPTIONAL)VIDEO_POSTER_URL'
});

3.1.2

• fix(Lightbox): Check if location is defined before subscribing, closes #189 in 169b813.

3.1.1

• refactor(core): Convert imageSize attribute to an input + add it to gallery config, this makes it possible to use it in lightbox mode, closes #183 in 1fc70c4.
• refactor(core): Make contain as the default value for imageSize option, in c7b3d39.

3.1.0

• feat(core): Add auto-play option, in e7fc03f.
• feat(core): Add support for error handling, closes #154 in 12f6e5e.
• refactor(core): Remove opacity transition from gallery-item, in a5b227e.
• refactor(core): Use imageSize as an attribute, in 96c5c07.
• refactor(core): Rename (player) output to (playingChange), in e209493.
• enhance(core): Use default cursor when thumbnails are disabled, in 3582e95.
• fix(core): fix vertical sliding direction, in cba5d59.
• fix(core): fix thumbClick Output, in a730116.

3.1.0-beta.0

Gallery

• feat(core): Add thumbMode option on thumbnails' slider (free scroll thumbnails), closes #135 in 8c6c99d.
• feat(core): Add slide show player option, closes #152 in a331f46.
• enhance(core): Ability to Import gallery styles individually #144 in ebb6667.
• enhance(core): Run HammerJS gestures outside angular zone 6fabf6c.
• enhance(core): Put SCSS and CSS each in its own folder, close #153 in 9783fc3.
• enhance(core): Check if loadingSvg is defined before embedding it, close #150 in 5286640.
• fix(core): fix wrong (thumbClick) emitter.
• fix(core): fix gallery slider width which is set to 0 at the beginning, closes #151 in c26a286.
• refactor(core): Set loop option to true by default.
• refactor(core): Remove fluid option from gallery config and use it as an attribute instead. fixed in ecf3f88.

Lightbox

• feat(Lightbox): Close the lightbox when the location is changed, closes #108 in 1543374.

Breaking changes:

Gallery

• Fluid option is now used as an attribute, not as an input.

Before:

<gallery [fluid]="true"></gallery>

After:

<gallery fluid></gallery>

• Scss and css styles are put each in its own folder

Before:

@import '~@ngx-gallery/core/styles/gallery';

After:

@import '~@ngx-gallery/core/styles/scss/gallery';
// or for css
@import '~@ngx-gallery/core/styles/css/gallery';

3.0.2

• refactor(Lightbox): fix the close button small size on iphone browser.
• refactor(Lightbox): use <i> tag instead of <button> tag for the close button.
• fix(core): Check if loadingIcon is defined in <gallery-image>, closes #133 and #132 in 24e6e26.

3.0.1

• feat(core): Allow using custom gallery item with custom template, closes #125 in 7e4c302.

3.0.0

• fix(Lightbox): Close the lightbox when the active route is changed #108 in d099abd.

3.0.0-beta.1

• refactor(core): add the loop input to gallery component, closes #98 in 727a4ca.

3.0.0-beta.0

Features:

• Support Angular 6 and RxJS 6, closes #91.
• feat(core): Add helper functions to add different gallery items on <gallery> and GalleryRef.
• feat(core): Add fluid option to gallery for full width size.
• feat(core): Add navIcon option to gallery config to set a custom nav icon.
• feat(core): AddloadingStrategy option to gallery which accepts one of the following: 'preload', 'lazy' or 'default', closes #87.
• feat(core): Add itemClick output which emits when an item is clicked, closes #106.
• feat(core): Support custom template inside the default item templates, add itemTemplate and thumbTemplate to gallery options.
• feat(core): Multiple video sources support.
• feat(core): Pause Video and Youtube items when active item changes.
• feat(Gallerize): Add support to detect Gallery component.
• feat(Gallerize): Add support to detect DOM background images.

Bug fixes:

• fix(core): Skip re-setting the config from <gallery> input in lightbox mode, closes #104.
• fix(core): Fix wrong thumbnail position when [thumbPosition] is changed.

Improvements:

• refactor(core): Improve icon rendering, use svg element instead of background-image to render the nav icon in <gallery-nav>.
• refactor(core): Add .g-active-item on current item and .g-active-thumb on current thumbnail.
• refactor(core): Add .g-image-loaded class on <gallery-image> to indicates that the image has been loaded.
• refactor(core): Replace loading output with loaded, which emits the image path after it loads.
• refactor(core): Set an initial height of 500px.
• refactor(core): Replace ImageItem VideoItem YoutubeItem and IframeItem constructor parameters with a single data parameter.
• refactor(core, Lightbox): Set aria-label on all buttons.
• refactor(Gallerize): Remove forClass input and replace it for selector input.
• refactor(Gallerize): Remove CommonModule as it is not needed.
• refactor(Styles): Add a prefix to all classes used in the plugin.
• refactor(Styles): Add a transition for animate the opacity on current item and thumbnail.

Breaking changes:

Gallery

• Before, To Create an image item, we used to pass the src and the thumbnail separate parameters.

const item: GalleryItem = new ImageItem('IMAGE_SRC', 'THUMB_SRC');

• After, The parameters are replaced with a single data object.

const item: GalleryItem = new ImageItem({ src: 'IMAGE_SRC', thumb: 'THUMB_SRC' });

Gallerize

• Before, Limiting auto-detection to a specific class used to be done as in the following code:

<div class="grid" gallerize forClass="my-img-class">
  <img class="my-img-class" src="{{item.src}}">
</div>

• After, Now forClass input has been replaced with selector input.

<div class="grid" gallerize selector=".my-img-class">
  <img class="my-img-class" src="{{imgSource1}}">
  <div class="my-img-class" [style.background]="'url(' + imgSource2 + ')'">
</div>

2.1.1

• refactor(Lightbox Style): Clean up.
• fix(HammerJS): Don't throw an error if hammer is not defined, just fallback to default.
• feat(VideoItem): add a 3rd parameter to VideoItem to set custom poster.

const viewItem = new VideoItem(video.src, video.thumb, video.poster);

• refactor(core): rename thumbSrc to thumb.

Breaking Changes

This won't effect the usage, but you might need to update

GalleryItem data object has changed the name of the thumbnail source property from thumbSrc to thumb

This would only effect your app if you display the thumbnails list of your gallery items

Before

<div class="grid">
  <div  class="grid-item"
        *ngFor="let item of galleryItems$ | async; let i = index"
        (click)="lightbox.open(i)">
    <img class="grid-image" [src]="item.data.thumbSrc">
  </div>
</div>

After

<div class="grid">
  <div  class="grid-item"
        *ngFor="let item of galleryItems$ | async; let i = index"
        (click)="lightbox.open(i)">
    <img class="grid-image" [src]="item.data.thumb">
  </div>
</div>

2.0.4

• feat(GalleryConfig): add loadingIcon to GalleryConfig that accepts inline image.

2.0.3

• fix(Lightbox): Exit animation, closes #73.
• fix(Lightbox): close button is clicking behind, closes #54.
• refactor(Lightbox): Use the button tag instead of div for close button.

2.0.2

• enhancement(Gallerize): Use MutationObserver instead of ngAfterContentChecked to prevent infinite loop in default change detection strategy, closes #70.

2.0.1

• feat(GallerySlider): Rearrange slider on window resize, closes #67.

2.0.0

• fix(Swiping): Remove ngZone, closes #64.

2.0.0-beta.4

• feat(LightboxConfig): Adds fullscreen option to the lightbox, closes #43.

By default fullscreen is obtained on small screen (mobile) but now you can make it as default for all screens

GalleryModule.forRoot()
LightboxModule.forRoot({
  panelClass: 'fullscreen'
})

• feat(Lightbox): Ability to define lightbox config using lightbox.open() method

openLightbox() {
  this.lightbox.open(0, 'lightbox', {
    panelClass: 'fullscreen'
  });
}

2.0.0-beta.3

• Prevents native click event bubbling, closes #57

2.0.0-beta

Written from scratch

1.0.1

• fix double click on thumbnails and bullets, closes #45.

1.0.0

Fixes:

• fix(GalleryNav): Hide navigation on panning.
• fix(GalleryPlayer): Wait until image is loaded before starting the timer.

Features:

• feat(GalleryPlayer): Add progressbar color option.
• feat(GalleryPlayer): Add progressbar thickness option.
• feat(GalleryPlayer): Add position option top and bottom.
• feat(GalleryActions): Add gallery events
• feat(GalleryNav): Add prevClass and nextClass options to customize navigation icons
• feat(classNames) Add className option to container, thumbnails, bullets

Performance Improvements:

• refactor(GalleryThumbnail) improve performance

Breaking Changes:

• refactor(GalleryConfig): rename config.thumbnails.space to config.thumbnails.margin
• refactor(GalleryBullets): remove vertical positioning right and left

1.0.0-beta.8

• fix(keyboard listener in lightbox) closes #24, #33.
• refactor(Gallerize directive) Use MutationObserver instead of DOMSubtreeModified, closes #26.
• fix(Universal support), closes #9.
• fix Angular 5 warning, closes #21.
• Improve gallery lightbox, closes #20.
• Improve gallery lightbox slide animation, closes #8.
• Use Angular CDK for the gallery lightbox.
• refactor(GalleryConfig)
• Remove image transition animation option because it was not implemented properly.

0.7.1

• General refactor
• fix(GalleryDirective) apply gallerize only once when content changes
• decode gallery nav icons and close button from base64 to decrease the size

0.7.0

• feat(LazyLoad) emit only last selected image.
• fix(GalleryImage) fade animation is working properly with image load.
• refactor(GalleryConfig)

0.6.3

• fix(GalleryModal) close button is hidden on mobile, closes #9
• fix umd bundle for systemjs, closes #10

0.6.2

• fix(gestures) remove navigation element on mobile which was blocking gestures events
• fix(gestures) enable/disable gestures using config.gestures
• refactor(config) interfaces

0.6.0 beta

• Add popup animation for gallery modal
• Remove incorrect slide animation
• Make gestures optional, closes #2
• Remove thumbnail vertical position (right and left) positions, closes #3

0.5.2 beta

• (feat) gestures support
• (refactor) gallery config

0.5.0 beta

• Initial release