Skip to content
This repository has been archived by the owner on Dec 23, 2018. It is now read-only.

Commit

Permalink
Update masonry layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@drozhzhin-n-e
drozhzhin-n-e committed Feb 16, 2018
1 parent 3de62f2 commit c7927f3
Show file tree
Hide file tree
Showing 64 changed files with 268 additions and 284 deletions.
18 changes: 11 additions & 7 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ The module includes a masonry layout and a full-image preview window. Mobile dev

## Installation

Install the npm package.
Install the npm package:

npm i ngx-crystal-gallery
Expand All @@ -20,7 +20,9 @@ Default:
myImages = [
{
preview: 'path_to_preview',
full: 'path_to_full_image'
full: 'path_to_full_image',
width: natural_width,
height: natural_height
}
];

Expand All @@ -34,17 +36,19 @@ Only overlay:

import { CgOverlay } from 'ngx-crystal-gallery/components';

constructor(private overlay: CgOverlay) {
}
constructor(private overlay: CgOverlay) {}

myImages = [
{
path: 'path_to_image'
}
];

showOverlay(){
this.overlay.open(myImages, myConfig);
myConfig = {};

showOverlay(index: number){
this.myConfig.index = index; // index of the image in the array
this.overlay.open(this.myImages, this.myConfig);
}

## Properties
Expand All @@ -53,7 +57,7 @@ Only overlay:
|------------------|----------------|--------------------|--------------------------------------------------------------------------------------------------------|
| masonry | boolean | true | Masonry layout mode. |
| masonryMaxHeight | number | 200 | Maximum height of the image in the grid. |
| masonryGutter | number | 3 | Adds space between images. |
| masonryGutter | number | 4 | Adds space between images (it is recommended to use even numbers). |
| loop | boolean | false | If false, will disable the ability to loop back to the beginning of the group when on the last element.|
| opacity | number | 0.85 | The overlay opacity level. Range: 0 to 1. |

Expand Down
2 changes: 1 addition & 1 deletion src/app/app.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<crystal-gallery [images]="myImages" [config]="myConfig"></crystal-gallery>

<span (click)="show()">Show</span>
<p><a href="#" (click)="show()">Show</a></p>
108 changes: 50 additions & 58 deletions src/app/app.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,88 +7,80 @@ import { CgOverlay } from './crystal-gallery/dom.service';
styleUrls: ['./app.component.css']
})
export class AppComponent {

myImages: any = [

{
preview: '/assets/img/virginie-khateeb-1.jpg',
full: '/assets/img/virginie-khateeb-1.jpg'
},
{
preview: '/assets/img/rasmus-hjortshoj-2.jpg',
full: '/assets/img/rasmus-hjortshoj-2.jpg'
},
{
preview: '/assets/img/rasmus-hjortshoj-3.jpg',
full: '/assets/img/rasmus-hjortshoj-3.jpg'
},
{
preview: '/assets/img/rasmus-hjortshoj-5.jpg',
full: '/assets/img/rasmus-hjortshoj-5.jpg'
},
{
preview: '/assets/img/rasmus-hjortshoj-6.jpg',
full: '/assets/img/rasmus-hjortshoj-6.jpg'
preview: '/assets/img/yi-sung-tsai-04--vertical--preview.jpg',
full: '/assets/img/yi-sung-tsai-04--vertical.jpg',
width: 669,
height: 1000
},
{
preview: '/assets/img/rasmus-hjortshoj-7.jpg',
full: '/assets/img/rasmus-hjortshoj-7.jpg'
preview: '/assets/img/yi-sung-tsai-01--preview.jpg',
full: '/assets/img/yi-sung-tsai-01.jpg',
width: 1000,
height: 669
},
{
preview: '/assets/img/2_Island_I-101_710.jpg',
full: '/assets/img/2_Island_I-101_710.jpg'
preview: '/assets/img/yi-sung-tsai-02--preview.jpg',
full: '/assets/img/yi-sung-tsai-02.jpg',
width: 1000,
height: 669
},
{
preview: '/assets/img/2_Island_I-102_710.jpg',
full: '/assets/img/2_Island_I-102_710.jpg'
preview: '/assets/img/yi-sung-tsai-03--preview.jpg',
full: '/assets/img/yi-sung-tsai-03.jpg',
width: 1000,
height: 669
},
{
preview: '/assets/img/2_Island_I-104_710.jpg',
full: '/assets/img/2_Island_I-104_710.jpg'
preview: '/assets/img/yi-sung-tsai-04--preview.jpg',
full: '/assets/img/yi-sung-tsai-04.jpg',
width: 1000,
height: 669
},
{
preview: '/assets/img/2_Island_I-106_710.jpg',
full: '/assets/img/2_Island_I-106_710.jpg'
preview: '/assets/img/yi-sung-tsai-05--preview.jpg',
full: '/assets/img/yi-sung-tsai-05.jpg',
width: 1000,
height: 669
},
{
preview: '/assets/img/2_Island_I-107_710.jpg',
full: '/assets/img/2_Island_I-107_710.jpg'
preview: '/assets/img/yi-sung-tsai-06--preview.jpg',
full: '/assets/img/yi-sung-tsai-06.jpg',
width: 1000,
height: 669
},
{
preview: '/assets/img/2_Island_I-109_710.jpg',
full: '/assets/img/2_Island_I-109_710.jpg'
preview: '/assets/img/yi-sung-tsai-07--preview.jpg',
full: '/assets/img/yi-sung-tsai-07.jpg',
width: 1000,
height: 669
},
{
preview: '/assets/img/2_Island_I-110_710.jpg',
full: '/assets/img/2_Island_I-110_710.jpg'
preview: '/assets/img/yi-sung-tsai-08--preview.jpg',
full: '/assets/img/yi-sung-tsai-08.jpg',
width: 1000,
height: 669
},
{
preview: '/assets/img/2_Island_I-111_710.jpg',
full: '/assets/img/2_Island_I-111_710.jpg'
preview: '/assets/img/yi-sung-tsai-09--preview.jpg',
full: '/assets/img/yi-sung-tsai-09.jpg',
width: 1000,
height: 669
},
{
preview: '/assets/img/2_Island_I-112_710.jpg',
full: '/assets/img/2_Island_I-112_710.jpg'
preview: '/assets/img/yi-sung-tsai-10--preview.jpg',
full: '/assets/img/yi-sung-tsai-10.jpg',
width: 1000,
height: 669
},
{
preview: '/assets/img/2_Island_I-113_710.jpg',
full: '/assets/img/2_Island_I-113_710.jpg'
},
{
preview: '/assets/img/2_Island_I-115_710.jpg',
full: '/assets/img/2_Island_I-115_710.jpg'
},
{
preview: '/assets/img/2_IslandB-100-5_710.jpg',
full: '/assets/img/2_IslandB-100-5_710.jpg'
},
{
preview: '/assets/img/2_Island_I-119_710.jpg',
full: '/assets/img/2_Island_I-119_710.jpg'
},
{
preview: '/assets/img/2_Island_I-127_710.jpg',
full: '/assets/img/2_Island_I-127_710.jpg'
},
preview: '/assets/img/yi-sung-tsai-11--preview.jpg',
full: '/assets/img/yi-sung-tsai-11.jpg',
width: 1000,
height: 669
}
];

