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

Galleria documentation

pull/345/head
cagataycivici 2020-05-15 11:08:53 +03:00
parent 0215e1c05c
commit 1646792fa9
18 changed files with 702 additions and 1109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
public/demo/data/galleria.json → public/demo/data/photos.json
View File

7
src/AppMenu.vue
View File

@ -215,14 +215,15 @@
<div class="p-toggleable-content" v-show="activeSubmenus['galleria']">
<ul>
<li><router-link to="/galleria">Documentation</router-link></li>
<li><router-link to="/galleria/basic">Basic</router-link></li>
<li><router-link to="/galleria/programmatic">Programmatic</router-link></li>
<li><router-link to="/galleria/indicator">Indicator</router-link></li>
<li><router-link to="/galleria/thumbnail">Thumbnail</router-link></li>
<li><router-link to="/galleria/preview">Preview</router-link></li>
<li><router-link to="/galleria/navigator">Navigator</router-link></li>
<li><router-link to="/galleria/responsive">Responsive</router-link></li>
<li><router-link to="/galleria/fullscreen">FullScreen</router-link></li>
<li><router-link to="/galleria/circular">Circular</router-link></li>
<li><router-link to="/galleria/autoplay">AutoPlay</router-link></li>
<li><router-link to="/galleria/caption">Caption</router-link></li>
<li><router-link to="/galleria/advanced">Advanced</router-link></li>
</ul>
</div>
</transition>

1
src/assets/styles/app/_home.scss
View File

