vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Refactor #212

pull/310/head
mertsincan 2020-04-06 07:25:05 +03:00
parent 030f44f157
commit 0cfa9e9d0a
16 changed files with 151 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/galleria/Galleria.d.ts vendored
View File

@ -23,14 +23,14 @@ export declare class Galleria extends Vue {
indicatorsPosition?: string; indicatorsPosition?: string;
baseZIndex?: number; baseZIndex?: number;
maskClass?: string; maskClass?: string;
galleriaStyle?: string; containerStyle?: string;
galleriaClass?: string; containerClass?: string;
$slots: { $slots: {
header: VNode[]; header: VNode[];
footer: VNode[]; footer: VNode[];
previewItem: VNode[]; item: VNode[];
previewCaption: VNode[]; previewCaption: VNode[];
indicator: VNode[]; indicator: VNode[];
thumbnailItem: VNode[]; thumbnail: VNode[];
} }
} }

4
src/components/galleria/Galleria.vue
View File

@ -101,11 +101,11 @@ export default {
type: String, type: String,
default: null default: null
}, },
galleriaStyle: { containerStyle: {
type: String, type: String,
default: null default: null
}, },
galleriaClass: { containerClass: {
type: String, type: String,
default: null default: null
} }

4
src/components/galleria/GalleriaContent.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div :id="id" v-if="$attrs.value && $attrs.value.length > 0" :class="galleriaClass" :style="$attrs.galleriaStyle"> <div :id="id" v-if="$attrs.value && $attrs.value.length > 0" :class="galleriaClass" :style="$attrs.containerStyle">
<button v-if="$attrs.fullScreen" type="button" class="p-galleria-close p-link" @click="$emit('maskHide')"> <button v-if="$attrs.fullScreen" type="button" class="p-galleria-close p-link" @click="$emit('maskHide')">
<span class="p-galleria-close-icon pi pi-times"></span> <span class="p-galleria-close-icon pi pi-times"></span>
</button> </button>
@ -90,7 +90,7 @@ export default {
'p-galleria-fullscreen': this.$attrs.fullScreen, 'p-galleria-fullscreen': this.$attrs.fullScreen,
'p-galleria-indicator-onpreview': this.$attrs.showIndicatorsOnPreview, 'p-galleria-indicator-onpreview': this.$attrs.showIndicatorsOnPreview,
'p-galleria-preview-nav-onhover': this.$attrs.showNavButtonsOnPreviewHover && !this.$attrs.fullScreen 'p-galleria-preview-nav-onhover': this.$attrs.showNavButtonsOnPreviewHover && !this.$attrs.fullScreen
}, thumbnailsPosClass, indicatorPosClass, this.$attrs.galleriaClass] }, thumbnailsPosClass, indicatorPosClass, this.$attrs.containerClass]
} }
}, },
components: { components: {

4
src/components/galleria/GalleriaItemSlot.vue
View File

@ -26,9 +26,9 @@ export default {
if (template) { if (template) {
let content; let content;
switch(type) { switch(type) {
case 'previewItem': case 'item':
case 'previewCaption': case 'previewCaption':
case 'thumbnailItem': case 'thumbnail':
content = template({ content = template({
item item
}); });

2
src/components/galleria/GalleriaPreview.vue
View File

@ -5,7 +5,7 @@
<span class="p-galleria-preview-prev-icon pi pi-chevron-left"></span> <span class="p-galleria-preview-prev-icon pi pi-chevron-left"></span>
</button> </button>
<div class="p-galleria-preview-items-content"> <div class="p-galleria-preview-items-content">
<GalleriaItemSlot type="previewItem" :item="activeItem" :templates="templates" /> <GalleriaItemSlot type="item" :item="activeItem" :templates="templates" />
</div> </div>
<button v-if="showPreviewNavButtons" type="button" :class="navForwardClass" @click="navForward($event)" :disabled="isNavForwardDisabled()"> <button v-if="showPreviewNavButtons" type="button" :class="navForwardClass" @click="navForward($event)" :disabled="isNavForwardDisabled()">
<span class="p-galleria-preview-next-icon pi pi-chevron-right"></span> <span class="p-galleria-preview-next-icon pi pi-chevron-right"></span>

2
src/components/galleria/GalleriaThumbnails.vue
View File

@ -13,7 +13,7 @@
'p-galleria-thumbnail-item-start': firstItemAciveIndex() === index, 'p-galleria-thumbnail-item-start': firstItemAciveIndex() === index,
'p-galleria-thumbnail-item-end': lastItemActiveIndex() === index }]"> 'p-galleria-thumbnail-item-end': lastItemActiveIndex() === index }]">
<div class="p-galleria-thumbnail-item-content" :tabindex="isItemActive(index) ? 0 : null" @click="onItemClick(index)" @keydown.enter="onItemClick(index)"> <div class="p-galleria-thumbnail-item-content" :tabindex="isItemActive(index) ? 0 : null" @click="onItemClick(index)" @keydown.enter="onItemClick(index)">
<GalleriaItemSlot type="thumbnailItem" :item="item" :templates="templates" /> <GalleriaItemSlot type="thumbnail" :item="item" :templates="templates" />
</div> </div>
</div> </div>
</div> </div>

16
src/views/galleria/GalleriaBasicDemo.vue
View File

@ -12,10 +12,10 @@
<div class="content-section implementation"> <div class="content-section implementation">
<h3 class="first">Default</h3> <h3 class="first">Default</h3>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"> <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px">
<template #previewItem="slotProps"> <template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%" /> <img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
</template> </template>
<template #thumbnailItem="slotProps"> <template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center"> <div class="p-grid p-nogutter p-justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" /> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
</div> </div>
@ -29,10 +29,10 @@
</div> </div>
<Galleria :value="images" :activeItemIndex.sync="activeIndex" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"> <Galleria :value="images" :activeItemIndex.sync="activeIndex" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px">
<template #previewItem="slotProps"> <template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%" /> <img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
</template> </template>
<template #thumbnailItem="slotProps"> <template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center"> <div class="p-grid p-nogutter p-justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" /> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
</div> </div>
@ -47,10 +47,10 @@
<template v-pre> <template v-pre>
&lt;h3 class="first"&gt;Default&lt;/h3&gt; &lt;h3 class="first"&gt;Default&lt;/h3&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"&gt; &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"&gt;
&lt;template #previewItem="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%" /&gt; &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #thumbnailItem="slotProps"&gt; &lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt; &lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" /&gt; &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" /&gt;
&lt;/div&gt; &lt;/div&gt;
@ -64,10 +64,10 @@
&lt;/div&gt; &lt;/div&gt;
&lt;Galleria :value="images" :activeItemIndex.sync="activeIndex" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"&gt; &lt;Galleria :value="images" :activeItemIndex.sync="activeIndex" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"&gt;
&lt;template #previewItem="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%" /&gt; &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #thumbnailItem="slotProps"&gt; &lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt; &lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" /&gt; &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" /&gt;
&lt;/div&gt; &lt;/div&gt;

8
src/views/galleria/GalleriaCaptionDemo.vue
View File

@ -11,10 +11,10 @@
<div class="content-section implementation"> <div class="content-section implementation">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"> <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px">
<template #previewItem="{item}"> <template #item="{item}">
<img :src="item.previewImageSrc" :alt="item.alt" style="width: 100%; display: block;" /> <img :src="item.previewImageSrc" :alt="item.alt" style="width: 100%; display: block;" />
</template> </template>
<template #thumbnailItem="{item}"> <template #thumbnail="{item}">
<div class="p-grid p-nogutter p-justify-center"> <div class="p-grid p-nogutter p-justify-center">
<img :src="item.thumbnailImageSrc" :alt="item.alt" style="display: block;" /> <img :src="item.thumbnailImageSrc" :alt="item.alt" style="display: block;" />
</div> </div>
@ -32,10 +32,10 @@
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"&gt; &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"&gt;
&lt;template #previewItem="{item}"&gt; &lt;template #item="{item}"&gt;
&lt;img :src="item.previewImageSrc" :alt="item.alt" style="width: 100%; display: block;" /&gt; &lt;img :src="item.previewImageSrc" :alt="item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #thumbnailItem="{item}"&gt; &lt;template #thumbnail="{item}"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt; &lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="item.thumbnailImageSrc" :alt="item.alt" style="display: block;" /&gt; &lt;img :src="item.thumbnailImageSrc" :alt="item.alt" style="display: block;" /&gt;
&lt;/div&gt; &lt;/div&gt;

16
src/views/galleria/GalleriaCircularDemo.vue
View File

@ -12,10 +12,10 @@
<div class="content-section implementation"> <div class="content-section implementation">
<h3 class="first">Basic</h3> <h3 class="first">Basic</h3>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px"> <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px">
<template #previewItem="slotProps"> <template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /> <img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template> </template>
<template #thumbnailItem="slotProps"> <template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center"> <div class="p-grid p-nogutter p-justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</div> </div>
@ -25,10 +25,10 @@
<h3>AutoPlay</h3> <h3>AutoPlay</h3>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px" <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"
:circular="true" :autoPlay="true" :transitionInterval="2000"> :circular="true" :autoPlay="true" :transitionInterval="2000">
<template #previewItem="slotProps"> <template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /> <img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template> </template>
<template #thumbnailItem="slotProps"> <template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center"> <div class="p-grid p-nogutter p-justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</div> </div>
@ -43,10 +43,10 @@
<template v-pre> <template v-pre>
&lt;h3 class="first"&gt;Basic&lt;/h3&gt; &lt;h3 class="first"&gt;Basic&lt;/h3&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px"&gt; &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px"&gt;
&lt;template #previewItem="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt; &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #thumbnailItem="slotProps"&gt; &lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt; &lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt; &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
&lt;/div&gt; &lt;/div&gt;
@ -56,10 +56,10 @@
&lt;h3&gt;AutoPlay&lt;/h3&gt; &lt;h3&gt;AutoPlay&lt;/h3&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px" &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"
:circular="true" :autoPlay="true" :transitionInterval="2000"&gt; :circular="true" :autoPlay="true" :transitionInterval="2000"&gt;
&lt;template #previewItem="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt; &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #thumbnailItem="slotProps"&gt; &lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt; &lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt; &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
&lt;/div&gt; &lt;/div&gt;

4
src/views/galleria/GalleriaDemo.vue
View File

@ -13,10 +13,10 @@
<Galleria ref="galleria" :value="images" :activeItemIndex.sync="activeItemIndex" :numVisible="5" style="max-width: 520px;" :class="galleriaClass" <Galleria ref="galleria" :value="images" :activeItemIndex.sync="activeItemIndex" :numVisible="5" style="max-width: 520px;" :class="galleriaClass"
:showThumbnails="showThumbnails" :showPreviewNavButtons="true" :showNavButtonsOnPreviewHover="true" :showThumbnails="showThumbnails" :showPreviewNavButtons="true" :showNavButtonsOnPreviewHover="true"
:circular="true" :autoPlay="true" :transitionInterval="3000"> :circular="true" :autoPlay="true" :transitionInterval="3000">
<template #previewItem="slotProps"> <template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" :style="[{'width': !isPreviewFullScreen ? '100%' : '', 'display': !isPreviewFullScreen ? 'block' : ''}]" /> <img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" :style="[{'width': !isPreviewFullScreen ? '100%' : '', 'display': !isPreviewFullScreen ? 'block' : ''}]" />
</template> </template>
<template #thumbnailItem="slotProps"> <template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center"> <div class="p-grid p-nogutter p-justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</div> </div>

22
src/views/galleria/GalleriaDoc.vue
View File

@ -8,10 +8,10 @@ import Galleria from 'primevue/galleria';
</CodeHighlight> </CodeHighlight>
<h3>Getting Started</h3> <h3>Getting Started</h3>
<p>Galleria requires previewItem template and a value as an array of objects.</p> <p>Galleria requires item template and a value as an array of objects.</p>
<CodeHighlight> <CodeHighlight>
&lt;Galleria :value="images"&gt; &lt;Galleria :value="images"&gt;
&lt;template #previewItem="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" /&gt; &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Galleria&gt; &lt;/Galleria&gt;
@ -39,10 +39,10 @@ export default {
<CodeHighlight> <CodeHighlight>
&lt;Galleria :value="images" :numVisible="5"&gt; &lt;Galleria :value="images" :numVisible="5"&gt;
&lt;template #previewItem="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%" /&gt; &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #thumbnailItem="slotProps"&gt; &lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt; &lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" /&gt; &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" /&gt;
&lt;/div&gt; &lt;/div&gt;
@ -56,10 +56,10 @@ export default {
<CodeHighlight> <CodeHighlight>
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5"&gt; &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5"&gt;
&lt;template #previewItem="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%" /&gt; &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #thumbnailItem="slotProps"&gt; &lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt; &lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" /&gt; &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" /&gt;
&lt;/div&gt; &lt;/div&gt;
@ -92,10 +92,10 @@ responsiveOptions: [
&lt;template #header&gt; &lt;template #header&gt;
&lt;h1&gt;Header&lt;/h1&gt; &lt;h1&gt;Header&lt;/h1&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #previewItem="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%" /&gt; &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #thumbnailItem="slotProps"&gt; &lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt; &lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" /&gt; &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" /&gt;
&lt;/div&gt; &lt;/div&gt;
@ -252,7 +252,7 @@ responsiveOptions: [
<td>Style class of the mask on fullscreen mode.</td> <td>Style class of the mask on fullscreen mode.</td>
</tr> </tr>
<tr> <tr>
<td>galleriaStyle</td> <td>containerStyle</td>
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Inline style of the component on fullscreen mode. Otherwise, the 'style' property can be used.</td> <td>Inline style of the component on fullscreen mode. Otherwise, the 'style' property can be used.</td>
@ -331,10 +331,10 @@ responsiveOptions: [
&lt;Galleria ref="galleria" :value="images" :activeItemIndex.sync="activeItemIndex" :numVisible="5" style="max-width: 520px;" :class="galleriaClass" &lt;Galleria ref="galleria" :value="images" :activeItemIndex.sync="activeItemIndex" :numVisible="5" style="max-width: 520px;" :class="galleriaClass"
:showThumbnails="showThumbnails" :showPreviewNavButtons="true" :showNavButtonsOnPreviewHover="true" :showThumbnails="showThumbnails" :showPreviewNavButtons="true" :showNavButtonsOnPreviewHover="true"
:circular="true" :autoPlay="true" :transitionInterval="3000"&gt; :circular="true" :autoPlay="true" :transitionInterval="3000"&gt;
&lt;template #previewItem="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" :style="[{'width': !isPreviewFullScreen ? '100%' : '', 'display': !isPreviewFullScreen ? 'block' : ''}]" /&gt; &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" :style="[{'width': !isPreviewFullScreen ? '100%' : '', 'display': !isPreviewFullScreen ? 'block' : ''}]" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #thumbnailItem="slotProps"&gt; &lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt; &lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt; &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
&lt;/div&gt; &lt;/div&gt;

36
src/views/galleria/GalleriaFullScreenDemo.vue
View File

@ -11,12 +11,12 @@
<div class="content-section implementation"> <div class="content-section implementation">
<h3 class="first">Basic</h3> <h3 class="first">Basic</h3>
<Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="9" galleriaStyle="max-width: 50%" <Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="9" containerStyle="max-width: 50%"
:circular="true" :fullScreen="true" :showPreviewNavButtons="true" :visible.sync="displayBasic"> :circular="true" :fullScreen="true" :showPreviewNavButtons="true" :visible.sync="displayBasic">
<template #previewItem="slotProps"> <template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /> <img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template> </template>
<template #thumbnailItem="slotProps"> <template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center"> <div class="p-grid p-nogutter p-justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</div> </div>
@ -26,12 +26,12 @@
<Button label="Show" icon="pi pi-external-link" @click="displayBasic = true" /> <Button label="Show" icon="pi pi-external-link" @click="displayBasic = true" />
<h3>Without Thumbnails</h3> <h3>Without Thumbnails</h3>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" galleriaStyle="max-width: 850px" <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" containerStyle="max-width: 850px"
:circular="true" :fullScreen="true" :showPreviewNavButtons="true" :showThumbnails="false" :visible.sync="displayBasic2"> :circular="true" :fullScreen="true" :showPreviewNavButtons="true" :showThumbnails="false" :visible.sync="displayBasic2">
<template #previewItem="slotProps"> <template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /> <img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template> </template>
<template #thumbnailItem="slotProps"> <template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center"> <div class="p-grid p-nogutter p-justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</div> </div>
@ -41,12 +41,12 @@
<Button label="Show" icon="pi pi-external-link" @click="displayBasic2 = true" /> <Button label="Show" icon="pi pi-external-link" @click="displayBasic2 = true" />
<h3>Custom Contents</h3> <h3>Custom Contents</h3>
<Galleria :value="images" :activeItemIndex.sync="activeItemIndex" :responsiveOptions="responsiveOptions" :numVisible="7" galleriaStyle="max-width: 850px" <Galleria :value="images" :activeItemIndex.sync="activeItemIndex" :responsiveOptions="responsiveOptions" :numVisible="7" containerStyle="max-width: 850px"
:circular="true" :fullScreen="true" :showPreviewNavButtons="true" :showThumbnails="false" :visible.sync="displayCustom"> :circular="true" :fullScreen="true" :showPreviewNavButtons="true" :showThumbnails="false" :visible.sync="displayCustom">
<template #previewItem="slotProps"> <template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /> <img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template> </template>
<template #thumbnailItem="slotProps"> <template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center"> <div class="p-grid p-nogutter p-justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</div> </div>
@ -66,12 +66,12 @@
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;h3 class="first"&gt;Basic&lt;/h3&gt; &lt;h3 class="first"&gt;Basic&lt;/h3&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="9" galleriaStyle="max-width: 50%" &lt;Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="9" containerStyle="max-width: 50%"
:circular="true" :fullScreen="true" :showPreviewNavButtons="true" :visible.sync="displayBasic"&gt; :circular="true" :fullScreen="true" :showPreviewNavButtons="true" :visible.sync="displayBasic"&gt;
&lt;template #previewItem="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt; &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #thumbnailItem="slotProps"&gt; &lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt; &lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt; &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
&lt;/div&gt; &lt;/div&gt;
@ -81,12 +81,12 @@
&lt;Button label="Show" icon="pi pi-external-link" @click="displayBasic = true" /&gt; &lt;Button label="Show" icon="pi pi-external-link" @click="displayBasic = true" /&gt;
&lt;h3&gt;Without Thumbnails&lt;/h3&gt; &lt;h3&gt;Without Thumbnails&lt;/h3&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" galleriaStyle="max-width: 850px" &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" containerStyle="max-width: 850px"
:circular="true" :fullScreen="true" :showPreviewNavButtons="true" :showThumbnails="false" :visible.sync="displayBasic2"&gt; :circular="true" :fullScreen="true" :showPreviewNavButtons="true" :showThumbnails="false" :visible.sync="displayBasic2"&gt;
&lt;template #previewItem="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt; &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #thumbnailItem="slotProps"&gt; &lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt; &lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt; &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
&lt;/div&gt; &lt;/div&gt;
@ -96,12 +96,12 @@
&lt;Button label="Show" icon="pi pi-external-link" @click="displayBasic2 = true" /&gt; &lt;Button label="Show" icon="pi pi-external-link" @click="displayBasic2 = true" /&gt;
&lt;h3&gt;Custom Contents&lt;/h3&gt; &lt;h3&gt;Custom Contents&lt;/h3&gt;
&lt;Galleria :value="images" :activeItemIndex.sync="activeItemIndex" :responsiveOptions="responsiveOptions" :numVisible="7" galleriaStyle="max-width: 850px" &lt;Galleria :value="images" :activeItemIndex.sync="activeItemIndex" :responsiveOptions="responsiveOptions" :numVisible="7" containerStyle="max-width: 850px"
:circular="true" :fullScreen="true" :showPreviewNavButtons="true" :showThumbnails="false" :visible.sync="displayCustom"&gt; :circular="true" :fullScreen="true" :showPreviewNavButtons="true" :showThumbnails="false" :visible.sync="displayCustom"&gt;
&lt;template #previewItem="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt; &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #thumbnailItem="slotProps"&gt; &lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt; &lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt; &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
&lt;/div&gt; &lt;/div&gt;

80
src/views/galleria/GalleriaIndicatorDemo.vue
View File

@ -13,10 +13,10 @@
<h3 class="first">Basic</h3> <h3 class="first">Basic</h3>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px" <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"
:showThumbnails="false" :showIndicators="true"> :showThumbnails="false" :showIndicators="true">
<template #previewItem="slotProps"> <template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /> <img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template> </template>
<template #thumbnailItem="slotProps"> <template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center"> <div class="p-grid p-nogutter p-justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</div> </div>
@ -28,10 +28,10 @@
<h3>Change Preview On Indicator Hover</h3> <h3>Change Preview On Indicator Hover</h3>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px" <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"
:showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true"> :showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true">
<template #previewItem="slotProps"> <template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /> <img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template> </template>
<template #thumbnailItem="slotProps"> <template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center"> <div class="p-grid p-nogutter p-justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</div> </div>
@ -43,10 +43,10 @@
<h3>Show Indicator On Preview</h3> <h3>Show Indicator On Preview</h3>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px" <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"
:showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" :showIndicatorsOnPreview="true"> :showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" :showIndicatorsOnPreview="true">
<template #previewItem="slotProps"> <template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /> <img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template> </template>
<template #thumbnailItem="slotProps"> <template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center"> <div class="p-grid p-nogutter p-justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</div> </div>
@ -61,10 +61,10 @@
<template #header> <template #header>
Bottom Bottom
</template> </template>
<template #previewItem="slotProps"> <template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /> <img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template> </template>
<template #thumbnailItem="slotProps"> <template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center"> <div class="p-grid p-nogutter p-justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</div> </div>
@ -76,10 +76,10 @@
<template #header> <template #header>
Top Top
</template> </template>
<template #previewItem="slotProps"> <template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /> <img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template> </template>
<template #thumbnailItem="slotProps"> <template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center"> <div class="p-grid p-nogutter p-justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</div> </div>
@ -91,10 +91,10 @@
<template #header> <template #header>
Left Left
</template> </template>
<template #previewItem="slotProps"> <template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /> <img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template> </template>
<template #thumbnailItem="slotProps"> <template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center"> <div class="p-grid p-nogutter p-justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</div> </div>
@ -106,10 +106,10 @@
<template #header> <template #header>
Right Right
</template> </template>
<template #previewItem="slotProps"> <template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /> <img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template> </template>
<template #thumbnailItem="slotProps"> <template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center"> <div class="p-grid p-nogutter p-justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</div> </div>
@ -121,10 +121,10 @@
<h3>Template</h3> <h3>Template</h3>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px;" class="custom-indicator-galleria" <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px;" class="custom-indicator-galleria"
:showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" :showIndicatorsOnPreview="true" indicatorsPosition="left"> :showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" :showIndicatorsOnPreview="true" indicatorsPosition="left">
<template #previewItem="slotProps"> <template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /> <img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template> </template>
<template #thumbnailItem="slotProps"> <template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center"> <div class="p-grid p-nogutter p-justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</div> </div>
@ -138,10 +138,10 @@
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px; margin-top: 2em;" class="custom-indicator-galleria" <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px; margin-top: 2em;" class="custom-indicator-galleria"
:showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" indicatorsPosition="left"> :showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" indicatorsPosition="left">
<template #previewItem="slotProps"> <template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /> <img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template> </template>
<template #thumbnailItem="slotProps"> <template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center"> <div class="p-grid p-nogutter p-justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</div> </div>
@ -155,10 +155,10 @@
<Galleria :value="images2" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px; margin-top: 2em;" class="custom-indicator-galleria2" <Galleria :value="images2" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px; margin-top: 2em;" class="custom-indicator-galleria2"
:showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" indicatorsPosition="left"> :showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" indicatorsPosition="left">
<template #previewItem="slotProps"> <template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /> <img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template> </template>
<template #thumbnailItem="slotProps"> <template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center"> <div class="p-grid p-nogutter p-justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</div> </div>
@ -179,10 +179,10 @@
&lt;h3 class="first"&gt;Basic&lt;/h3&gt; &lt;h3 class="first"&gt;Basic&lt;/h3&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px" &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"
:showThumbnails="false" :showIndicators="true"&gt; :showThumbnails="false" :showIndicators="true"&gt;
&lt;template #previewItem="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt; &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #thumbnailItem="slotProps"&gt; &lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt; &lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt; &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
&lt;/div&gt; &lt;/div&gt;
@ -194,10 +194,10 @@
&lt;h3&gt;Change Preview On Indicator Hover&lt;/h3&gt; &lt;h3&gt;Change Preview On Indicator Hover&lt;/h3&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px" &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"
:showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true"&gt; :showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true"&gt;
&lt;template #previewItem="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt; &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #thumbnailItem="slotProps"&gt; &lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt; &lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt; &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
&lt;/div&gt; &lt;/div&gt;
@ -209,10 +209,10 @@
&lt;h3&gt;Show Indicator On Preview&lt;/h3&gt; &lt;h3&gt;Show Indicator On Preview&lt;/h3&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px" &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"
:showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" :showIndicatorsOnPreview="true"&gt; :showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" :showIndicatorsOnPreview="true"&gt;
&lt;template #previewItem="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt; &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #thumbnailItem="slotProps"&gt; &lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt; &lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt; &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
&lt;/div&gt; &lt;/div&gt;
@ -227,10 +227,10 @@
&lt;template #header&gt; &lt;template #header&gt;
Bottom Bottom
&lt;/template&gt; &lt;/template&gt;
&lt;template #previewItem="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt; &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #thumbnailItem="slotProps"&gt; &lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt; &lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt; &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
&lt;/div&gt; &lt;/div&gt;
@ -242,10 +242,10 @@
&lt;template #header&gt; &lt;template #header&gt;
Top Top
&lt;/template&gt; &lt;/template&gt;
&lt;template #previewItem="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt; &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #thumbnailItem="slotProps"&gt; &lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt; &lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt; &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
&lt;/div&gt; &lt;/div&gt;
@ -257,10 +257,10 @@
&lt;template #header&gt; &lt;template #header&gt;
Left Left
&lt;/template&gt; &lt;/template&gt;
&lt;template #previewItem="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt; &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #thumbnailItem="slotProps"&gt; &lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt; &lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt; &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
&lt;/div&gt; &lt;/div&gt;
@ -272,10 +272,10 @@
&lt;template #header&gt; &lt;template #header&gt;
Right Right
&lt;/template&gt; &lt;/template&gt;
&lt;template #previewItem="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt; &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #thumbnailItem="slotProps"&gt; &lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt; &lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt; &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
&lt;/div&gt; &lt;/div&gt;
@ -287,10 +287,10 @@
&lt;h3&gt;Template&lt;/h3&gt; &lt;h3&gt;Template&lt;/h3&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px;" class="custom-indicator-galleria" &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px;" class="custom-indicator-galleria"
:showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" :showIndicatorsOnPreview="true" indicatorsPosition="left"&gt; :showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" :showIndicatorsOnPreview="true" indicatorsPosition="left"&gt;
&lt;template #previewItem="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt; &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #thumbnailItem="slotProps"&gt; &lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt; &lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt; &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
&lt;/div&gt; &lt;/div&gt;
@ -304,10 +304,10 @@
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px; margin-top: 2em;" class="custom-indicator-galleria" &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px; margin-top: 2em;" class="custom-indicator-galleria"
:showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" indicatorsPosition="left"&gt; :showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" indicatorsPosition="left"&gt;
&lt;template #previewItem="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt; &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #thumbnailItem="slotProps"&gt; &lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt; &lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt; &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
&lt;/div&gt; &lt;/div&gt;
@ -321,10 +321,10 @@
&lt;Galleria :value="images2" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px; margin-top: 2em;" class="custom-indicator-galleria2" &lt;Galleria :value="images2" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px; margin-top: 2em;" class="custom-indicator-galleria2"
:showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" indicatorsPosition="left"&gt; :showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" indicatorsPosition="left"&gt;
&lt;template #previewItem="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt; &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #thumbnailItem="slotProps"&gt; &lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt; &lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt; &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
&lt;/div&gt; &lt;/div&gt;

48
src/views/galleria/GalleriaPreviewDemo.vue
View File

@ -12,10 +12,10 @@
<div class="content-section implementation"> <div class="content-section implementation">
<h3 class="first">Basic</h3> <h3 class="first">Basic</h3>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px"> <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px">
<template #previewItem="slotProps"> <template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /> <img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template> </template>
<template #thumbnailItem="slotProps"> <template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center"> <div class="p-grid p-nogutter p-justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</div> </div>
@ -28,10 +28,10 @@
<template #header> <template #header>
With Thumbnails With Thumbnails
</template> </template>
<template #previewItem="slotProps"> <template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /> <img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template> </template>
<template #thumbnailItem="slotProps"> <template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center"> <div class="p-grid p-nogutter p-justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</div> </div>
@ -43,10 +43,10 @@
<template #header> <template #header>
Without Thumbnails Without Thumbnails
</template> </template>
<template #previewItem="slotProps"> <template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /> <img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template> </template>
<template #thumbnailItem="slotProps"> <template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center"> <div class="p-grid p-nogutter p-justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</div> </div>
@ -59,10 +59,10 @@
<template #header> <template #header>
With Thumbnails With Thumbnails
</template> </template>
<template #previewItem="slotProps"> <template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /> <img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template> </template>
<template #thumbnailItem="slotProps"> <template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center"> <div class="p-grid p-nogutter p-justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</div> </div>
@ -74,10 +74,10 @@
<template #header> <template #header>
Without Thumbnails Without Thumbnails
</template> </template>
<template #previewItem="slotProps"> <template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /> <img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template> </template>
<template #thumbnailItem="slotProps"> <template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center"> <div class="p-grid p-nogutter p-justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</div> </div>
@ -88,10 +88,10 @@
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px;" <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px;"
:showPreviewNavButtons="true" :showThumbnails="false" :showNavButtonsOnPreviewHover="true" :showPreviewNavButtons="true" :showThumbnails="false" :showNavButtonsOnPreviewHover="true"
:showIndicators="true" :showIndicatorsOnPreview="true" :changePreviewOnIndicatorHover="true"> :showIndicators="true" :showIndicatorsOnPreview="true" :changePreviewOnIndicatorHover="true">
<template #previewItem="slotProps"> <template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /> <img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template> </template>
<template #thumbnailItem="slotProps"> <template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center"> <div class="p-grid p-nogutter p-justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</div> </div>
@ -106,10 +106,10 @@
<template v-pre> <template v-pre>
&lt;h3 class="first"&gt;Basic&lt;/h3&gt; &lt;h3 class="first"&gt;Basic&lt;/h3&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px"&gt; &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px"&gt;
&lt;template #previewItem="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt; &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #thumbnailItem="slotProps"&gt; &lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt; &lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt; &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
&lt;/div&gt; &lt;/div&gt;
@ -122,10 +122,10 @@
&lt;template #header&gt; &lt;template #header&gt;
With Thumbnails With Thumbnails
&lt;/template&gt; &lt;/template&gt;
&lt;template #previewItem="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt; &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #thumbnailItem="slotProps"&gt; &lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt; &lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt; &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
&lt;/div&gt; &lt;/div&gt;
@ -137,10 +137,10 @@
&lt;template #header&gt; &lt;template #header&gt;
Without Thumbnails Without Thumbnails
&lt;/template&gt; &lt;/template&gt;
&lt;template #previewItem="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt; &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #thumbnailItem="slotProps"&gt; &lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt; &lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt; &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
&lt;/div&gt; &lt;/div&gt;
@ -153,10 +153,10 @@
&lt;template #header&gt; &lt;template #header&gt;
With Thumbnails With Thumbnails
&lt;/template&gt; &lt;/template&gt;
&lt;template #previewItem="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt; &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #thumbnailItem="slotProps"&gt; &lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt; &lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt; &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
&lt;/div&gt; &lt;/div&gt;
@ -168,10 +168,10 @@
&lt;template #header&gt; &lt;template #header&gt;
Without Thumbnails Without Thumbnails
&lt;/template&gt; &lt;/template&gt;
&lt;template #previewItem="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt; &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #thumbnailItem="slotProps"&gt; &lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt; &lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt; &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
&lt;/div&gt; &lt;/div&gt;
@ -182,10 +182,10 @@
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px;" &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px;"
:showPreviewNavButtons="true" :showThumbnails="false" :showNavButtonsOnPreviewHover="true" :showPreviewNavButtons="true" :showThumbnails="false" :showNavButtonsOnPreviewHover="true"
:showIndicators="true" :showIndicatorsOnPreview="true" :changePreviewOnIndicatorHover="true"&gt; :showIndicators="true" :showIndicatorsOnPreview="true" :changePreviewOnIndicatorHover="true"&gt;
&lt;template #previewItem="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt; &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #thumbnailItem="slotProps"&gt; &lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt; &lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt; &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
&lt;/div&gt; &lt;/div&gt;

8
src/views/galleria/GalleriaResponsiveDemo.vue
View File

@ -11,10 +11,10 @@
<div class="content-section implementation"> <div class="content-section implementation">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" :circular="true" style="max-width: 800px"> <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" :circular="true" style="max-width: 800px">
<template #previewItem="slotProps"> <template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /> <img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template> </template>
<template #thumbnailItem="slotProps"> <template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center"> <div class="p-grid p-nogutter p-justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</div> </div>
@ -28,10 +28,10 @@
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" :circular="true" style="max-width: 800px"&gt; &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" :circular="true" style="max-width: 800px"&gt;
&lt;template #previewItem="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt; &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #thumbnailItem="slotProps"&gt; &lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt; &lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt; &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
&lt;/div&gt; &lt;/div&gt;

40
src/views/galleria/GalleriaThumbnailDemo.vue
View File

@ -12,10 +12,10 @@
<div class="content-section implementation"> <div class="content-section implementation">
<h3 class="first">Basic</h3> <h3 class="first">Basic</h3>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"> <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px">
<template #previewItem="slotProps"> <template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /> <img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template> </template>
<template #thumbnailItem="slotProps"> <template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center"> <div class="p-grid p-nogutter p-justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" /> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
</div> </div>
@ -27,10 +27,10 @@
<template #header> <template #header>
Left Left
</template> </template>
<template #previewItem="slotProps"> <template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /> <img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template> </template>
<template #thumbnailItem="slotProps"> <template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center"> <div class="p-grid p-nogutter p-justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" /> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
</div> </div>
@ -41,10 +41,10 @@
<template #header> <template #header>
Right Right
</template> </template>
<template #previewItem="slotProps"> <template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /> <img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template> </template>
<template #thumbnailItem="slotProps"> <template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center"> <div class="p-grid p-nogutter p-justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" /> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
</div> </div>
@ -55,10 +55,10 @@
<template #header> <template #header>
Top Top
</template> </template>
<template #previewItem="slotProps"> <template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /> <img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template> </template>
<template #thumbnailItem="slotProps"> <template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center"> <div class="p-grid p-nogutter p-justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" /> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
</div> </div>
@ -69,10 +69,10 @@
<template #header> <template #header>
Bottom Bottom
</template> </template>
<template #previewItem="slotProps"> <template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /> <img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template> </template>
<template #thumbnailItem="slotProps"> <template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center"> <div class="p-grid p-nogutter p-justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" /> <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
</div> </div>
@ -87,10 +87,10 @@
<template v-pre> <template v-pre>
&lt;h3 class="first"&gt;Basic&lt;/h3&gt; &lt;h3 class="first"&gt;Basic&lt;/h3&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"&gt; &lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"&gt;
&lt;template #previewItem="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt; &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #thumbnailItem="slotProps"&gt; &lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt; &lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" /&gt; &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" /&gt;
&lt;/div&gt; &lt;/div&gt;
@ -102,10 +102,10 @@
&lt;template #header&gt; &lt;template #header&gt;
Left Left
&lt;/template&gt; &lt;/template&gt;
&lt;template #previewItem="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt; &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #thumbnailItem="slotProps"&gt; &lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt; &lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" /&gt; &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" /&gt;
&lt;/div&gt; &lt;/div&gt;
@ -116,10 +116,10 @@
&lt;template #header&gt; &lt;template #header&gt;
Right Right
&lt;/template&gt; &lt;/template&gt;
&lt;template #previewItem="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt; &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #thumbnailItem="slotProps"&gt; &lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt; &lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" /&gt; &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" /&gt;
&lt;/div&gt; &lt;/div&gt;
@ -130,10 +130,10 @@
&lt;template #header&gt; &lt;template #header&gt;
Top Top
&lt;/template&gt; &lt;/template&gt;
&lt;template #previewItem="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt; &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #thumbnailItem="slotProps"&gt; &lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt; &lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" /&gt; &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" /&gt;
&lt;/div&gt; &lt;/div&gt;
@ -144,10 +144,10 @@
&lt;template #header&gt; &lt;template #header&gt;
Bottom Bottom
&lt;/template&gt; &lt;/template&gt;
&lt;template #previewItem="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt; &lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #thumbnailItem="slotProps"&gt; &lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt; &lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" /&gt; &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" /&gt;
&lt;/div&gt; &lt;/div&gt;