1"use strict";(self.webpackChunkng_gallery_demo=self.webpackChunkng_gallery_demo||[]).push([[276],{6276:(O,g,i)=>{i.r(g),i.d(g,{GallerizeExampleComponent:()=>E});var s=i(6814),m=i(3403),r=i(2296),c=i(1946),_=i(1697),u=i(6883),h=i(5021),d=i(1419),p=i(3813),e=i(5879),Z=i(5340),U=i(6593);function A(a,n){if(1&a&&e._UZ(0,"img",12),2&a){const t=n.$implicit;e.Q6J("src",t.data.thumb,e.LSH),e.uIk("imageSrc",t.data.src)("thumbSrc",t.data.thumb)}}function T(a,n){if(1&a&&e._UZ(0,"img",12),2&a){const t=n.$implicit;e.Q6J("src",t.data.thumb,e.LSH),e.uIk("imageSrc",t.data.src)("thumbSrc",t.data.thumb)}}function f(a,n){if(1&a&&e._UZ(0,"img",12),2&a){const t=n.$implicit;e.Q6J("src",t.data.thumb,e.LSH),e.uIk("imageSrc",t.data.src)("thumbSrc",t.data.thumb)}}const y=function(){return["/getting-started/lightbox"]};let E=(()=>{class a{constructor(t,l,o){this._pixabay=t,this._title=o,this.images$=this._pixabay.getHDImages("jaguar"),this.examples$=this._pixabay.getHDImages("crocodile"),this.code=x,l.ref("lightbox").setConfig({thumbPosition:"bottom",imageSize:"cover",itemAutosize:!1,thumbAutosize:!1}),l.ref("auto-detect").setConfig({thumbPosition:"top",autoHeight:!0,imageSize:"cover",itemAutosize:!1,thumbAutosize:!1})}ngOnInit(){this._title.setTitle("Gallerize | ng-gallery")}static#e=this.\u0275fac=function(l){return new(l||a)(e.Y36(Z.N),e.Y36(c.ri),e.Y36(U.Dx))};static#t=this.\u0275cmp=e.Xpm({type:a,selectors:[["gallerize-example"]],hostAttrs:[1,"page"],standalone:!0,features:[e.jDz],decls:90,vars:32,consts:[[1,"page-title"],[1,"page-content"],[1,"hljs"],[1,"hljs",3,"textContent"],[1,"info",2,"margin-top","-1em"],[1,"section-number","inline-number"],["mat-button","","color","accent",1,"inline-button",2,"padding","0 0.5em",3,"routerLink"],[3,"code"],["gallerize","auto-detect",1,"row"],[1,"column"],[3,"src",4,"ngFor","ngForOf"],["id","gallerize-ex","gallerize","",3,"items"],[3,"src"]],template:function(l,o){1&l&&(e.TgZ(0,"div",0)(1,"h1"),e._uU(2,"Gallerize Directive"),e.qZA()(),e.TgZ(3,"div",1)(4,"section")(5,"section-title"),e._uU(6,"Overview"),e.qZA(),e.TgZ(7,"p"),e._uU(8,"The "),e.TgZ(9,"code",2),e._uU(10,"gallerize"),e.qZA(),e._uU(11," directive is used to create lightbox gallery from image elements or gallery components."),e.qZA(),e.TgZ(12,"p"),e._uU(13,"This directive loads the images in the gallery automatically, you don't need to load them manually."),e.qZA(),e.TgZ(14,"p")(15,"b"),e._uU(16,"Gallerize"),e.qZA(),e._uU(17," has 2 modes:"),e.qZA(),e.TgZ(18,"ul")(19,"li")(20,"span"),e._uU(21,"If used on "),e.TgZ(22,"code",2),e._uU(23,"HTMLElement"),e.qZA(),e._uU(24,", it detects the images and hooks their clicks to the lightbox."),e.qZA()(),e.TgZ(25,"li")(26,"span"),e._uU(27,"If used on "),e._UZ(28,"code",3),e._uU(29,", it hooks the images click to the lightbox."),e.qZA()()(),e.TgZ(30,"note",4)(31,"p"),e._uU(32,"If you haven't installed the module in step "),e.TgZ(33,"span",5),e._uU(34,"1"),e.qZA(),e._uU(35," see the "),e.TgZ(36,"a",6),e._uU(37,"Getting Started Guide"),e.qZA()()()(),e.TgZ(38,"section")(39,"section-title"),e._uU(40,"Auto-detect images"),e.qZA(),e.TgZ(41,"p"),e._uU(42,"There are use cases when images are received as HTML format, this directive takes the headache of fetching the src paths for you and connect them automatically to the lightbox."),e.qZA(),e.TgZ(43,"h3"),e._uU(44,"Basic example"),e.qZA(),e._UZ(45,"hl-code",7),e.TgZ(46,"div",8)(47,"div",9),e.YNc(48,A,1,3,"img",10),e.ALo(49,"slice"),e.ALo(50,"async"),e.qZA(),e.TgZ(51,"div",9),e.YNc(52,T,1,3,"img",10),e.ALo(53,"slice"),e.ALo(54,"async"),e.qZA(),e.TgZ(55,"div",9),e.YNc(56,f,1,3,"img",10),e.ALo(57,"slice"),e.ALo(58,"async"),e.qZA()(),e.TgZ(59,"note")(60,"p"),e._uU(61,"By default, "),e.TgZ(62,"b"),e._uU(63,"Gallerize"),e.qZA(),e._uU(64," will process all img elements, but you can limit that to elements with a specific selector."),e.qZA()(),e.TgZ(65,"h3"),e._uU(66,"Selector example"),e.qZA(),e.TgZ(67,"p"),e._uU(68,"Detect background images of elements with selector "),e.TgZ(69,"code",2),e._uU(70,".gallery-img"),e.qZA()(),e._UZ(71,"hl-code",7),e.qZA(),e.TgZ(72,"section")(73,"section-title"),e._uU(74,"Use with "),e._UZ(75,"code",3),e._uU(76," Component"),e.qZA(),e.TgZ(77,"p"),e._uU(78,"Gallerize is also compatible with the "),e._UZ(79,"code",3),e._uU(80," component, if you want to trigger the lightbox on a gallery item's click, just add "),e.TgZ(81,"code",2),e._uU(82,"gallerize"),e.qZA(),e._uU(83," on your gallery component. "),e.qZA(),e._UZ(84,"gallery",11),e.ALo(85,"async"),e.TgZ(86,"h3"),e._uU(87,"Code"),e.qZA(),e._UZ(88,"hl-code",7),e.qZA()(),e._UZ(89,"footer")),2&l&&(e.xp6(28),e.Q6J("textContent","<gallery>
1"),e.xp6(8),e.Q6J("routerLink",e.DdM(31,y)),e.xp6(9),e.Q6J("code",o.code.onElements),e.xp6(3),e.Q6J("ngForOf",e.Dn7(49,11,e.lcZ(50,15,o.examples$),0,3)),e.xp6(4),e.Q6J("ngForOf",e.Dn7(53,17,e.lcZ(54,21,o.examples$),3,6)),e.xp6(4),e.Q6J("ngForOf",e.Dn7(57,23,e.lcZ(58,27,o.examples$),6,9)),e.xp6(15),e.Q6J("code",o.code.withSelector),e.xp6(4),e.Q6J("textContent","<gallery>"),e.xp6(4),e.Q6J("textContent","<gallery>"),e.xp6(5),e.Q6J("items",e.lcZ(85,29,o.images$)),e.xp6(4),e.Q6J("code",o.code.onGallery))},dependencies:[p.D,d.K,r.ot,r.zs,m.rH,h.w,_.b9,s.ax,c.vY,u.c,s.Ov,s.OU],styles:['@charset "UTF-8";img[_ngcontent-%COMP%]{width:100%}.row[_ngcontent-%COMP%], #gallerize-ex[_ngcontent-%COMP%]{margin:3em 0}#gallerize-ex[_ngcontent-%COMP%] .g-image-item{cursor:pointer}#gallerize-ex[_ngcontent-%COMP%] gallery-thumb{padding:0}ul[_ngcontent-%COMP%]{list-style:none}li[_ngcontent-%COMP%]{display:flex;align-items:center}li[_ngcontent-%COMP%]:before{margin-right:10px;content:"\\2022";color:#e91e63;font-size:2em}.column[_ngcontent-%COMP%]{max-width:150px}'],changeDetection:0})}return a})();const x={onElements:'<div class="container" gallerize>\n <img *ngFor="let image of images"\n [src]="image.thumb"\n [attr.imageSrc]="image.src"\n [attr.thumbSrc]="image.thumb"/>\n</div>',withSelector:'<div class="container" gallerize selector=".gallery-img">\n <div *ngFor="let image of images" class="gallery-img"\n [style.backgroundImage]="\'url(\' + image.thumb + \')\'"\n [attr.imageSrc]="image.src"\n [attr.thumbSrc]="image.thumb"></div>\n</div>',onGallery:'<gallery gallerize [items]="cameraImages"></gallery>'}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.