Galleria is a content gallery component.






























<div class="card">
    <p:galleria value="#{galleriaView.photos}" var="photo" numVisible="5" style="max-width: 640px">
        <p:graphicImage name="#{photo.itemImageSrc}" alt="#{photo.alt}" style="width: 100%" />
        <f:facet name="thumbnail">
            <p:graphicImage name="#{photo.thumbnailImageSrc}" alt="#{photo.alt}" />
        </f:facet>
    </p:galleria>
</div>
package org.primefaces.showcase.view.multimedia;
import org.primefaces.model.ResponsiveOption;
import org.primefaces.showcase.domain.Photo;
import org.primefaces.showcase.service.PhotoService;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
import jakarta.annotation.PostConstruct;
import jakarta.faces.context.FacesContext;
import jakarta.faces.view.ViewScoped;
import jakarta.inject.Inject;
import jakarta.inject.Named;
@Named
@ViewScoped
public class GalleriaView implements Serializable {
    private List<Photo> photos;
    private List<ResponsiveOption> responsiveOptions1;
    private List<ResponsiveOption> responsiveOptions2;
    private List<ResponsiveOption> responsiveOptions3;
    private int activeIndex = 0;
    @Inject
    private PhotoService service;
    @PostConstruct
    public void init() {
        photos = service.getPhotos();
        responsiveOptions1 = new ArrayList<>();
        responsiveOptions1.add(new ResponsiveOption("1024px", 5));
        responsiveOptions1.add(new ResponsiveOption("768px", 3));
        responsiveOptions1.add(new ResponsiveOption("560px", 1));
        responsiveOptions2 = new ArrayList<>();
        responsiveOptions2.add(new ResponsiveOption("1024px", 5));
        responsiveOptions2.add(new ResponsiveOption("960px", 4));
        responsiveOptions2.add(new ResponsiveOption("768px", 3));
        responsiveOptions2.add(new ResponsiveOption("560px", 1));
        responsiveOptions3 = new ArrayList<>();
        responsiveOptions3.add(new ResponsiveOption("1500px", 5));
        responsiveOptions3.add(new ResponsiveOption("1024px", 3));
        responsiveOptions3.add(new ResponsiveOption("768px", 2));
        responsiveOptions3.add(new ResponsiveOption("560px", 1));
    }
    public void changeActiveIndex() {
        Map<String, String> params = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap();
        this.activeIndex = Integer.valueOf(params.get("index"));
    }
    public List<Photo> getPhotos() {
        return photos;
    }
    public List<ResponsiveOption> getResponsiveOptions1() {
        return responsiveOptions1;
    }
    public List<ResponsiveOption> getResponsiveOptions2() {
        return responsiveOptions2;
    }
    public List<ResponsiveOption> getResponsiveOptions3() {
        return responsiveOptions3;
    }
    public int getActiveIndex() {
        return activeIndex;
    }
    public void setActiveIndex(int activeIndex) {
        this.activeIndex = activeIndex;
    }
    public void setService(PhotoService service) {
        this.service = service;
    }
}
package org.primefaces.showcase.domain;
import java.io.Serializable;
import java.util.UUID;
public class Photo implements Serializable {
    private String id;
    private String itemImageSrc;
    private String thumbnailImageSrc;
    private String alt;
    private String title;
    public Photo() {
        this.id = UUID.randomUUID().toString().substring(0, 8);
    }
    public Photo(String itemImageSrc, String thumbnailImageSrc, String alt, String title) {
        this();
        this.itemImageSrc = itemImageSrc;
        this.thumbnailImageSrc = thumbnailImageSrc;
        this.alt = alt;
        this.title = title;
    }
    public String getId() {
        return id;
    }
    public void setId(String id) {
        this.id = id;
    }
    public String getItemImageSrc() {
        return itemImageSrc;
    }
    public void setItemImageSrc(String itemImageSrc) {
        this.itemImageSrc = itemImageSrc;
    }
    public String getThumbnailImageSrc() {
        return thumbnailImageSrc;
    }
    public void setThumbnailImageSrc(String thumbnailImageSrc) {
        this.thumbnailImageSrc = thumbnailImageSrc;
    }
    public String getAlt() {
        return alt;
    }
    public void setAlt(String alt) {
        this.alt = alt;
    }
    public String getTitle() {
        return title;
    }
    public void setTitle(String title) {
        this.title = title;
    }
}
package org.primefaces.showcase.service;
import org.primefaces.showcase.domain.Photo;
import java.util.ArrayList;
import java.util.List;
import jakarta.annotation.PostConstruct;
import jakarta.enterprise.context.ApplicationScoped;
import jakarta.inject.Named;
@Named
@ApplicationScoped
public class PhotoService {
    private List<Photo> photos;
    @PostConstruct
    public void init() {
        photos = new ArrayList<>();
        photos.add(new Photo("demo/images/galleria/galleria1.jpg", "demo/images/galleria/galleria1s.jpg",
                "Description for Image 1", "Title 1"));
        photos.add(new Photo("demo/images/galleria/galleria2.jpg", "demo/images/galleria/galleria2s.jpg",
                "Description for Image 2", "Title 2"));
        photos.add(new Photo("demo/images/galleria/galleria3.jpg", "demo/images/galleria/galleria3s.jpg",
                "Description for Image 3", "Title 3"));
        photos.add(new Photo("demo/images/galleria/galleria4.jpg", "demo/images/galleria/galleria4s.jpg",
                "Description for Image 4", "Title 4"));
        photos.add(new Photo("demo/images/galleria/galleria5.jpg", "demo/images/galleria/galleria5s.jpg",
                "Description for Image 5", "Title 5"));
        photos.add(new Photo("demo/images/galleria/galleria6.jpg", "demo/images/galleria/galleria6s.jpg",
                "Description for Image 6", "Title 6"));
        photos.add(new Photo("demo/images/galleria/galleria7.jpg", "demo/images/galleria/galleria7s.jpg",
                "Description for Image 7", "Title 7"));
        photos.add(new Photo("demo/images/galleria/galleria8.jpg", "demo/images/galleria/galleria8s.jpg",
                "Description for Image 8", "Title 8"));
        photos.add(new Photo("demo/images/galleria/galleria9.jpg", "demo/images/galleria/galleria9s.jpg",
                "Description for Image 9", "Title 9"));
        photos.add(new Photo("demo/images/galleria/galleria10.jpg", "demo/images/galleria/galleria10s.jpg",
                "Description for Image 10", "Title 10"));
        photos.add(new Photo("demo/images/galleria/galleria11.jpg", "demo/images/galleria/galleria11s.jpg",
                "Description for Image 11", "Title 11"));
        photos.add(new Photo("demo/images/galleria/galleria12.jpg", "demo/images/galleria/galleria12s.jpg",
                "Description for Image 12", "Title 12"));
        photos.add(new Photo("demo/images/galleria/galleria13.jpg", "demo/images/galleria/galleria13s.jpg",
                "Description for Image 13", "Title 13"));
        photos.add(new Photo("demo/images/galleria/galleria14.jpg", "demo/images/galleria/galleria14s.jpg",
                "Description for Image 14", "Title 14"));
        photos.add(new Photo("demo/images/galleria/galleria15.jpg", "demo/images/galleria/galleria15s.jpg",
                "Description for Image 15", "Title 15"));
    }
    public List<Photo> getPhotos() {
        return photos;
    }
}