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="showcase/resources/demo/images/galleria/galleria2.png" alt="Description" title="Image Title"/></li>
<li><img src="showcase/resources/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 |
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'];
}