<template> <DocSectionText v-bind="$attrs"> <p>Thumbnails can also be hidden in full screen mode.</p> </DocSectionText> <div class="card flex justify-content-center"> <Galleria v-model:visible="displayBasic" :value="images" :responsiveOptions="responsiveOptions" :numVisible="9" containerStyle="max-width: 50%" :circular="true" :fullScreen="true" :showItemNavigators="true" :showThumbnails="false"> <template #item="slotProps"> <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" /> </template> <template #thumbnail="slotProps"> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" /> </template> </Galleria> <Button label="Show" icon="pi pi-external-link" @click="displayBasic = true" /> </div> <DocSectionCode :code="code" :service="['PhotoService']" /> </template> <script> import { PhotoService } from '@/service/PhotoService'; export default { data() { return { images: null, responsiveOptions: [ { breakpoint: '1500px', numVisible: 5 }, { breakpoint: '1024px', numVisible: 3 }, { breakpoint: '768px', numVisible: 2 }, { breakpoint: '560px', numVisible: 1 } ], displayBasic: false, code: { basic: ` <Galleria v-model:visible="displayBasic" :value="images" :responsiveOptions="responsiveOptions" :numVisible="9" containerStyle="max-width: 50%" :circular="true" :fullScreen="true" :showItemNavigators="true" :showThumbnails="false"> <template #item="slotProps"> <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" /> </template> <template #thumbnail="slotProps"> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" /> </template> </Galleria> <Button label="Show" icon="pi pi-external-link" @click="displayBasic = true" /> `, options: ` <template> <div class="card flex justify-content-center"> <Galleria v-model:visible="displayBasic" :value="images" :responsiveOptions="responsiveOptions" :numVisible="9" containerStyle="max-width: 50%" :circular="true" :fullScreen="true" :showItemNavigators="true" :showThumbnails="false"> <template #item="slotProps"> <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" /> </template> <template #thumbnail="slotProps"> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" /> </template> </Galleria> <Button label="Show" icon="pi pi-external-link" @click="displayBasic = true" /> </div> </template> <script> import { PhotoService } from '@/service/PhotoService'; export default { data() { return { images: null, responsiveOptions: [ { breakpoint: '1500px', numVisible: 5 }, { breakpoint: '1024px', numVisible: 3 }, { breakpoint: '768px', numVisible: 2 }, { breakpoint: '560px', numVisible: 1 } ], displayBasic: false }; }, mounted() { PhotoService.getImages().then((data) => (this.images = data)); } }; <\/script> `, composition: ` <template> <div class="card flex justify-content-center"> <Galleria v-model:visible="displayBasic" :value="images" :responsiveOptions="responsiveOptions" :numVisible="9" containerStyle="max-width: 50%" :circular="true" :fullScreen="true" :showItemNavigators="true" :showThumbnails="false"> <template #item="slotProps"> <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" /> </template> <template #thumbnail="slotProps"> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" /> </template> </Galleria> <Button label="Show" icon="pi pi-external-link" @click="displayBasic = true" /> </div> </template> <script setup> import { ref, onMounted } from "vue"; import { PhotoService } from '@/service/PhotoService'; const images = ref(); const responsiveOptions = ref([ { breakpoint: '1500px', numVisible: 5 }, { breakpoint: '1024px', numVisible: 3 }, { breakpoint: '768px', numVisible: 2 }, { breakpoint: '560px', numVisible: 1 } ]); const displayBasic = ref(false); onMounted(() => { PhotoService.getImages().then((data) => (images.value = data)); }) <\/script> `, data: ` /* PhotoService */ { itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1.jpg', thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1s.jpg', alt: 'Description for Image 1', title: 'Title 1' }, ... ` } }; }, mounted() { PhotoService.getImages().then((data) => (this.images = data)); } }; </script>