import {Galleria} from 'primeng/primeng';
Galleria requires a set of images inside list items as the content. Alt and Title attributes are used in the caption section.
<p-galleria panelWidth="500" panelHeight="313"> <ul> <li><img src="showcase/resources/demo/images/galleria/galleria1.png" alt="Description" title="Image Title"/></li> <li><img src="showcaseresources/demo/images/galleria/galleria2.png" alt="Description" title="Image Title"/></li> <li><img src="showcaseresources/demo/images/galleria/galleria3.png" alt="Description" title="Image Title"/></li> </ul> </p-galleria>
If the images are dynamic, ngFor can be used to display the list dynamically.
<p-galleria panelWidth="500" panelHeight="313"> <ul> <li *ngFor="#image of images;#i = index;"> <img src="resources/demo/images/galleria/{{image}}" alt="Description for Image {{i}}" title="Image {{i}}"/> </li> </ul> </p-galleria>
export class Model { images: string[] = ['galleria1.jpg', 'galleria2.jpg', 'galleria3.jpg', 'galleria4.jpg', 'galleria5.jpg', 'galleria6.jpg', 'galleria7.jpg', 'galleria8.jpg', 'galleria9.jpg', 'galleria10.jpg', 'galleria11.jpg', 'galleria12.jpg']; }
Galleria supports custom content display instead of images, in this case enable customContent option and place your content inside a div element next to the image.
<p-galleria panelWidth="500" panelHeight="313" customContent="customContent" [showCaption]="false"> <ul> <li *ngFor="#image of images;#i = index;"> <img src="resources/demo/images/galleria/{{image}}" /> <div> <!-- Content Here --> <h2>Content For Item {{i}}</h2> </div> </li> </ul> </p-galleria>
Name | Type | Default | Description |
---|---|---|---|
panelWidth | number | 600 | Width of the content panel. |
panelHeight | number | 400 | Height of the content panel. |
frameWidth | number | 60 | Width of the filmstrip frames. |
frameHeight | number | 40 | Height of the filmstrip frames. |
showFilmstrip | boolean | true | Defines visibility of filmstrip. |
autoPlay | boolean | true | Images are displayed with a slideshow in autoPlay mode. |
transitionInterval | number | 4000 | Time in milliseconds between each slide in autoPlay mode. |
effect | string | fade | Name of animation to use on transitions. |
effectDuration | number | 250 | Duration of animation in milliseconds. |
showCaption | boolean | true | Displays information retrieved from title and alt attributes of images in content caption. |
customContent | boolean | false | In custom content mode, galleria displays content next to the image element instead of the image itself. |
Following is the list of structural style classes, for theming classes visit theming page.
Name | Element |
---|---|
ui-galleria | Container element |
ui-galleria-panel-wrapper | Parent of item containers. |
ui-fieldset-legend | Container of an item. |
ui-fieldset-filmstrip-wrapper | Container of filmstrip. |
ui-fieldset-filmstrip | Filmstrip element |
ui-fieldset-frame | Frame element of thumbnail |
ui-fieldset-nav-next | Icon to navigate to next item |
ui-fieldset-nav-prev | Icon to navigate to previous item |
ui-fieldset-caption | Caption element that displays title and description of an item |
jQuery, jQuery UI WidgetFactory API, PrimeUI Galleria.
<h3 class="first">Basic</h3> <p-galleria panelWidth="500" panelHeight="313"> <ul> <li *ngFor="#image of images;#i = index;"> <img src="showcase/resources/demo/images/galleria/{{image}}" alt="Description for Image {{i}}" title="Image {{i}}"/> </li> </ul> </p-galleria> <h3>Custom Content</h3> <p-galleria panelWidth="500" panelHeight="313" customContent="customContent" [showCaption]="false"> <ul> <li *ngFor="#image of images;#i = index;"> <img src="showcase/resources/demo/images/galleria/{{image}}" /> <div> <h2>Content For Item {{i}}</h2> </div> </li> </ul> </p-galleria>
export class GalleriaDemo { images: string[] = ['galleria1.jpg', 'galleria2.jpg', 'galleria3.jpg', 'galleria4.jpg', 'galleria5.jpg', 'galleria6.jpg', 'galleria7.jpg', 'galleria8.jpg', 'galleria9.jpg', 'galleria10.jpg', 'galleria11.jpg', 'galleria12.jpg']; }