myConfig: any = {
Expand Down
Binary file added ...stal-gallery/.sass-cache/a34105d5d04516f595fc009bf0d29c2125afae02/gallery.component.sassc
View file
Binary file not shown.
Binary file added ...llery/.sass-cache/a34105d5d04516f595fc009bf0d29c2125afae02/overlay-mobile.component.sassc
View file
Binary file not shown.
Binary file added ...stal-gallery/.sass-cache/a34105d5d04516f595fc009bf0d29c2125afae02/overlay.component.sassc
View file
Binary file not shown.
Binary file added src/app/crystal-gallery/.sass-cache/a34105d5d04516f595fc009bf0d29c2125afae02/spinner.sassc
View file
Binary file not shown.
2 changes: 1 addition & 1 deletion src/app/crystal-gallery/config.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
export const defaultConfig = {
masonry: true,
masonryMaxHeight: 200,
masonryGutter: 3,
masonryGutter: 4,
loop: false,
index: 0,
opacity: 0.85
Expand Down
9 changes: 1 addition & 8 deletions src/app/crystal-gallery/css/gallery.component.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,7 @@
width: 100%; }
:host .cg-wrapper {
display: block;
position: absolute;
width: 100%;
height: 0;
overflow: hidden; }
:host .cg-wrapper.cg-show {
height: auto;
position: relative;
display: table; }
width: 100%; }
:host .cg-image img {
cursor: pointer;
width: 100%; }
7 changes: 0 additions & 7 deletions src/app/crystal-gallery/css/sass/gallery.component.sass
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,7 @@
width: 100%
.cg-wrapper
display: block
position: absolute
width: 100%
height: 0
overflow: hidden
.cg-wrapper.cg-show
height: auto
position: relative
display: table
.cg-image
img
cursor: pointer
Expand Down
16 changes: 15 additions & 1 deletion src/app/crystal-gallery/gallery.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
<ng-content></ng-content>
</div>

<!--
<div
class="cg-wrapper"
*ngIf="!isNgContent"
Expand All @@ -16,4 +17,17 @@
>
<img [src]="image.preview" (click)="showOverlay(images, i)" />
</div>
</div>
</div>
-->

<masonry-layout
class="cg-wrapper"
*ngIf="!isNgContent"

[max-height]="masonryMaxHeight"
[gutter]="masonryGutter"
[masonry]="masonryState"
[class-name]="'cg-image'"

[images]="images"
(events)="handleMasonryLayoutEvents($event)"></masonry-layout>
4 changes: 4 additions & 0 deletions src/app/crystal-gallery/gallery.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,4 +38,8 @@ export class GalleryComponent {
this.config.index = i;
this.overlay.open(images, this.config);
}

handleMasonryLayoutEvents(event){
this.showOverlay(this.images, event.index);
}
}
4 changes: 2 additions & 2 deletions src/app/crystal-gallery/gallery.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,15 @@ import { OverlayComponent } from './overlay.component';
import { OverlayMobileComponent } from './overlay-mobile.component';
import { GalleryComponent } from './gallery.component';
import { CgOverlay } from'./dom.service'
import { MasonryLayoutDirective } from './masonry-layout.directive';
import { MasonryLayoutComponent } from './masonry-layout.component';
import { PinchDirective } from './pinch.directive';

@NgModule({
declarations: [
OverlayComponent,
OverlayMobileComponent,
GalleryComponent,
MasonryLayoutDirective,
MasonryLayoutComponent,
PinchDirective
],
imports: [
Expand Down
14 changes: 14 additions & 0 deletions src/app/crystal-gallery/masonry-layout.component.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<div
[className]="CLASS_NAME"
*ngFor="let image of images; let i = index;"
[style.width]="image.computedWidth"
[style.height]="image.computedHeight"
[style.float]="'left'"
[style.margin]="image.margin"
[style.lineHeight]="0">
<img
[src]="image.preview || image.full"
[style.width.%]="100"
[style.height]="'auto'"
(click)="clickOnImage(image, i)" />
</div>
Loading

0 comments on commit c7927f3

Please sign in to comment.