Add galleria demo files
mertsincan
parent
71d3a8e5db
commit
74994e22d9
|
|
@ -0,0 +1,248 @@
|
|||
<template>
|
||||
<div>
|
||||
<GalleriaSubMenu />
|
||||
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1 style="margin-bottom: 0px;">Galleria - FullScreen</h1>
|
||||
<p></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic</h3>
|
||||
<Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="9" galleriaStyle="max-width: 50%"
|
||||
:circular="true" :fullScreen="true" :showPreviewNavButtons="true" :visible.sync="displayBasic">
|
||||
<template #previewItem="slotProps">
|
||||
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
|
||||
</template>
|
||||
<template #thumbnailItem="slotProps">
|
||||
<div class="p-grid p-nogutter p-justify-center">
|
||||
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
|
||||
</div>
|
||||
</template>
|
||||
</Galleria>
|
||||
|
||||
<Button label="Show" icon="pi pi-external-link" @click="displayBasic = true" />
|
||||
|
||||
<h3>Without Thumbnails</h3>
|
||||
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" galleriaStyle="max-width: 850px"
|
||||
:circular="true" :fullScreen="true" :showPreviewNavButtons="true" :showThumbnails="false" :visible.sync="displayBasic2">
|
||||
<template #previewItem="slotProps">
|
||||
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
|
||||
</template>
|
||||
<template #thumbnailItem="slotProps">
|
||||
<div class="p-grid p-nogutter p-justify-center">
|
||||
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
|
||||
</div>
|
||||
</template>
|
||||
</Galleria>
|
||||
|
||||
<Button label="Show" icon="pi pi-external-link" @click="displayBasic2 = true" />
|
||||
|
||||
<h3>Custom Contents</h3>
|
||||
<Galleria :value="images" :activeItemIndex.sync="activeItemIndex" :responsiveOptions="responsiveOptions" :numVisible="7" galleriaStyle="max-width: 850px"
|
||||
:circular="true" :fullScreen="true" :showPreviewNavButtons="true" :showThumbnails="false" :visible.sync="displayCustom">
|
||||
<template #previewItem="slotProps">
|
||||
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
|
||||
</template>
|
||||
<template #thumbnailItem="slotProps">
|
||||
<div class="p-grid p-nogutter p-justify-center">
|
||||
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
|
||||
</div>
|
||||
</template>
|
||||
</Galleria>
|
||||
|
||||
<div v-if="images" class="p-grid" style="max-width: 400px;">
|
||||
<div v-for="(image, index) of images" class="p-col-3" :key="index">
|
||||
<img :src="image.thumbnailImageSrc" :alt="image.alt" style="cursor: pointer" @click="imageClick(index)"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section documentation">
|
||||
<TabView>
|
||||
<TabPanel header="Source">
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<h3 class="first">Basic</h3>
|
||||
<Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="9" galleriaStyle="max-width: 50%"
|
||||
:circular="true" :fullScreen="true" :showPreviewNavButtons="true" :visible.sync="displayBasic">
|
||||
<template #previewItem="slotProps">
|
||||
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
|
||||
</template>
|
||||
<template #thumbnailItem="slotProps">
|
||||
<div class="p-grid p-nogutter p-justify-center">
|
||||
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
|
||||
</div>
|
||||
</template>
|
||||
</Galleria>
|
||||
|
||||
<Button label="Show" icon="pi pi-external-link" @click="displayBasic = true" />
|
||||
|
||||
<h3>Without Thumbnails</h3>
|
||||
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" galleriaStyle="max-width: 850px"
|
||||
:circular="true" :fullScreen="true" :showPreviewNavButtons="true" :showThumbnails="false" :visible.sync="displayBasic2">
|
||||
<template #previewItem="slotProps">
|
||||
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
|
||||
</template>
|
||||
<template #thumbnailItem="slotProps">
|
||||
<div class="p-grid p-nogutter p-justify-center">
|
||||
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
|
||||
</div>
|
||||
</template>
|
||||
</Galleria>
|
||||
|
||||
<Button label="Show" icon="pi pi-external-link" @click="displayBasic2 = true" />
|
||||
|
||||
<h3>Custom Contents</h3>
|
||||
<Galleria :value="images" :activeItemIndex.sync="activeItemIndex" :responsiveOptions="responsiveOptions" :numVisible="7" galleriaStyle="max-width: 850px"
|
||||
:circular="true" :fullScreen="true" :showPreviewNavButtons="true" :showThumbnails="false" :visible.sync="displayCustom">
|
||||
<template #previewItem="slotProps">
|
||||
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
|
||||
</template>
|
||||
<template #thumbnailItem="slotProps">
|
||||
<div class="p-grid p-nogutter p-justify-center">
|
||||
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
|
||||
</div>
|
||||
</template>
|
||||
</Galleria>
|
||||
|
||||
<div v-if="images" class="p-grid" style="max-width: 400px;">
|
||||
<div v-for="(image, index) of images" class="p-col-3" :key="index">
|
||||
<img :src="image.thumbnailImageSrc" :alt="image.alt" style="cursor: pointer" @click="imageClick(index)"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="javascript">
|
||||
import GalleriaService from '../../service/GalleriaService';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
images: null,
|
||||
activeItemIndex: 0,
|
||||
responsiveOptions: [
|
||||
{
|
||||
breakpoint: '1024px',
|
||||
numVisible: 5
|
||||
},
|
||||
{
|
||||
breakpoint: '768px',
|
||||
numVisible: 3
|
||||
},
|
||||
{
|
||||
breakpoint: '560px',
|
||||
numVisible: 1
|
||||
}
|
||||
],
|
||||
responsiveOptions2: [
|
||||
{
|
||||
breakpoint: '1500px',
|
||||
numVisible: 5
|
||||
},
|
||||
{
|
||||
breakpoint: '1024px',
|
||||
numVisible: 3
|
||||
},
|
||||
{
|
||||
breakpoint: '768px',
|
||||
numVisible: 2
|
||||
},
|
||||
{
|
||||
breakpoint: '560px',
|
||||
numVisible: 1
|
||||
}
|
||||
],
|
||||
displayBasic: false,
|
||||
displayBasic2: false,
|
||||
displayCustom: false
|
||||
}
|
||||
},
|
||||
galleriaService: null,
|
||||
created() {
|
||||
this.galleriaService = new GalleriaService();
|
||||
},
|
||||
mounted() {
|
||||
this.galleriaService.getImages().then(data => this.images = data);
|
||||
},
|
||||
methods: {
|
||||
imageClick(index) {
|
||||
this.activeItemIndex = index;
|
||||
this.displayCustom = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
</TabPanel>
|
||||
</TabView>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import GalleriaService from '../../service/GalleriaService';
|
||||
import GalleriaSubMenu from './GalleriaSubMenu';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
images: null,
|
||||
activeItemIndex: 0,
|
||||
responsiveOptions: [
|
||||
{
|
||||
breakpoint: '1024px',
|
||||
numVisible: 5
|
||||
},
|
||||
{
|
||||
breakpoint: '768px',
|
||||
numVisible: 3
|
||||
},
|
||||
{
|
||||
breakpoint: '560px',
|
||||
numVisible: 1
|
||||
}
|
||||
],
|
||||
responsiveOptions2: [
|
||||
{
|
||||
breakpoint: '1500px',
|
||||
numVisible: 5
|
||||
},
|
||||
{
|
||||
breakpoint: '1024px',
|
||||
numVisible: 3
|
||||
},
|
||||
{
|
||||
breakpoint: '768px',
|
||||
numVisible: 2
|
||||
},
|
||||
{
|
||||
breakpoint: '560px',
|
||||
numVisible: 1
|
||||
}
|
||||
],
|
||||
displayBasic: false,
|
||||
displayBasic2: false,
|
||||
displayCustom: false
|
||||
}
|
||||
},
|
||||
galleriaService: null,
|
||||
created() {
|
||||
this.galleriaService = new GalleriaService();
|
||||
},
|
||||
mounted() {
|
||||
this.galleriaService.getImages().then(data => this.images = data);
|
||||
},
|
||||
methods: {
|
||||
imageClick(index) {
|
||||
this.activeItemIndex = index;
|
||||
this.displayCustom = true;
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'GalleriaSubMenu': GalleriaSubMenu
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,595 @@
|
|||
<template>
|
||||
<div>
|
||||
<GalleriaSubMenu />
|
||||
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1 style="margin-bottom: 0px;">Galleria - Indicator</h1>
|
||||
<p></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic</h3>
|
||||
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"
|
||||
:showThumbnails="false" :showIndicators="true">
|
||||
<template #previewItem="slotProps">
|
||||
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
|
||||
</template>
|
||||
<template #thumbnailItem="slotProps">
|
||||
<div class="p-grid p-nogutter p-justify-center">
|
||||
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
|
||||
</div>
|
||||
</template>
|
||||
</Galleria>
|
||||
|
||||
<hr />
|
||||
|
||||
<h3>Change Preview On Indicator Hover</h3>
|
||||
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"
|
||||
:showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true">
|
||||
<template #previewItem="slotProps">
|
||||
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
|
||||
</template>
|
||||
<template #thumbnailItem="slotProps">
|
||||
<div class="p-grid p-nogutter p-justify-center">
|
||||
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
|
||||
</div>
|
||||
</template>
|
||||
</Galleria>
|
||||
|
||||
<hr />
|
||||
|
||||
<h3>Show Indicator On Preview</h3>
|
||||
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"
|
||||
:showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" :showIndicatorsOnPreview="true">
|
||||
<template #previewItem="slotProps">
|
||||
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
|
||||
</template>
|
||||
<template #thumbnailItem="slotProps">
|
||||
<div class="p-grid p-nogutter p-justify-center">
|
||||
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
|
||||
</div>
|
||||
</template>
|
||||
</Galleria>
|
||||
|
||||
<hr />
|
||||
|
||||
<h3>Position</h3>
|
||||
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"
|
||||
:showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" :showIndicatorsOnPreview="true" indicatorsPosition="bottom">
|
||||
<template #header>
|
||||
Bottom
|
||||
</template>
|
||||
<template #previewItem="slotProps">
|
||||
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
|
||||
</template>
|
||||
<template #thumbnailItem="slotProps">
|
||||
<div class="p-grid p-nogutter p-justify-center">
|
||||
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
|
||||
</div>
|
||||
</template>
|
||||
</Galleria>
|
||||
|
||||
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px; margin-top: 2em;"
|
||||
:showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" :showIndicatorsOnPreview="true" indicatorsPosition="top">
|
||||
<template #header>
|
||||
Top
|
||||
</template>
|
||||
<template #previewItem="slotProps">
|
||||
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
|
||||
</template>
|
||||
<template #thumbnailItem="slotProps">
|
||||
<div class="p-grid p-nogutter p-justify-center">
|
||||
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
|
||||
</div>
|
||||
</template>
|
||||
</Galleria>
|
||||
|
||||
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px; margin-top: 2em;"
|
||||
:showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" :showIndicatorsOnPreview="true" indicatorsPosition="left">
|
||||
<template #header>
|
||||
Left
|
||||
</template>
|
||||
<template #previewItem="slotProps">
|
||||
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
|
||||
</template>
|
||||
<template #thumbnailItem="slotProps">
|
||||
<div class="p-grid p-nogutter p-justify-center">
|
||||
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
|
||||
</div>
|
||||
</template>
|
||||
</Galleria>
|
||||
|
||||
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px; margin-top: 2em;"
|
||||
:showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" :showIndicatorsOnPreview="true" indicatorsPosition="right">
|
||||
<template #header>
|
||||
Right
|
||||
</template>
|
||||
<template #previewItem="slotProps">
|
||||
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
|
||||
</template>
|
||||
<template #thumbnailItem="slotProps">
|
||||
<div class="p-grid p-nogutter p-justify-center">
|
||||
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
|
||||
</div>
|
||||
</template>
|
||||
</Galleria>
|
||||
|
||||
<hr />
|
||||
|
||||
<h3>Template</h3>
|
||||
<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">
|
||||
<template #previewItem="slotProps">
|
||||
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
|
||||
</template>
|
||||
<template #thumbnailItem="slotProps">
|
||||
<div class="p-grid p-nogutter p-justify-center">
|
||||
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
|
||||
</div>
|
||||
</template>
|
||||
<template #indicator="{index}">
|
||||
<div>
|
||||
{{index + 1}}
|
||||
</div>
|
||||
</template>
|
||||
</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">
|
||||
<template #previewItem="slotProps">
|
||||
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
|
||||
</template>
|
||||
<template #thumbnailItem="slotProps">
|
||||
<div class="p-grid p-nogutter p-justify-center">
|
||||
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
|
||||
</div>
|
||||
</template>
|
||||
<template #indicator="{index}">
|
||||
<div>
|
||||
{{index + 1}}
|
||||
</div>
|
||||
</template>
|
||||
</Galleria>
|
||||
|
||||
<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">
|
||||
<template #previewItem="slotProps">
|
||||
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
|
||||
</template>
|
||||
<template #thumbnailItem="slotProps">
|
||||
<div class="p-grid p-nogutter p-justify-center">
|
||||
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
|
||||
</div>
|
||||
</template>
|
||||
<template #indicator="{index}">
|
||||
<div style="padding: .2em; cursor: pointer">
|
||||
<img :src="images2[index].thumbnailImageSrc" :alt="images2[index].alt" style="display: block"/>
|
||||
</div>
|
||||
</template>
|
||||
</Galleria>
|
||||
</div>
|
||||
|
||||
<div class="content-section documentation">
|
||||
<TabView>
|
||||
<TabPanel header="Source">
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<h3 class="first">Basic</h3>
|
||||
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"
|
||||
:showThumbnails="false" :showIndicators="true">
|
||||
<template #previewItem="slotProps">
|
||||
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
|
||||
</template>
|
||||
<template #thumbnailItem="slotProps">
|
||||
<div class="p-grid p-nogutter p-justify-center">
|
||||
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
|
||||
</div>
|
||||
</template>
|
||||
</Galleria>
|
||||
|
||||
<hr />
|
||||
|
||||
<h3>Change Preview On Indicator Hover</h3>
|
||||
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"
|
||||
:showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true">
|
||||
<template #previewItem="slotProps">
|
||||
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
|
||||
</template>
|
||||
<template #thumbnailItem="slotProps">
|
||||
<div class="p-grid p-nogutter p-justify-center">
|
||||
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
|
||||
</div>
|
||||
</template>
|
||||
</Galleria>
|
||||
|
||||
<hr />
|
||||
|
||||
<h3>Show Indicator On Preview</h3>
|
||||
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"
|
||||
:showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" :showIndicatorsOnPreview="true">
|
||||
<template #previewItem="slotProps">
|
||||
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
|
||||
</template>
|
||||
<template #thumbnailItem="slotProps">
|
||||
<div class="p-grid p-nogutter p-justify-center">
|
||||
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
|
||||
</div>
|
||||
</template>
|
||||
</Galleria>
|
||||
|
||||
<hr />
|
||||
|
||||
<h3>Position</h3>
|
||||
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"
|
||||
:showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" :showIndicatorsOnPreview="true" indicatorsPosition="bottom">
|
||||
<template #header>
|
||||
Bottom
|
||||
</template>
|
||||
<template #previewItem="slotProps">
|
||||
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
|
||||
</template>
|
||||
<template #thumbnailItem="slotProps">
|
||||
<div class="p-grid p-nogutter p-justify-center">
|
||||
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
|
||||
</div>
|
||||
</template>
|
||||
</Galleria>
|
||||
|
||||
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px; margin-top: 2em;"
|
||||
:showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" :showIndicatorsOnPreview="true" indicatorsPosition="top">
|
||||
<template #header>
|
||||
Top
|
||||
</template>
|
||||
<template #previewItem="slotProps">
|
||||
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
|
||||
</template>
|
||||
<template #thumbnailItem="slotProps">
|
||||
<div class="p-grid p-nogutter p-justify-center">
|
||||
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
|
||||
</div>
|
||||
</template>
|
||||
</Galleria>
|
||||
|
||||
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px; margin-top: 2em;"
|
||||
:showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" :showIndicatorsOnPreview="true" indicatorsPosition="left">
|
||||
<template #header>
|
||||
Left
|
||||
</template>
|
||||
<template #previewItem="slotProps">
|
||||
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
|
||||
</template>
|
||||
<template #thumbnailItem="slotProps">
|
||||
<div class="p-grid p-nogutter p-justify-center">
|
||||
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
|
||||
</div>
|
||||
</template>
|
||||
</Galleria>
|
||||
|
||||
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px; margin-top: 2em;"
|
||||
:showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" :showIndicatorsOnPreview="true" indicatorsPosition="right">
|
||||
<template #header>
|
||||
Right
|
||||
</template>
|
||||
<template #previewItem="slotProps">
|
||||
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
|
||||
</template>
|
||||
<template #thumbnailItem="slotProps">
|
||||
<div class="p-grid p-nogutter p-justify-center">
|
||||
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
|
||||
</div>
|
||||
</template>
|
||||
</Galleria>
|
||||
|
||||
<hr />
|
||||
|
||||
<h3>Template</h3>
|
||||
<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">
|
||||
<template #previewItem="slotProps">
|
||||
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
|
||||
</template>
|
||||
<template #thumbnailItem="slotProps">
|
||||
<div class="p-grid p-nogutter p-justify-center">
|
||||
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
|
||||
</div>
|
||||
</template>
|
||||
<template #indicator="{index}">
|
||||
<div>
|
||||
{{index + 1}}
|
||||
</div>
|
||||
</template>
|
||||
</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">
|
||||
<template #previewItem="slotProps">
|
||||
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
|
||||
</template>
|
||||
<template #thumbnailItem="slotProps">
|
||||
<div class="p-grid p-nogutter p-justify-center">
|
||||
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
|
||||
</div>
|
||||
</template>
|
||||
<template #indicator="{index}">
|
||||
<div>
|
||||
{{index + 1}}
|
||||
</div>
|
||||
</template>
|
||||
</Galleria>
|
||||
|
||||
<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">
|
||||
<template #previewItem="slotProps">
|
||||
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
|
||||
</template>
|
||||
<template #thumbnailItem="slotProps">
|
||||
<div class="p-grid p-nogutter p-justify-center">
|
||||
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
|
||||
</div>
|
||||
</template>
|
||||
<template #indicator="{index}">
|
||||
<div style="padding: .2em; cursor: pointer">
|
||||
<img :src="images2[index].thumbnailImageSrc" :alt="images2[index].alt" style="display: block"/>
|
||||
</div>
|
||||
</template>
|
||||
</Galleria>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="javascript">
|
||||
import GalleriaService from '../../service/GalleriaService';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
images: null,
|
||||
images2: null,
|
||||
responsiveOptions: [
|
||||
{
|
||||
breakpoint: '1024px',
|
||||
numVisible: 5
|
||||
},
|
||||
{
|
||||
breakpoint: '768px',
|
||||
numVisible: 3
|
||||
},
|
||||
{
|
||||
breakpoint: '560px',
|
||||
numVisible: 1
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
galleriaService: null,
|
||||
created() {
|
||||
this.galleriaService = new GalleriaService();
|
||||
},
|
||||
mounted() {
|
||||
this.galleriaService.getImages().then(data => {
|
||||
this.images = data;
|
||||
this.images2 = data.slice(0, 5);
|
||||
});
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="css">
|
||||
//SCSS
|
||||
::v-deep {
|
||||
&.custom-indicator-galleria {
|
||||
&.p-galleria-indicators-left {
|
||||
.p-galleria-preview-content {
|
||||
.p-galleria-indicator-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0;
|
||||
|
||||
.p-galleria-indicator-item {
|
||||
margin-left: 0;
|
||||
height: 100%;
|
||||
padding-left: .5em !important;
|
||||
padding-right: .5em !important;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
color: #ffffff;
|
||||
border-top-width: 0 !important;
|
||||
border-radius: 0;
|
||||
min-width: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all .2s;
|
||||
|
||||
&:first-child {
|
||||
border-top-width: 1px !important;
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
color: var(--primaryTextColor);
|
||||
background-color: var(--primaryColor);
|
||||
border-color: var(--primaryColor);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.p-galleria-indicator-onpreview) {
|
||||
&.p-galleria-indicators-left {
|
||||
.p-galleria-preview-content {
|
||||
align-items: stretch;
|
||||
|
||||
.p-galleria-preview-container {
|
||||
border: 1px solid #c8c8c8; /* for IE */
|
||||
border: var(--panelContentBorder);
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
.p-galleria-indicator-container {
|
||||
.p-galleria-indicator-item {
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #c8c8c8; /* for IE */
|
||||
border: var(--panelContentBorder);
|
||||
color: #333333;
|
||||
|
||||
&.p-highlight {
|
||||
color: var(--primaryTextColor);
|
||||
background-color: var(--primaryColor);
|
||||
border-color: var(--primaryColor);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.custom-indicator-galleria2 {
|
||||
&.p-galleria-indicators-left {
|
||||
.p-galleria-content {
|
||||
.p-galleria-preview-content {
|
||||
.p-galleria-indicator-container {
|
||||
.p-galleria-indicator-item {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
</TabPanel>
|
||||
</TabView>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import GalleriaService from '../../service/GalleriaService';
|
||||
import GalleriaSubMenu from './GalleriaSubMenu';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
images: null,
|
||||
images2: null,
|
||||
responsiveOptions: [
|
||||
{
|
||||
breakpoint: '1024px',
|
||||
numVisible: 5
|
||||
},
|
||||
{
|
||||
breakpoint: '768px',
|
||||
numVisible: 3
|
||||
},
|
||||
{
|
||||
breakpoint: '560px',
|
||||
numVisible: 1
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
galleriaService: null,
|
||||
created() {
|
||||
this.galleriaService = new GalleriaService();
|
||||
},
|
||||
mounted() {
|
||||
this.galleriaService.getImages().then(data => {
|
||||
this.images = data;
|
||||
this.images2 = data.slice(0, 5);
|
||||
});
|
||||
},
|
||||
components: {
|
||||
'GalleriaSubMenu': GalleriaSubMenu
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep {
|
||||
&.custom-indicator-galleria {
|
||||
&.p-galleria-indicators-left {
|
||||
.p-galleria-preview-content {
|
||||
.p-galleria-indicator-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0;
|
||||
|
||||
.p-galleria-indicator-item {
|
||||
margin-left: 0;
|
||||
height: 100%;
|
||||
padding-left: .5em !important;
|
||||
padding-right: .5em !important;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
color: #ffffff;
|
||||
border-top-width: 0 !important;
|
||||
border-radius: 0;
|
||||
min-width: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all .2s;
|
||||
|
||||
&:first-child {
|
||||
border-top-width: 1px !important;
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
color: var(--primaryTextColor);
|
||||
background-color: var(--primaryColor);
|
||||
border-color: var(--primaryColor);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.p-galleria-indicator-onpreview) {
|
||||
&.p-galleria-indicators-left {
|
||||
.p-galleria-preview-content {
|
||||
align-items: stretch;
|
||||
|
||||
.p-galleria-preview-container {
|
||||
border: 1px solid #c8c8c8; /* for IE */
|
||||
border: var(--panelContentBorder);
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
.p-galleria-indicator-container {
|
||||
.p-galleria-indicator-item {
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #c8c8c8; /* for IE */
|
||||
border: var(--panelContentBorder);
|
||||
color: #333333;
|
||||
|
||||
&.p-highlight {
|
||||
color: var(--primaryTextColor);
|
||||
background-color: var(--primaryColor);
|
||||
border-color: var(--primaryColor);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.custom-indicator-galleria2 {
|
||||
&.p-galleria-indicators-left {
|
||||
.p-galleria-content {
|
||||
.p-galleria-preview-content {
|
||||
.p-galleria-indicator-container {
|
||||
.p-galleria-indicator-item {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,270 @@
|
|||
<template>
|
||||
<div>
|
||||
<GalleriaSubMenu />
|
||||
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1 style="margin-bottom: 0px;">Galleria - Preview</h1>
|
||||
<p></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic</h3>
|
||||
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px">
|
||||
<template #previewItem="slotProps">
|
||||
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
|
||||
</template>
|
||||
<template #thumbnailItem="slotProps">
|
||||
<div class="p-grid p-nogutter p-justify-center">
|
||||
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
|
||||
</div>
|
||||
</template>
|
||||
</Galleria>
|
||||
|
||||
<h3>Navigation Buttons</h3>
|
||||
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px"
|
||||
:showPreviewNavButtons="true">
|
||||
<template #header>
|
||||
With Thumbnails
|
||||
</template>
|
||||
<template #previewItem="slotProps">
|
||||
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
|
||||
</template>
|
||||
<template #thumbnailItem="slotProps">
|
||||
<div class="p-grid p-nogutter p-justify-center">
|
||||
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
|
||||
</div>
|
||||
</template>
|
||||
</Galleria>
|
||||
|
||||
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px; margin-top: 2em"
|
||||
:showPreviewNavButtons="true" :showThumbnails="false">
|
||||
<template #header>
|
||||
Without Thumbnails
|
||||
</template>
|
||||
<template #previewItem="slotProps">
|
||||
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
|
||||
</template>
|
||||
<template #thumbnailItem="slotProps">
|
||||
<div class="p-grid p-nogutter p-justify-center">
|
||||
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
|
||||
</div>
|
||||
</template>
|
||||
</Galleria>
|
||||
|
||||
<h3>Show Navigation Buttons on Preview Hover</h3>
|
||||
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px;"
|
||||
:showPreviewNavButtons="true" :showNavButtonsOnPreviewHover="true">
|
||||
<template #header>
|
||||
With Thumbnails
|
||||
</template>
|
||||
<template #previewItem="slotProps">
|
||||
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
|
||||
</template>
|
||||
<template #thumbnailItem="slotProps">
|
||||
<div class="p-grid p-nogutter p-justify-center">
|
||||
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
|
||||
</div>
|
||||
</template>
|
||||
</Galleria>
|
||||
|
||||
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px; margin-top: 2em"
|
||||
:showPreviewNavButtons="true" :showThumbnails="false" :showNavButtonsOnPreviewHover="true">
|
||||
<template #header>
|
||||
Without Thumbnails
|
||||
</template>
|
||||
<template #previewItem="slotProps">
|
||||
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
|
||||
</template>
|
||||
<template #thumbnailItem="slotProps">
|
||||
<div class="p-grid p-nogutter p-justify-center">
|
||||
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
|
||||
</div>
|
||||
</template>
|
||||
</Galleria>
|
||||
|
||||
<h3>Advanced</h3>
|
||||
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px;"
|
||||
:showPreviewNavButtons="true" :showThumbnails="false" :showNavButtonsOnPreviewHover="true"
|
||||
:showIndicators="true" :showIndicatorsOnPreview="true" :changePreviewOnIndicatorHover="true">
|
||||
<template #previewItem="slotProps">
|
||||
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
|
||||
</template>
|
||||
<template #thumbnailItem="slotProps">
|
||||
<div class="p-grid p-nogutter p-justify-center">
|
||||
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
|
||||
</div>
|
||||
</template>
|
||||
</Galleria>
|
||||
</div>
|
||||
|
||||
<div class="content-section documentation">
|
||||
<TabView>
|
||||
<TabPanel header="Source">
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<h3 class="first">Basic</h3>
|
||||
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px">
|
||||
<template #previewItem="slotProps">
|
||||
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
|
||||
</template>
|
||||
<template #thumbnailItem="slotProps">
|
||||
<div class="p-grid p-nogutter p-justify-center">
|
||||
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
|
||||
</div>
|
||||
</template>
|
||||
</Galleria>
|
||||
|
||||
<h3>Navigation Buttons</h3>
|
||||
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px"
|
||||
:showPreviewNavButtons="true">
|
||||
<template #header>
|
||||
With Thumbnails
|
||||
</template>
|
||||
<template #previewItem="slotProps">
|
||||
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
|
||||
</template>
|
||||
<template #thumbnailItem="slotProps">
|
||||
<div class="p-grid p-nogutter p-justify-center">
|
||||
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
|
||||
</div>
|
||||
</template>
|
||||
</Galleria>
|
||||
|
||||
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px; margin-top: 2em"
|
||||
:showPreviewNavButtons="true" :showThumbnails="false">
|
||||
<template #header>
|
||||
Without Thumbnails
|
||||
</template>
|
||||
<template #previewItem="slotProps">
|
||||
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
|
||||
</template>
|
||||
<template #thumbnailItem="slotProps">
|
||||
<div class="p-grid p-nogutter p-justify-center">
|
||||
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
|
||||
</div>
|
||||
</template>
|
||||
</Galleria>
|
||||
|
||||
<h3>Show Navigation Buttons on Preview Hover</h3>
|
||||
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px;"
|
||||
:showPreviewNavButtons="true" :showNavButtonsOnPreviewHover="true">
|
||||
<template #header>
|
||||
With Thumbnails
|
||||
</template>
|
||||
<template #previewItem="slotProps">
|
||||
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
|
||||
</template>
|
||||
<template #thumbnailItem="slotProps">
|
||||
<div class="p-grid p-nogutter p-justify-center">
|
||||
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
|
||||
</div>
|
||||
</template>
|
||||
</Galleria>
|
||||
|
||||
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px; margin-top: 2em"
|
||||
:showPreviewNavButtons="true" :showThumbnails="false" :showNavButtonsOnPreviewHover="true">
|
||||
<template #header>
|
||||
Without Thumbnails
|
||||
</template>
|
||||
<template #previewItem="slotProps">
|
||||
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
|
||||
</template>
|
||||
<template #thumbnailItem="slotProps">
|
||||
<div class="p-grid p-nogutter p-justify-center">
|
||||
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
|
||||
</div>
|
||||
</template>
|
||||
</Galleria>
|
||||
|
||||
<h3>Advanced</h3>
|
||||
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px;"
|
||||
:showPreviewNavButtons="true" :showThumbnails="false" :showNavButtonsOnPreviewHover="true"
|
||||
:showIndicators="true" :showIndicatorsOnPreview="true" :changePreviewOnIndicatorHover="true">
|
||||
<template #previewItem="slotProps">
|
||||
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
|
||||
</template>
|
||||
<template #thumbnailItem="slotProps">
|
||||
<div class="p-grid p-nogutter p-justify-center">
|
||||
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
|
||||
</div>
|
||||
</template>
|
||||
</Galleria>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="javascript">
|
||||
import GalleriaService from '../../service/GalleriaService';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
images: null,
|
||||
responsiveOptions: [
|
||||
{
|
||||
breakpoint: '1024px',
|
||||
numVisible: 5
|
||||
},
|
||||
{
|
||||
breakpoint: '768px',
|
||||
numVisible: 3
|
||||
},
|
||||
{
|
||||
breakpoint: '560px',
|
||||
numVisible: 1
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
galleriaService: null,
|
||||
created() {
|
||||
this.galleriaService = new GalleriaService();
|
||||
},
|
||||
mounted() {
|
||||
this.galleriaService.getImages().then(data => this.images = data);
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
</TabPanel>
|
||||
</TabView>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import GalleriaService from '../../service/GalleriaService';
|
||||
import GalleriaSubMenu from './GalleriaSubMenu';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
images: null,
|
||||
responsiveOptions: [
|
||||
{
|
||||
breakpoint: '1024px',
|
||||
numVisible: 5
|
||||
},
|
||||
{
|
||||
breakpoint: '768px',
|
||||
numVisible: 3
|
||||
},
|
||||
{
|
||||
breakpoint: '560px',
|
||||
numVisible: 1
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
galleriaService: null,
|
||||
created() {
|
||||
this.galleriaService = new GalleriaService();
|
||||
},
|
||||
mounted() {
|
||||
this.galleriaService.getImages().then(data => this.images = data);
|
||||
},
|
||||
components: {
|
||||
'GalleriaSubMenu': GalleriaSubMenu
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,124 @@
|
|||
<template>
|
||||
<div>
|
||||
<GalleriaSubMenu />
|
||||
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1 style="margin-bottom: 0px;">Galleria - Responsive</h1>
|
||||
<p></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" :circular="true" style="max-width: 800px">
|
||||
<template #previewItem="slotProps">
|
||||
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
|
||||
</template>
|
||||
<template #thumbnailItem="slotProps">
|
||||
<div class="p-grid p-nogutter p-justify-center">
|
||||
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
|
||||
</div>
|
||||
</template>
|
||||
</Galleria>
|
||||
</div>
|
||||
|
||||
<div class="content-section documentation">
|
||||
<TabView>
|
||||
<TabPanel header="Source">
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" :circular="true" style="max-width: 800px">
|
||||
<template #previewItem="slotProps">
|
||||
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
|
||||
</template>
|
||||
<template #thumbnailItem="slotProps">
|
||||
<div class="p-grid p-nogutter p-justify-center">
|
||||
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
|
||||
</div>
|
||||
</template>
|
||||
</Galleria>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="javascript">
|
||||
import GalleriaService from '../../service/GalleriaService';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
images: null,
|
||||
responsiveOptions: [
|
||||
{
|
||||
breakpoint: '1024px',
|
||||
numVisible: 5
|
||||
},
|
||||
{
|
||||
breakpoint: '960px',
|
||||
numVisible: 4
|
||||
},
|
||||
{
|
||||
breakpoint: '768px',
|
||||
numVisible: 3
|
||||
},
|
||||
{
|
||||
breakpoint: '560px',
|
||||
numVisible: 1
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
galleriaService: null,
|
||||
created() {
|
||||
this.galleriaService = new GalleriaService();
|
||||
},
|
||||
mounted() {
|
||||
this.galleriaService.getImages().then(data => this.images = data);
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
</TabPanel>
|
||||
</TabView>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import GalleriaService from '../../service/GalleriaService';
|
||||
import GalleriaSubMenu from './GalleriaSubMenu';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
images: null,
|
||||
responsiveOptions: [
|
||||
{
|
||||
breakpoint: '1024px',
|
||||
numVisible: 5
|
||||
},
|
||||
{
|
||||
breakpoint: '960px',
|
||||
numVisible: 4
|
||||
},
|
||||
{
|
||||
breakpoint: '768px',
|
||||
numVisible: 3
|
||||
},
|
||||
{
|
||||
breakpoint: '560px',
|
||||
numVisible: 1
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
galleriaService: null,
|
||||
created() {
|
||||
this.galleriaService = new GalleriaService();
|
||||
},
|
||||
mounted() {
|
||||
this.galleriaService.getImages().then(data => this.images = data);
|
||||
},
|
||||
components: {
|
||||
'GalleriaSubMenu': GalleriaSubMenu
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,252 @@
|
|||
<template>
|
||||
<div>
|
||||
<GalleriaSubMenu />
|
||||
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1 style="margin-bottom: 0px;">Galleria - Thumbnail</h1>
|
||||
<p></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Basic</h3>
|
||||
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px">
|
||||
<template #previewItem="slotProps">
|
||||
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
|
||||
</template>
|
||||
<template #thumbnailItem="slotProps">
|
||||
<div class="p-grid p-nogutter p-justify-center">
|
||||
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
|
||||
</div>
|
||||
</template>
|
||||
</Galleria>
|
||||
|
||||
<h3>Position</h3>
|
||||
<Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="4" thumbnailsPosition="left" style="max-width: 610px">
|
||||
<template #header>
|
||||
Left
|
||||
</template>
|
||||
<template #previewItem="slotProps">
|
||||
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
|
||||
</template>
|
||||
<template #thumbnailItem="slotProps">
|
||||
<div class="p-grid p-nogutter p-justify-center">
|
||||
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
|
||||
</div>
|
||||
</template>
|
||||
</Galleria>
|
||||
|
||||
<Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="4" thumbnailsPosition="right" style="max-width: 610px; margin-top: 2em;">
|
||||
<template #header>
|
||||
Right
|
||||
</template>
|
||||
<template #previewItem="slotProps">
|
||||
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
|
||||
</template>
|
||||
<template #thumbnailItem="slotProps">
|
||||
<div class="p-grid p-nogutter p-justify-center">
|
||||
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
|
||||
</div>
|
||||
</template>
|
||||
</Galleria>
|
||||
|
||||
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" thumbnailsPosition="top" style="max-width: 520px; margin-top: 2em;">
|
||||
<template #header>
|
||||
Top
|
||||
</template>
|
||||
<template #previewItem="slotProps">
|
||||
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
|
||||
</template>
|
||||
<template #thumbnailItem="slotProps">
|
||||
<div class="p-grid p-nogutter p-justify-center">
|
||||
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
|
||||
</div>
|
||||
</template>
|
||||
</Galleria>
|
||||
|
||||
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" thumbnailsPosition="bottom" style="max-width: 520px; margin-top: 2em;">
|
||||
<template #header>
|
||||
Bottom
|
||||
</template>
|
||||
<template #previewItem="slotProps">
|
||||
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
|
||||
</template>
|
||||
<template #thumbnailItem="slotProps">
|
||||
<div class="p-grid p-nogutter p-justify-center">
|
||||
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
|
||||
</div>
|
||||
</template>
|
||||
</Galleria>
|
||||
</div>
|
||||
|
||||
<div class="content-section documentation">
|
||||
<TabView>
|
||||
<TabPanel header="Source">
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<h3 class="first">Basic</h3>
|
||||
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px">
|
||||
<template #previewItem="slotProps">
|
||||
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
|
||||
</template>
|
||||
<template #thumbnailItem="slotProps">
|
||||
<div class="p-grid p-nogutter p-justify-center">
|
||||
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
|
||||
</div>
|
||||
</template>
|
||||
</Galleria>
|
||||
|
||||
<h3>Position</h3>
|
||||
<Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="4" thumbnailsPosition="left" style="max-width: 610px">
|
||||
<template #header>
|
||||
Left
|
||||
</template>
|
||||
<template #previewItem="slotProps">
|
||||
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
|
||||
</template>
|
||||
<template #thumbnailItem="slotProps">
|
||||
<div class="p-grid p-nogutter p-justify-center">
|
||||
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
|
||||
</div>
|
||||
</template>
|
||||
</Galleria>
|
||||
|
||||
<Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="4" thumbnailsPosition="right" style="max-width: 610px; margin-top: 2em;">
|
||||
<template #header>
|
||||
Right
|
||||
</template>
|
||||
<template #previewItem="slotProps">
|
||||
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
|
||||
</template>
|
||||
<template #thumbnailItem="slotProps">
|
||||
<div class="p-grid p-nogutter p-justify-center">
|
||||
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
|
||||
</div>
|
||||
</template>
|
||||
</Galleria>
|
||||
|
||||
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" thumbnailsPosition="top" style="max-width: 520px; margin-top: 2em;">
|
||||
<template #header>
|
||||
Top
|
||||
</template>
|
||||
<template #previewItem="slotProps">
|
||||
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
|
||||
</template>
|
||||
<template #thumbnailItem="slotProps">
|
||||
<div class="p-grid p-nogutter p-justify-center">
|
||||
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
|
||||
</div>
|
||||
</template>
|
||||
</Galleria>
|
||||
|
||||
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" thumbnailsPosition="bottom" style="max-width: 520px; margin-top: 2em;">
|
||||
<template #header>
|
||||
Bottom
|
||||
</template>
|
||||
<template #previewItem="slotProps">
|
||||
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
|
||||
</template>
|
||||
<template #thumbnailItem="slotProps">
|
||||
<div class="p-grid p-nogutter p-justify-center">
|
||||
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
|
||||
</div>
|
||||
</template>
|
||||
</Galleria>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="javascript">
|
||||
import GalleriaService from '../../service/GalleriaService';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
images: null,
|
||||
responsiveOptions: [
|
||||
{
|
||||
breakpoint: '1024px',
|
||||
numVisible: 5
|
||||
},
|
||||
{
|
||||
breakpoint: '768px',
|
||||
numVisible: 3
|
||||
},
|
||||
{
|
||||
breakpoint: '560px',
|
||||
numVisible: 1
|
||||
}
|
||||
],
|
||||
responsiveOptions2: [
|
||||
{
|
||||
breakpoint: '768px',
|
||||
numVisible: 3
|
||||
},
|
||||
{
|
||||
breakpoint: '560px',
|
||||
numVisible: 1
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
galleriaService: null,
|
||||
created() {
|
||||
this.galleriaService = new GalleriaService();
|
||||
},
|
||||
mounted() {
|
||||
this.galleriaService.getImages().then(data => this.images = data);
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
</TabPanel>
|
||||
</TabView>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import GalleriaService from '../../service/GalleriaService';
|
||||
import GalleriaSubMenu from './GalleriaSubMenu';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
images: null,
|
||||
responsiveOptions: [
|
||||
{
|
||||
breakpoint: '1024px',
|
||||
numVisible: 5
|
||||
},
|
||||
{
|
||||
breakpoint: '768px',
|
||||
numVisible: 3
|
||||
},
|
||||
{
|
||||
breakpoint: '560px',
|
||||
numVisible: 1
|
||||
}
|
||||
],
|
||||
responsiveOptions2: [
|
||||
{
|
||||
breakpoint: '768px',
|
||||
numVisible: 3
|
||||
},
|
||||
{
|
||||
breakpoint: '560px',
|
||||
numVisible: 1
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
galleriaService: null,
|
||||
created() {
|
||||
this.galleriaService = new GalleriaService();
|
||||
},
|
||||
mounted() {
|
||||
this.galleriaService.getImages().then(data => this.images = data);
|
||||
},
|
||||
components: {
|
||||
'GalleriaSubMenu': GalleriaSubMenu
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in New Issue