@ -9,7 +9,6 @@
a {
color: var(--primary-color);
font-weight: 500;
transition: color .2s;
}
.introduction {

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

@ -8,10 +8,10 @@ export declare class Galleria extends Vue {
visible?: boolean;
numVisible?: number;
responsiveOptions?: any[];
showPreviewNavButtons?: boolean;
showThumbnailNavButtons?: boolean;
showNavButtonsOnPreviewHover?: boolean;
changePreviewOnIndicatorHover?: boolean;
showItemNavigators?: boolean;
showThumbnailNavigators?: boolean;
showItemNavigatorsOnHover?: boolean;
changeItemOnIndicatorHover?: boolean;
circular?: boolean;
autoPlay?: boolean;
transitionInterval?: number;
@ -19,7 +19,7 @@ export declare class Galleria extends Vue {
thumbnailsPosition?: string;
verticalThumbnailViewPortHeight?: string;
showIndicators?: boolean;
showIndicatorsOnPreview?: boolean;
showIndicatorsOnItem?: boolean;
indicatorsPosition?: string;
baseZIndex?: number;
maskClass?: string;

23
src/router.js
View File

@ -636,9 +636,9 @@ export default new Router({
component: () => import('./views/galleria/GalleriaDemo.vue')
},
{
path: '/galleria/basic',
name: 'galleriabasic',
component: () => import('./views/galleria/GalleriaBasicDemo.vue')
path: '/galleria/programmatic',
name: 'galleriaprogrammatic',
component: () => import('./views/galleria/GalleriaProgrammaticDemo.vue')
},
{
path: '/galleria/indicator',
@ -651,9 +651,9 @@ export default new Router({
component: () => import('./views/galleria/GalleriaThumbnailDemo.vue')
},
{
path: '/galleria/preview',
name: 'galleriapreview',
component: () => import('./views/galleria/GalleriaPreviewDemo.vue')
path: '/galleria/navigator',
name: 'gallerianavigator',
component: () => import('./views/galleria/GalleriaNavigatorDemo.vue')
},
{
path: '/galleria/responsive',
@ -666,14 +666,19 @@ export default new Router({
component: () => import('./views/galleria/GalleriaFullScreenDemo.vue')
},
{
path: '/galleria/circular',
name: 'galleriacircular',
component: () => import('./views/galleria/GalleriaCircularDemo.vue')
path: '/galleria/autoplay',
name: 'galleriaautoplay',
component: () => import('./views/galleria/GalleriaAutoPlayDemo.vue')
},
{
path: '/galleria/caption',
name: 'galleriacaption',
component: () => import('./views/galleria/GalleriaCaptionDemo.vue')
},
{
path: '/galleria/advanced',
name: 'galleriaadvvanced',
component: () => import('./views/galleria/GalleriaAdvancedDemo.vue')
}
]
});

4
src/service/GalleriaService.js → src/service/PhotoService.js
View File

@ -1,9 +1,9 @@
import axios from 'axios'
export default class GalleriaService {
export default class PhotoService {
getImages() {
return axios.get('demo/data/galleria.json')
return axios.get('demo/data/photos.json')
.then(res => res.data.data);
}
}

211
src/views/galleria/GalleriaAdvancedDemo.vue Normal file
View File

@ -0,0 +1,211 @@
<template>
<div class="galleria-demo">
<div class="content-section introduction">
<div class="feature-intro">
<h1>Galleria - Advanced</h1>
<p>Galleria can be extended further to implement complex requirements.</p>
</div>
</div>
<div class="content-section implementation">
<Galleria ref="galleria" :value="images" :activeItemIndex.sync="activeItemIndex" :numVisible="5" style="max-width: 520px;" :class="galleriaClass"
:showThumbnails="showThumbnails" :showItemNavigators="true" :showItemNavigatorsOnHover="true"
:circular="true" :autoPlay="true" :transitionInterval="3000">
<template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" :style="[{'width': !isPreviewFullScreen ? '100%' : '', 'display': !isPreviewFullScreen ? 'block' : ''}]" />
</template>
<template #thumbnail="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 #footer>
<div class="custom-galleria-footer">
<Button icon="pi pi-list" @click="onThumbnailButtonClick" />
<span v-if="images">
<span>{{activeItemIndex + 1}}/{{images.length}}</span>
<span class="title">{{images[activeItemIndex].title}}</span>
<span>{{images[activeItemIndex].alt}}</span>
</span>
<Button :icon="fullScreenIcon" @click="toggleFullScreen" />
</div>
</template>
</Galleria>
</div>
</div>
</template>
<script>
import PhotoService from '../../service/PhotoService';
export default {
data() {
return {
images: null,
activeItemIndex: 0,
showThumbnails: false,
isPreviewFullScreen: false
}
},
galleriaService: null,
created() {
this.galleriaService = new PhotoService();
},
mounted() {
this.galleriaService.getImages().then(data => this.images = data);
this.bindDocumentListeners();
},
methods: {
onThumbnailButtonClick() {
this.showThumbnails = !this.showThumbnails;
},
toggleFullScreen() {
if (this.isPreviewFullScreen) {
this.closePreviewFullScreen();
}
else {
this.openPreviewFullScreen();
}
},
onFullScreenChange() {
this.isPreviewFullScreen = !this.isPreviewFullScreen;
},
openPreviewFullScreen() {
let elem = this.$refs.galleria.$el;
if (elem.requestFullscreen) {
elem.requestFullscreen();
}
else if (elem.mozRequestFullScreen) { /* Firefox */
elem.mozRequestFullScreen();
}
else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
elem.webkitRequestFullscreen();
}
else if (elem.msRequestFullscreen) { /* IE/Edge */
elem.msRequestFullscreen();
}
},
closePreviewFullScreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
},
bindDocumentListeners() {
document.addEventListener("fullscreenchange", this.onFullScreenChange);
document.addEventListener("mozfullscreenchange", this.onFullScreenChange);
document.addEventListener("webkitfullscreenchange", this.onFullScreenChange);
document.addEventListener("msfullscreenchange", this.onFullScreenChange);
},
unbindDocumentListeners() {
document.removeEventListener("fullscreenchange", this.onFullScreenChange);
document.removeEventListener("mozfullscreenchange", this.onFullScreenChange);
document.removeEventListener("webkitfullscreenchange", this.onFullScreenChange);
document.removeEventListener("msfullscreenchange", this.onFullScreenChange);
}
},
computed: {
galleriaClass() {
return ['custom-galleria', {'preview-fullscreen': this.isPreviewFullScreen}];
},
fullScreenIcon() {
return `pi ${this.isPreviewFullScreen ? 'pi-window-minimize' : 'pi-window-maximize'}`;
}
}
}
</script>
<style lang="scss" scoped>
::v-deep {
.custom-galleria {
&.p-galleria {
.p-galleria-content {
height: 95%;
overflow: hidden;
position: relative;
.p-galleria-thumbnail-content {
position: absolute;
width: 100%;
bottom: 0;
background-image: linear-gradient(180deg, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.50) 70%);
.p-galleria-thumbnail-container {
.p-galleria-thumbnail-items-content {
.p-galleria-thumbnail-items-container {
.p-galleria-thumbnail-item {
opacity: .6;
&.p-galleria-thumbnail-item-current {
opacity: 1;
}
}
}
}
}
}
}
.p-galleria-footer {
padding: 0;
background-color: rgba(0, 0, 0, .9);
border: rgba(0, 0, 0, .9);
.custom-galleria-footer {
width: 100%;
display: flex;
align-items: center;
justify-content: stretch;
color: #ffffff;
> button {
background-color: transparent;
padding: .3rem;
margin: .2rem;
border: 0 none;
border-radius: 0;
color: #ffffff;
&:hover {
background-color: transparent;
}
}
> span {
flex-grow: 1;
> span {
font-size: .9rem;
padding-left: .829rem;
&.title {
font-weight: bold;
}
}
}
}
}
&.preview-fullscreen {
.p-galleria-preview-container {
.p-galleria-preview-nav-button {
top: 50%;
height: 20rem;
width: 4rem;
margin-top: -10rem;
}
}
}
}
}
}
</style>

42
src/views/galleria/GalleriaCircularDemo.vue → src/views/galleria/GalleriaAutoPlayDemo.vue
View File

@ -2,34 +2,19 @@
<div>
<div class="content-section introduction">
<div class="feature-intro">
<h1 style="margin-bottom: 0px;">Galleria - Circular</h1>
<p></p>
<h1>Galleria - AutoPlay</h1>
<p>AutoPlay mode is used to implement slideshows.</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 #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnail="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>AutoPlay</h3>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"
:circular="true" :autoPlay="true" :transitionInterval="2000">
<template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnail="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>
@ -39,35 +24,20 @@
<TabPanel header="Source">
<CodeHighlight>
<template v-pre>
&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;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt;
&lt;template #thumbnail="slotProps"&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;/div&gt;
&lt;/template&gt;
&lt;/Galleria&gt;
&lt;h3&gt;AutoPlay&lt;/h3&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"
:circular="true" :autoPlay="true" :transitionInterval="2000"&gt;
&lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt;
&lt;template #thumbnail="slotProps"&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;/div&gt;
&lt;/template&gt;
&lt;/Galleria&gt;
</template>
</CodeHighlight>
<CodeHighlight lang="javascript">
import GalleriaService from '../../service/GalleriaService';
import PhotoService from '../../service/PhotoService';
export default {
data() {
@ -91,7 +61,7 @@ export default {
},
galleriaService: null,
created() {
this.galleriaService = new GalleriaService();
this.galleriaService = new PhotoService();
},
mounted() {
this.galleriaService.getImages().then(data => this.images = data);
@ -105,7 +75,7 @@ export default {
</template>
<script>
import GalleriaService from '../../service/GalleriaService';
import PhotoService from '../../service/PhotoService';
export default {
data() {
@ -129,7 +99,7 @@ export default {
},
galleriaService: null,
created() {
this.galleriaService = new GalleriaService();
this.galleriaService = new PhotoService();
},
mounted() {
this.galleriaService.getImages().then(data => this.images = data);

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

@ -2,8 +2,8 @@
<div>
<div class="content-section introduction">
<div class="feature-intro">
<h1 style="margin-bottom: 0px;">Galleria - Caption</h1>
<p></p>
<h1>Galleria - Caption</h1>
<p>Caption displays a description for an item.</p>
</div>
</div>
@ -17,7 +17,7 @@
<img :src="item.thumbnailImageSrc" :alt="item.alt" style="display: block;" />
</div>
</template>
<template #itemCaption="{item}">
<template #caption="{item}">
<h4 style="margin-bottom: .5rem;">{{item.title}}</h4>
<p>{{item.alt}}</p>
</template>
@ -38,7 +38,7 @@
&lt;img :src="item.thumbnailImageSrc" :alt="item.alt" style="display: block;" /&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;template #itemCaption="{item}"&gt;
&lt;template #caption="{item}"&gt;
&lt;h4 style="margin-bottom: .5rem;"&gt;{{item.title}}&lt;/h4&gt;
&lt;p&gt;{{item.alt}}&lt;/p&gt;
&lt;/template&gt;
@ -47,7 +47,7 @@
</CodeHighlight>
<CodeHighlight lang="javascript">
import GalleriaService from '../../service/GalleriaService';
import PhotoService from '../../service/PhotoService';
export default {
data() {
@ -71,10 +71,10 @@ export default {
},
galleriaService: null,
created() {
this.galleriaService = new GalleriaService();
this.galleriaService = new PhotoService();
},
mounted() {
this.galleriaService.getImages().then(data =&gt; this.images = data);
this.galleriaService.getImages().then(data => this.images = data);
}
}
</CodeHighlight>
@ -85,7 +85,7 @@ export default {
</template>
<script>
import GalleriaService from '../../service/GalleriaService';
import PhotoService from '../../service/PhotoService';
export default {
data() {
@ -109,7 +109,7 @@ export default {
},
galleriaService: null,
created() {
this.galleriaService = new GalleriaService();
this.galleriaService = new PhotoService();
},
mounted() {
this.galleriaService.getImages().then(data => this.images = data);

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

@ -3,32 +3,17 @@
<div class="content-section introduction">
<div class="feature-intro">
<h1>Galleria</h1>
<p>Galleria is a content gallery component.</p>
<p>Galleria is an advanced content gallery component.</p>
</div>
</div>
<div class="content-section implementation">
<Galleria ref="galleria" :value="images" :activeItemIndex.sync="activeItemIndex" :numVisible="5" style="max-width: 520px;" :class="galleriaClass"
:showThumbnails="showThumbnails" :showItemNavigators="true" :showItemNavigatorsOnHover="true"
:circular="true" :autoPlay="true" :transitionInterval="3000">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px">
<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: 100%" />
</template>
<template #thumbnail="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 #footer>
<div class="custom-galleria-footer">
<Button icon="pi pi-list" @click="onThumbnailButtonClick" />
<span v-if="images">
<span>{{activeItemIndex + 1}}/{{images.length}}</span>
<span class="title">{{images[activeItemIndex].title}}</span>
<span>{{images[activeItemIndex].alt}}</span>
</span>
<Button :icon="fullScreenIcon" @click="toggleFullScreen" />
</div>
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
</template>
</Galleria>
</div>
@ -38,179 +23,38 @@
</template>
<script>
import GalleriaService from '../../service/GalleriaService';
import PhotoService from '../../service/PhotoService';
import GalleriaDoc from './GalleriaDoc';
export default {
data() {
return {
images: null,
activeItemIndex: 0,
showThumbnails: false,
isPreviewFullScreen: false
responsiveOptions: [
{
breakpoint: '1024px',
numVisible: 5
},
{
breakpoint: '768px',
numVisible: 3
},
{
breakpoint: '560px',
numVisible: 1
}
]
}
},
galleriaService: null,
created() {
this.galleriaService = new GalleriaService();
this.galleriaService = new PhotoService();
},
mounted() {
this.galleriaService.getImages().then(data => this.images = data);
this.bindDocumentListeners();
},
methods: {
onThumbnailButtonClick() {
this.showThumbnails = !this.showThumbnails;
},
toggleFullScreen() {
if (this.isPreviewFullScreen) {
this.closePreviewFullScreen();
}
else {
this.openPreviewFullScreen();
}
},
onFullScreenChange() {
this.isPreviewFullScreen = !this.isPreviewFullScreen;
},
openPreviewFullScreen() {
let elem = this.$refs.galleria.$el;
if (elem.requestFullscreen) {
elem.requestFullscreen();
}
else if (elem.mozRequestFullScreen) { /* Firefox */
elem.mozRequestFullScreen();
}
else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
elem.webkitRequestFullscreen();
}
else if (elem.msRequestFullscreen) { /* IE/Edge */
elem.msRequestFullscreen();
}
},
closePreviewFullScreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
},
bindDocumentListeners() {
document.addEventListener("fullscreenchange", this.onFullScreenChange);
document.addEventListener("mozfullscreenchange", this.onFullScreenChange);
document.addEventListener("webkitfullscreenchange", this.onFullScreenChange);
document.addEventListener("msfullscreenchange", this.onFullScreenChange);
},
unbindDocumentListeners() {
document.removeEventListener("fullscreenchange", this.onFullScreenChange);
document.removeEventListener("mozfullscreenchange", this.onFullScreenChange);
document.removeEventListener("webkitfullscreenchange", this.onFullScreenChange);
document.removeEventListener("msfullscreenchange", this.onFullScreenChange);
}
},
computed: {
galleriaClass() {
return ['custom-galleria', {'preview-fullscreen': this.isPreviewFullScreen}];
},
fullScreenIcon() {
return `pi ${this.isPreviewFullScreen ? 'pi-window-minimize' : 'pi-window-maximize'}`;
}
},
components: {
'GalleriaDoc': GalleriaDoc
}
}
</script>
<style lang="scss" scoped>
::v-deep {
.custom-galleria {
&.p-galleria {
.p-galleria-content {
height: 95%;
overflow: hidden;
position: relative;
.p-galleria-thumbnail-content {
position: absolute;
width: 100%;
bottom: 0;
background-image: linear-gradient(180deg, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.50) 70%);
.p-galleria-thumbnail-container {
.p-galleria-thumbnail-items-content {
.p-galleria-thumbnail-items-container {
.p-galleria-thumbnail-item {
opacity: .6;
&.p-galleria-thumbnail-item-current {
opacity: 1;
}
}
}
}
}
}
}
.p-galleria-footer {
padding: 0;
background-color: rgba(0, 0, 0, .9);
border: rgba(0, 0, 0, .9);
.custom-galleria-footer {
width: 100%;
display: flex;
align-items: center;
justify-content: stretch;
color: #ffffff;
> button {
background-color: transparent;
padding: .3rem;
margin: .2rem;
border: 0 none;
border-radius: 0;
color: #ffffff;
&:hover {
background-color: transparent;
}
}
> span {
flex-grow: 1;
> span {
font-size: .9rem;
padding-left: .829rem;
&.title {
font-weight: bold;
}
}
}
}
}
&.preview-fullscreen {
.p-galleria-preview-container {
.p-galleria-preview-nav-button {
top: 50%;
height: 20rem;
width: 4rem;
margin-top: -10rem;
}
}
}
}
}
}
</style>

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

@ -15,6 +15,117 @@ import Galleria from 'primevue/galleria';
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" /&gt;
&lt;/template&gt;
&lt;/Galleria&gt;
</CodeHighlight>
<p>For the rest of the documentation, sample data below would be return from an example service e.g. PhotoService.</p>
<div style="overflow: auto; height: 400px">
<CodeHighlight lang="js">
{
"data":[
{
"previewImageSrc": "demo/images/galleria/galleria1.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria1s.jpg",
"alt": "Description for Image 1",
"title": "Title 1"
},
{
"previewImageSrc": "demo/images/galleria/galleria2.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria2s.jpg",
"alt": "Description for Image 2",
"title": "Title 2"
},
{
"previewImageSrc": "demo/images/galleria/galleria3.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria3s.jpg",
"alt": "Description for Image 3",
"title": "Title 3"
},
{
"previewImageSrc": "demo/images/galleria/galleria4.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria4s.jpg",
"alt": "Description for Image 4",
"title": "Title 4"
},
{
"previewImageSrc": "demo/images/galleria/galleria5.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria5s.jpg",
"alt": "Description for Image 5",
"title": "Title 5"
},
{
"previewImageSrc": "demo/images/galleria/galleria6.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria6s.jpg",
"alt": "Description for Image 6",
"title": "Title 6"
},
{
"previewImageSrc": "demo/images/galleria/galleria7.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria7s.jpg",
"alt": "Description for Image 7",
"title": "Title 7"
},
{
"previewImageSrc": "demo/images/galleria/galleria8.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria8s.jpg",
"alt": "Description for Image 8",
"title": "Title 8"
},
{
"previewImageSrc": "demo/images/galleria/galleria9.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria9s.jpg",
"alt": "Description for Image 9",
"title": "Title 9"
},
{
"previewImageSrc": "demo/images/galleria/galleria10.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria10s.jpg",
"alt": "Description for Image 10",
"title": "Title 10"
},
{
"previewImageSrc": "demo/images/galleria/galleria11.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria11s.jpg",
"alt": "Description for Image 11",
"title": "Title 11"
},
{
"previewImageSrc": "demo/images/galleria/galleria12.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria12s.jpg",
"alt": "Description for Image 12",
"title": "Title 12"
},
{
"previewImageSrc": "demo/images/galleria/galleria13.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria13s.jpg",
"alt": "Description for Image 13",
"title": "Title 13"
},
{
"previewImageSrc": "demo/images/galleria/galleria14.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria14s.jpg",
"alt": "Description for Image 14",
"title": "Title 14"
},
{
"previewImageSrc": "demo/images/galleria/galleria15.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria15s.jpg",
"alt": "Description for Image 15",
"title": "Title 15"
}
]
}
</CodeHighlight>
</div>
<CodeHighlight lang="js">
import axios from 'axios'
export default class PhotoService {
getImages() {
return axios.get('demo/data/photos.json').then(res => res.data.data);
}
}
</CodeHighlight>
<CodeHighlight lang="js">
@ -26,7 +137,7 @@ export default {
},
galleriaService: null,
created() {
this.galleriaService = new GalleriaService();
this.galleriaService = new PhotoService();
},
mounted() {
this.galleriaService.getImages().then(data => this.images = data);
@ -43,15 +154,13 @@ export default {
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%" /&gt;
&lt;/template&gt;
&lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" /&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;/Galleria&gt;
</CodeHighlight>
<h3>Responsive</h3>
<p>For responsive design, <i>numVisible</i> can be defined using the <i>responsiveOptions</i> property that should be an array of
<p>For responsive design, <i>numVisible</i> can be defined using the <i>responsiveOptions</i> property which references an array of
objects whose breakpoint defines the max-width to apply the settings.</p>
<CodeHighlight>
@ -60,9 +169,7 @@ export default {
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%" /&gt;
&lt;/template&gt;
&lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" /&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;/Galleria&gt;
</CodeHighlight>
@ -84,7 +191,6 @@ responsiveOptions: [
]
</CodeHighlight>
<h3>Header and Footer</h3>
<p>Custom content projection is available using the <i>header</i> and <i>footer</i> properties.</p>
<CodeHighlight>
@ -95,15 +201,21 @@ responsiveOptions: [
&lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%" /&gt;
&lt;/template&gt;
&lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" /&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;template #footer&gt;
&lt;h1&gt;Footer&lt;/h1&gt;
&lt;/template&gt;
&lt;/Galleria&gt;
</CodeHighlight>
<h3>Indicators</h3>
<p>Indicators allow quick navigation between the items. Set <i>showIndicators</i> to display indicators which can be customized further
with the <i>changeItemOnIndicatorHover</i>, <i>showIndicatorsOnItem</i> and <i>indicatorsPosition</i> properties.</p>
<CodeHighlight>
&lt;Galleria :value="images" :showIndicators="true"&gt;
&lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" /&gt;
&lt;/template&gt;
&lt;/Galleria&gt;
</CodeHighlight>
<h3>Properties</h3>
@ -162,28 +274,28 @@ responsiveOptions: [
<td>An array of options for responsive design.</td>
</tr>
<tr>
<td>showPreviewNavButtons</td>
<td>showItemNavigators</td>
<td>boolean</td>
<td>false</td>
<td>Whether to display navigation buttons in preview container.</td>
<td>Whether to display navigation buttons in item section.</td>
</tr>
<tr>
<td>showThumbnailNavButtons</td>
<td>showThumbnailNavigators</td>
<td>boolean</td>
<td>true</td>
<td>Whether to display navigation buttons in thumbnail container.</td>
</tr>
<tr>
<td>showNavButtonsOnPreviewHover</td>
<td>showItemNavigatorsOnHover</td>
<td>boolean</td>
<td>false</td>
<td>Whether to display navigation buttons on preview container's hover.</td>
<td>Whether to display navigation buttons on item hover.</td>
</tr>
<tr>
<td>changePreviewOnIndicatorHover</td>
<td>changeItemOnIndicatorHover</td>
<td>boolean</td>
<td>false</td>
<td>When enabled, preview item is changed on indicator item's hover.</td>
<td>When enabled, item is changed on indicator hover.</td>
</tr>
<tr>
<td>circular</td>
@ -228,10 +340,10 @@ responsiveOptions: [
<td>Whether to display indicator container.</td>
</tr>
<tr>
<td>showIndicatorsOnPreview</td>
<td>showIndicatorsOnItem</td>
<td>boolean</td>
<td>false</td>
<td>When enabled, indicator container is displayed on preview container.</td>
<td>When enabled, indicator container is displayed on item container.</td>
</tr>
<tr>
<td>indicatorsPosition</td>
@ -328,206 +440,50 @@ responsiveOptions: [
</a>
<CodeHighlight>
<template v-pre>
&lt;Galleria ref="galleria" :value="images" :activeItemIndex.sync="activeItemIndex" :numVisible="5" style="max-width: 520px;" :class="galleriaClass"
:showThumbnails="showThumbnails" :showPreviewNavButtons="true" :showNavButtonsOnPreviewHover="true"
:circular="true" :autoPlay="true" :transitionInterval="3000"&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"&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: 100%" /&gt;
&lt;/template&gt;
&lt;template #thumbnail="slotProps"&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;/div&gt;
&lt;/template&gt;
&lt;template #footer&gt;
&lt;div class="custom-galleria-footer"&gt;
&lt;Button icon="pi pi-list" @click="onThumbnailButtonClick" /&gt;
&lt;span v-if="images"&gt;
&lt;span&gt;{{activeItemIndex + 1}}/{{images.length}}&lt;/span&gt;
&lt;span class="title"&gt;{{images[activeItemIndex].title}}&lt;/span&gt;
&lt;span&gt;{{images[activeItemIndex].alt}}&lt;/span&gt;
&lt;/span&gt;
&lt;Button :icon="fullScreenIcon" @click="toggleFullScreen" /&gt;
&lt;/div&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" /&gt;
&lt;/template&gt;
&lt;/Galleria&gt;
</template>
</CodeHighlight>
<CodeHighlight lang="javascript">
import GalleriaService from '../../service/GalleriaService';
import PhotoService from '../../service/PhotoService';
export default {
data() {
return {
images: null,
activeItemIndex: 0,
showThumbnails: false,
isPreviewFullScreen: false
responsiveOptions: [
{
breakpoint: '1024px',
numVisible: 5
},
{
breakpoint: '768px',
numVisible: 3
},
{
breakpoint: '560px',
numVisible: 1
}
]
}
},
galleriaService: null,
created() {
this.galleriaService = new GalleriaService();
this.galleriaService = new PhotoService();
},
mounted() {
this.galleriaService.getImages().then(data => this.images = data);
this.bindDocumentListeners();
},
methods: {
onThumbnailButtonClick() {
this.showThumbnails = !this.showThumbnails;
},
toggleFullScreen() {
if (this.isPreviewFullScreen) {
this.closePreviewFullScreen();
}
else {
this.openPreviewFullScreen();
}
},
onFullScreenChange() {
this.isPreviewFullScreen = !this.isPreviewFullScreen;
},
openPreviewFullScreen() {
let elem = this.$refs.galleria.$el;
if (elem.requestFullscreen) {
elem.requestFullscreen();
}
else if (elem.mozRequestFullScreen) { /* Firefox */
elem.mozRequestFullScreen();
}
else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
elem.webkitRequestFullscreen();
}
else if (elem.msRequestFullscreen) { /* IE/Edge */
elem.msRequestFullscreen();
}
},
closePreviewFullScreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
},
bindDocumentListeners() {
document.addEventListener("fullscreenchange", this.onFullScreenChange);
document.addEventListener("mozfullscreenchange", this.onFullScreenChange);
document.addEventListener("webkitfullscreenchange", this.onFullScreenChange);
document.addEventListener("msfullscreenchange", this.onFullScreenChange);
},
unbindDocumentListeners() {
document.removeEventListener("fullscreenchange", this.onFullScreenChange);
document.removeEventListener("mozfullscreenchange", this.onFullScreenChange);
document.removeEventListener("webkitfullscreenchange", this.onFullScreenChange);
document.removeEventListener("msfullscreenchange", this.onFullScreenChange);
}
},
computed: {
galleriaClass() {
return ['custom-galleria', {'preview-fullscreen': this.isPreviewFullScreen}];
},
fullScreenIcon() {
return `pi ${this.isPreviewFullScreen ? 'pi-window-minimize' : 'pi-window-maximize'}`;
}
}
}
</CodeHighlight>
<CodeHighlight lang="css">
//SCSS
::v-deep {
.custom-galleria {
&.p-galleria {
.p-galleria-content {
height: 95%;
overflow: hidden;
position: relative;
.p-galleria-thumbnail-content {
position: absolute;
width: 100%;
bottom: 0;
background-image: linear-gradient(180deg, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.50) 70%);
.p-galleria-thumbnail-container {
.p-galleria-thumbnail-items-content {
.p-galleria-thumbnail-items-container {
.p-galleria-thumbnail-item {
opacity: .6;
&.p-galleria-thumbnail-item-current {
opacity: 1;
}
}
}
}
}
}
}
.p-galleria-footer {
padding: 0;
background-color: rgba(0, 0, 0, .9);
border: rgba(0, 0, 0, .9);
.custom-galleria-footer {
width: 100%;
display: flex;
align-items: center;
justify-content: stretch;
color: #ffffff;
> button {
background-color: transparent;
padding: .3rem;
margin: .2rem;
border: 0 none;
border-radius: 0;
color: #ffffff;
&:hover {
background-color: transparent;
}
}
> span {
flex-grow: 1;
> span {
font-size: .9rem;
padding-left: .829rem;
&.title {
font-weight: bold;
}
}
}
}
}
&.preview-fullscreen {
.p-galleria-preview-container {
.p-galleria-preview-nav-button {
top: 50%;
height: 20rem;
width: 4rem;
margin-top: -10rem;
}
}
}
}
}
}
</CodeHighlight>
</TabPanel>
</TabView>
</div>

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

@ -2,22 +2,20 @@
<div>
<div class="content-section introduction">
<div class="feature-intro">
<h1 style="margin-bottom: 0px;">Galleria - FullScreen</h1>
<p></p>
<h1>Galleria - FullScreen</h1>
<p>In fullscreen mode content covers the whole page over a mask..</p>
</div>
</div>
<div class="content-section implementation">
<h3 class="first">Basic</h3>
<h3>With Thumbnails</h3>
<Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="9" containerStyle="max-width: 50%"
:circular="true" :fullScreen="true" :showItemNavigators="true" :visible.sync="displayBasic">
<template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnail="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>
@ -30,24 +28,20 @@
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnail="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>
<h3>Custom Content</h3>
<Galleria :value="images" :activeItemIndex.sync="activeItemIndex" :responsiveOptions="responsiveOptions" :numVisible="7" containerStyle="max-width: 850px"
:circular="true" :fullScreen="true" :showItemNavigators="true" :showThumbnails="false" :visible.sync="displayCustom">
<template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnail="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>
@ -63,16 +57,14 @@
<TabPanel header="Source">
<CodeHighlight>
<template v-pre>
&lt;h3 class="first"&gt;Basic&lt;/h3&gt;
&lt;h3&gt;With Thumbnails&lt;/h3&gt;
&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" :showItemNavigators="true" :visible.sync="displayBasic"&gt;
&lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt;
&lt;template #thumbnail="slotProps"&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;/div&gt;
&lt;/template&gt;
&lt;/Galleria&gt;
@ -80,29 +72,25 @@
&lt;h3&gt;Without Thumbnails&lt;/h3&gt;
&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" :showItemNavigators="true" :showThumbnails="false" :visible.sync="displayBasic2"&gt;
&lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt;
&lt;template #thumbnail="slotProps"&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;/div&gt;
&lt;/template&gt;
&lt;/Galleria&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 Content&lt;/h3&gt;
&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" :showItemNavigators="true" :showThumbnails="false" :visible.sync="displayCustom"&gt;
&lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt;
&lt;template #thumbnail="slotProps"&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;/div&gt;
&lt;/template&gt;
&lt;/Galleria&gt;
@ -115,7 +103,7 @@
</CodeHighlight>
<CodeHighlight lang="javascript">
import GalleriaService from '../../service/GalleriaService';
import PhotoService from '../../service/PhotoService';
export default {
data() {
@ -161,7 +149,7 @@ export default {
},
galleriaService: null,
created() {
this.galleriaService = new GalleriaService();
this.galleriaService = new PhotoService();
},
mounted() {
this.galleriaService.getImages().then(data => this.images = data);
@ -181,7 +169,7 @@ export default {
</template>
<script>
import GalleriaService from '../../service/GalleriaService';
import PhotoService from '../../service/PhotoService';
export default {
data() {
@ -227,7 +215,7 @@ export default {
},
galleriaService: null,
created() {
this.galleriaService = new GalleriaService();
this.galleriaService = new PhotoService();
},
mounted() {
this.galleriaService.getImages().then(data => this.images = data);

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

@ -2,13 +2,13 @@
<div>
<div class="content-section introduction">
<div class="feature-intro">
<h1 style="margin-bottom: 0px;">Galleria - Indicator</h1>
<p></p>
<h1>Galleria - Indicator</h1>
<p>Indicators allow quick navigation between the items.</p>
</div>
</div>
<div class="content-section implementation">
<h3 class="first">Basic</h3>
<h3>Indicators with Click Event</h3>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"
:showThumbnails="false" :showIndicators="true">
<template #item="slotProps">
@ -16,7 +16,7 @@
</template>
</Galleria>
<h3>Change Preview On Indicator Hover</h3>
<h3>Indicators with Hover Event</h3>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"
:showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true">
<template #item="slotProps">
@ -24,7 +24,7 @@
</template>
</Galleria>
<h3>Show Indicator On Preview</h3>
<h3>Inside Content</h3>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"
:showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true">
<template #item="slotProps">
@ -32,57 +32,38 @@
</template>
</Galleria>
<h3>Position</h3>
<h3>Positioned at Top</h3>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"
:showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="bottom">
<template #header>
Bottom
</template>
<template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
</Galleria>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px; margin-top: 2rem;"
:showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="top">
<template #header>
Top
</template>
<template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
</Galleria>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px; margin-top: 2rem;"
<h3>Positioned at Left</h3>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"
:showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="left">
<template #header>
Left
</template>
<template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
</Galleria>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px; margin-top: 2rem;"
<h3>Positioned at Right</h3>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"
:showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="right">
<template #header>
Right
</template>
<template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
</Galleria>
<hr />
<h3>Template</h3>
<h3>Indicator Template</h3>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px;" class="custom-indicator-galleria"
:showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="left">
<template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #indicator="{index}">
<span style="color: #e9ecef">
<span style="color: #e9ecef; cursor: pointer">
{{index + 1}}
</span>
</template>
@ -94,170 +75,71 @@
<TabPanel header="Source">
<CodeHighlight>
<template v-pre>
&lt;h3 class="first"&gt;Basic&lt;/h3&gt;
&lt;h3&gt;Indicators with Click Event&lt;/h3&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"
:showThumbnails="false" :showIndicators="true"&gt;
&lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt;
&lt;template #thumbnail="slotProps"&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;/div&gt;
&lt;/template&gt;
&lt;/Galleria&gt;
&lt;hr /&gt;
&lt;h3&gt;Change Preview On Indicator Hover&lt;/h3&gt;
&lt;h3&gt;Indicators with Hover Event&lt;/h3&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"
:showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true"&gt;
:showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true"&gt;
&lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt;
&lt;template #thumbnail="slotProps"&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;/div&gt;
&lt;/template&gt;
&lt;/Galleria&gt;
&lt;hr /&gt;
&lt;h3&gt;Show Indicator On Preview&lt;/h3&gt;
&lt;h3&gt;Inside Content&lt;/h3&gt;
&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" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true"&gt;
&lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt;
&lt;template #thumbnail="slotProps"&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;/div&gt;
&lt;/template&gt;
&lt;/Galleria&gt;
&lt;hr /&gt;
&lt;h3&gt;Position&lt;/h3&gt;
&lt;h3&gt;Positioned at Top&lt;/h3&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"
:showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" :showIndicatorsOnPreview="true" indicatorsPosition="bottom"&gt;
&lt;template #header&gt;
Bottom
&lt;/template&gt;
:showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="top"&gt;
&lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt;
&lt;template #thumbnail="slotProps"&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;/div&gt;
&lt;/template&gt;
&lt;/Galleria&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px; margin-top: 2rem;"
:showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" :showIndicatorsOnPreview="true" indicatorsPosition="top"&gt;
&lt;template #header&gt;
Top
&lt;/template&gt;
&lt;h3&gt;Positioned at Left&lt;/h3&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"
:showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="left"&gt;
&lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt;
&lt;template #thumbnail="slotProps"&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;/div&gt;
&lt;/template&gt;
&lt;/Galleria&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px; margin-top: 2rem;"
:showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" :showIndicatorsOnPreview="true" indicatorsPosition="left"&gt;
&lt;template #header&gt;
Left
&lt;/template&gt;
&lt;h3&gt;Positioned at Right&lt;/h3&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"
:showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="right"&gt;
&lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt;
&lt;template #thumbnail="slotProps"&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;/div&gt;
&lt;/template&gt;
&lt;/Galleria&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px; margin-top: 2rem;"
:showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" :showIndicatorsOnPreview="true" indicatorsPosition="right"&gt;
&lt;template #header&gt;
Right
&lt;/template&gt;
&lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt;
&lt;template #thumbnail="slotProps"&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;/div&gt;
&lt;/template&gt;
&lt;/Galleria&gt;
&lt;hr /&gt;
&lt;h3&gt;Template&lt;/h3&gt;
&lt;h3&gt;Indicator Template&lt;/h3&gt;
&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" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="left"&gt;
&lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt;
&lt;template #thumbnail="slotProps"&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;/div&gt;
&lt;/template&gt;
&lt;template #indicator="{index}"&gt;
&lt;div&gt;
&lt;span style="color: #e9ecef; cursor: pointer"&gt;
{{index + 1}}
&lt;/div&gt;
&lt;/template&gt;
&lt;/Galleria&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px; margin-top: 2rem;" class="custom-indicator-galleria"
:showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" indicatorsPosition="left"&gt;
&lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt;
&lt;template #thumbnail="slotProps"&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;/div&gt;
&lt;/template&gt;
&lt;template #indicator="{index}"&gt;
&lt;div&gt;
{{index + 1}}
&lt;/div&gt;
&lt;/template&gt;
&lt;/Galleria&gt;
&lt;Galleria :value="images2" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px; margin-top: 2rem;" class="custom-indicator-galleria2"
:showThumbnails="false" :showIndicators="true" :changePreviewOnIndicatorHover="true" indicatorsPosition="left"&gt;
&lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt;
&lt;template #thumbnail="slotProps"&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;/div&gt;
&lt;/template&gt;
&lt;template #indicator="{index}"&gt;
&lt;div style="padding: .2rem; cursor: pointer"&gt;
&lt;img :src="images2[index].thumbnailImageSrc" :alt="images2[index].alt" style="display: block"/&gt;
&lt;/div&gt;
&lt;/span&gt;
&lt;/template&gt;
&lt;/Galleria&gt;
</template>
</CodeHighlight>
<CodeHighlight lang="javascript">
import GalleriaService from '../../service/GalleriaService';
import PhotoService from '../../service/PhotoService';
export default {
data() {
@ -282,7 +164,7 @@ export default {
},
galleriaService: null,
created() {
this.galleriaService = new GalleriaService();
this.galleriaService = new PhotoService();
},
mounted() {
this.galleriaService.getImages().then(data => {
@ -291,93 +173,6 @@ export default {
});
}
}
</CodeHighlight>
<CodeHighlight lang="css">
//SCSS
::v-deep {
&.custom-indicator-galleria {
&.p-galleria-indicators-left {
.p-galleria-preview-content {
.p-galleria-indicators {
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-indicators {
.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-indicators {
.p-galleria-indicator-item {
padding-right: 0;
}
}
}
}
}
}
}
</CodeHighlight>
</TabPanel>
</TabView>
@ -386,7 +181,7 @@ export default {
</template>
<script>
import GalleriaService from '../../service/GalleriaService';
import PhotoService from '../../service/PhotoService';
export default {
data() {
@ -411,7 +206,7 @@ export default {
},
galleriaService: null,
created() {
this.galleriaService = new GalleriaService();
this.galleriaService = new PhotoService();
},
mounted() {
this.galleriaService.getImages().then(data => {
@ -421,7 +216,3 @@ export default {
}
}
</script>
<style lang="scss" scoped>
</style>

176
src/views/galleria/GalleriaNavigatorDemo.vue Executable file
View File

@ -0,0 +1,176 @@
<template>
<div>
<div class="content-section introduction">
<div class="feature-intro">
<h1>Galleria - Navigator</h1>
<p>Combining item navigators, thumbnails and indicators provide various UI alternatives.</p>
</div>
</div>
<div class="content-section implementation">
<h3>Item Navigators and Thumbnails</h3>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px"
:showItemNavigators="true">
<template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnail="slotProps">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</template>
</Galleria>
<h3>Item Navigators without Thumbnails</h3>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px"
:showItemNavigators="true" :showThumbnails="false">
<template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnail="slotProps">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</template>
</Galleria>
<h3>Item Navigators on Hover</h3>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px;"
:showItemNavigators="true" :showItemNavigatorsOnHover="true">
<template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnail="slotProps">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</template>
</Galleria>
<h3>Item Navigators and Indicators</h3>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px;"
:showItemNavigators="true" :showThumbnails="false" :showItemNavigatorsOnHover="true" :showIndicators="true">
<template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnail="slotProps">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
</template>
</Galleria>
</div>
<div class="content-section documentation">
<TabView>
<TabPanel header="Source">
<CodeHighlight>
<template v-pre>
&lt;h3&gt;Item Navigators and Thumbnails&lt;/h3&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px"
:showItemNavigators="true"&gt;
&lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt;
&lt;template #thumbnail="slotProps"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
&lt;/template&gt;
&lt;/Galleria&gt;
&lt;h3&gt;Item Navigators without Thumbnails&lt;/h3&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px"
:showItemNavigators="true" :showThumbnails="false"&gt;
&lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt;
&lt;template #thumbnail="slotProps"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
&lt;/template&gt;
&lt;/Galleria&gt;
&lt;h3&gt;Item Navigators on Hover&lt;/h3&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px;"
:showItemNavigators="true" :showItemNavigatorsOnHover="true"&gt;
&lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt;
&lt;template #thumbnail="slotProps"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
&lt;/template&gt;
&lt;/Galleria&gt;
&lt;h3&gt;Item Navigators and Indicators&lt;/h3&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px;"
:showItemNavigators="true" :showThumbnails="false" :showItemNavigatorsOnHover="true" :showIndicators="true"&gt;
&lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt;
&lt;template #thumbnail="slotProps"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
&lt;/template&gt;
&lt;/Galleria&gt;
</template>
</CodeHighlight>
<CodeHighlight lang="javascript">
import PhotoService from '../../service/PhotoService';
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 PhotoService();
},
mounted() {
this.galleriaService.getImages().then(data => this.images = data);
}
}
</CodeHighlight>
</TabPanel>
</TabView>
</div>
</div>
</template>
<script>
import PhotoService from '../../service/PhotoService';
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 PhotoService();
},
mounted() {
this.galleriaService.getImages().then(data => this.images = data);
}
}
</script>

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

@ -1,264 +0,0 @@
<template>
<div>
<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 #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnail="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"
:showItemNavigators="true">
<template #header>
With Thumbnails
</template>
<template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnail="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"
:showItemNavigators="true" :showThumbnails="false">
<template #header>
Without Thumbnails
</template>
<template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnail="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 Hover</h3>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px;"
:showItemNavigators="true" :showItemNavigatorsOnHover="true">
<template #header>
With Thumbnails
</template>
<template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnail="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"
:showItemNavigators="true" :showThumbnails="false" :showItemNavigatorsOnHover="true">
<template #header>
Without Thumbnails
</template>
<template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnail="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;"
:showItemNavigators="true" :showThumbnails="false" :showItemNavigatorsOnHover="true"
:showIndicators="true" :showIndicatorsOnPreview="true" :changePreviewOnIndicatorHover="true">
<template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnail="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>
&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;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt;
&lt;template #thumbnail="slotProps"&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;/div&gt;
&lt;/template&gt;
&lt;/Galleria&gt;
&lt;h3&gt;Navigation Buttons&lt;/h3&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px"
:showPreviewNavButtons="true"&gt;
&lt;template #header&gt;
With Thumbnails
&lt;/template&gt;
&lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt;
&lt;template #thumbnail="slotProps"&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;/div&gt;
&lt;/template&gt;
&lt;/Galleria&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px; margin-top: 2em"
:showPreviewNavButtons="true" :showThumbnails="false"&gt;
&lt;template #header&gt;
Without Thumbnails
&lt;/template&gt;
&lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt;
&lt;template #thumbnail="slotProps"&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;/div&gt;
&lt;/template&gt;
&lt;/Galleria&gt;
&lt;h3&gt;Show Navigation Buttons on Preview Hover&lt;/h3&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px;"
:showPreviewNavButtons="true" :showNavButtonsOnPreviewHover="true"&gt;
&lt;template #header&gt;
With Thumbnails
&lt;/template&gt;
&lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt;
&lt;template #thumbnail="slotProps"&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;/div&gt;
&lt;/template&gt;
&lt;/Galleria&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 520px; margin-top: 2em"
:showPreviewNavButtons="true" :showThumbnails="false" :showNavButtonsOnPreviewHover="true"&gt;
&lt;template #header&gt;
Without Thumbnails
&lt;/template&gt;
&lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt;
&lt;template #thumbnail="slotProps"&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;/div&gt;
&lt;/template&gt;
&lt;/Galleria&gt;
&lt;h3&gt;Advanced&lt;/h3&gt;
&lt;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"&gt;
&lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt;
&lt;template #thumbnail="slotProps"&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;/div&gt;
&lt;/template&gt;
&lt;/Galleria&gt;
</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';
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);
}
}
</script>

54
src/views/galleria/GalleriaBasicDemo.vue → src/views/galleria/GalleriaProgrammaticDemo.vue Executable file → Normal file
View File

@ -1,29 +1,16 @@
<template>
<div>
<div class="galleria-demo">
<div class="content-section introduction">
<div class="feature-intro">
<h1 style="margin-bottom: 0px;">Galleria - Basic</h1>
<p></p>
<h1>Galleria - Programmatic</h1>
<p>Galleria can be controlled programmatically using the <b>activeItemIndex</b> property.</p>
</div>
</div>
<div class="content-section implementation">
<h3 class="first">Default</h3>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px">
<template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
</template>
<template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
</div>
</template>
</Galleria>
<h3>Programmatic</h3>
<div style="padding: .5em 0">
<div style="padding: .5rem 0">
<Button icon="pi pi-minus" @click="activeIndex--" class="p-button-secondary" />
<Button icon="pi pi-plus" @click="activeIndex++" class="p-button-secondary" style="margin-left: .5em" />
<Button icon="pi pi-plus" @click="activeIndex++" class="p-button-secondary" style="margin-left: .5rem" />
</div>
<Galleria :value="images" :activeItemIndex.sync="activeIndex" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px">
@ -31,9 +18,7 @@
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
</template>
<template #thumbnail="slotProps">
<div class="p-grid p-nogutter p-justify-center">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
</div>
</template>
</Galleria>
</div>
@ -43,22 +28,9 @@
<TabPanel header="Source">
<CodeHighlight>
<template v-pre>
&lt;h3 class="first"&gt;Default&lt;/h3&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"&gt;
&lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%" /&gt;
&lt;/template&gt;
&lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" /&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;/Galleria&gt;
&lt;h3&gt;Programmatic&lt;/h3&gt;
&lt;div style="padding: .5em 0"&gt;
&lt;div style="padding: .5rem 0"&gt;
&lt;Button icon="pi pi-minus" @click="activeIndex--" class="p-button-secondary" /&gt;
&lt;Button icon="pi pi-plus" @click="activeIndex++" class="p-button-secondary" style="margin-left: .5em" /&gt;
&lt;Button icon="pi pi-plus" @click="activeIndex++" class="p-button-secondary" style="margin-left: .5rem" /&gt;
&lt;/div&gt;
&lt;Galleria :value="images" :activeItemIndex.sync="activeIndex" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"&gt;
@ -66,16 +38,14 @@
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%" /&gt;
&lt;/template&gt;
&lt;template #thumbnail="slotProps"&gt;
&lt;div class="p-grid p-nogutter p-justify-center"&gt;
&lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" /&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;/Galleria&gt;
</template>
</CodeHighlight>
<CodeHighlight lang="javascript">
import GalleriaService from '../../service/GalleriaService';
import PhotoService from '../../service/PhotoService';
export default {
data() {
@ -100,10 +70,10 @@ export default {
},
galleriaService: null,
created() {
this.galleriaService = new GalleriaService();
this.galleriaService = new PhotoService();
},
mounted() {
this.galleriaService.getImages().then(data =&gt; this.images = data);
this.galleriaService.getImages().then(data => this.images = data);
},
computed: {
activeIndex: {
@ -126,7 +96,7 @@ export default {
</template>
<script>
import GalleriaService from '../../service/GalleriaService';
import PhotoService from '../../service/PhotoService';
export default {
data() {
@ -151,7 +121,7 @@ export default {
},
galleriaService: null,
created() {
this.galleriaService = new GalleriaService();
this.galleriaService = new PhotoService();
},
mounted() {
this.galleriaService.getImages().then(data => this.images = data);

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

@ -2,8 +2,8 @@
<div>
<div class="content-section introduction">
<div class="feature-intro">
<h1 style="margin-bottom: 0px;">Galleria - Responsive</h1>
<p></p>
<h1>Galleria - Responsive</h1>
<p>Galleria responsiveness is defined with the <b>responsiveOptions</b> property.</p>
</div>
</div>
@ -13,9 +13,7 @@
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnail="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>
@ -30,16 +28,14 @@
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt;
&lt;template #thumbnail="slotProps"&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;/div&gt;
&lt;/template&gt;
&lt;/Galleria&gt;
</template>
</CodeHighlight>
<CodeHighlight lang="javascript">
import GalleriaService from '../../service/GalleriaService';
import PhotoService from '../../service/PhotoService';
export default {
data() {
@ -67,7 +63,7 @@ export default {
},
galleriaService: null,
created() {
this.galleriaService = new GalleriaService();
this.galleriaService = new PhotoService();
},
mounted() {
this.galleriaService.getImages().then(data => this.images = data);
@ -81,7 +77,7 @@ export default {
</template>
<script>
import GalleriaService from '../../service/GalleriaService';
import PhotoService from '../../service/PhotoService';
export default {
data() {
@ -109,7 +105,7 @@ export default {
},
galleriaService: null,
created() {
this.galleriaService = new GalleriaService();
this.galleriaService = new PhotoService();
},
mounted() {
this.galleriaService.getImages().then(data => this.images = data);

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

@ -2,29 +2,24 @@
<div>
<div class="content-section introduction">
<div class="feature-intro">
<h1 style="margin-bottom: 0px;">Galleria - Thumbnail</h1>
<p></p>
<h1>Galleria - Thumbnail</h1>
<p>Thumbnails represent a smaller version of the actual content.</p>
</div>
</div>
<div class="content-section implementation">
<h3 class="first">Basic</h3>
<h3>Positioned at Bottom</h3>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px">
<template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnail="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>
<h3>Positioned at Left</h3>
<Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="4" thumbnailsPosition="left" style="max-width: 610px">
<template #header>
Left
</template>
<template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
@ -35,10 +30,8 @@
</template>
</Galleria>
<Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="4" thumbnailsPosition="right" style="max-width: 610px; margin-top: 2rem;">
<template #header>
Right
</template>
<h3>Positioned at Right</h3>
<Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="4" thumbnailsPosition="right" style="max-width: 610px">
<template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
@ -49,31 +42,13 @@
</template>
</Galleria>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" thumbnailsPosition="top" style="max-width: 520px; margin-top: 2rem;">
<template #header>
Top
</template>
<h3>Positioned at Top</h3>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" thumbnailsPosition="top" style="max-width: 520px">
<template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnail="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: 2rem;">
<template #header>
Bottom
</template>
<template #item="slotProps">
<img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
</template>
<template #thumbnail="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>
@ -83,23 +58,18 @@
<TabPanel header="Source">
<CodeHighlight>
<template v-pre>
&lt;h3 class="first"&gt;Basic&lt;/h3&gt;
&lt;h3&gt;Positioned at Bottom&lt;/h3&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 520px"&gt;
&lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt;
&lt;template #thumbnail="slotProps"&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;/div&gt;
&lt;/template&gt;
&lt;/Galleria&gt;
&lt;h3&gt;Position&lt;/h3&gt;
&lt;h3&gt;Positioned at Left&lt;/h3&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="4" thumbnailsPosition="left" style="max-width: 610px"&gt;
&lt;template #header&gt;
Left
&lt;/template&gt;
&lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt;
@ -110,10 +80,8 @@
&lt;/template&gt;
&lt;/Galleria&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="4" thumbnailsPosition="right" style="max-width: 610px; margin-top: 2rem;"&gt;
&lt;template #header&gt;
Right
&lt;/template&gt;
&lt;h3&gt;Positioned at Right&lt;/h3&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="4" thumbnailsPosition="right" style="max-width: 610px"&gt;
&lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt;
@ -124,38 +92,20 @@
&lt;/template&gt;
&lt;/Galleria&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" thumbnailsPosition="top" style="max-width: 520px; margin-top: 2rem;"&gt;
&lt;template #header&gt;
Top
&lt;/template&gt;
&lt;h3&gt;Positioned at Top&lt;/h3&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" thumbnailsPosition="top" style="max-width: 520px"&gt;
&lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt;
&lt;template #thumbnail="slotProps"&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;/div&gt;
&lt;/template&gt;
&lt;/Galleria&gt;
&lt;Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" thumbnailsPosition="bottom" style="max-width: 520px; margin-top: 2rem;"&gt;
&lt;template #header&gt;
Bottom
&lt;/template&gt;
&lt;template #item="slotProps"&gt;
&lt;img :src="slotProps.item.previewImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
&lt;/template&gt;
&lt;template #thumbnail="slotProps"&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;/div&gt;
&lt;/template&gt;
&lt;/Galleria&gt;
</template>
</CodeHighlight>
<CodeHighlight lang="javascript">
import GalleriaService from '../../service/GalleriaService';
import PhotoService from '../../service/PhotoService';
export default {
data() {
@ -189,7 +139,7 @@ export default {
},
galleriaService: null,
created() {
this.galleriaService = new GalleriaService();
this.galleriaService = new PhotoService();
},
mounted() {
this.galleriaService.getImages().then(data => this.images = data);
@ -203,7 +153,7 @@ export default {
</template>
<script>
import GalleriaService from '../../service/GalleriaService';
import PhotoService from '../../service/PhotoService';
export default {
data() {
@ -237,7 +187,7 @@ export default {
},
galleriaService: null,
created() {
this.galleriaService = new GalleriaService();
this.galleriaService = new PhotoService();
},
mounted() {
this.galleriaService.getImages().then(data => this.images = data);