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

Galleria image fix

pull/3642/head
Tuğçe Küçükoğlu 2023-02-06 19:14:52 +03:00
parent 4f98bdb335
commit a361aadd2d
10 changed files with 42 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
pages/galleria/Advanced.vue
View File

@ -24,11 +24,11 @@
:transitionInterval="3000"
>
<template #item="slotProps">
<img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{ width: !fullScreen ? '100%' : '', display: !fullScreen ? 'block' : '' }]" />
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{ width: !fullScreen ? '100%' : '', display: !fullScreen ? 'block' : '' }]" />
</template>
<template #thumbnail="slotProps">
<div class="grid grid-nogutter justify-content-center">
<img :src="$config.public.contextPath + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
</div>
</template>
<template #footer>

4
pages/galleria/AutoPlay.vue
View File

@ -11,10 +11,10 @@
<div class="card">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px" :circular="true" :autoPlay="true" :transitionInterval="2000">
<template #item="slotProps">
<img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template>
<template #thumbnail="slotProps">
<img :src="$config.public.contextPath + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
</template>
</Galleria>
</div>

4
pages/galleria/Caption.vue
View File

@ -11,11 +11,11 @@
<div class="card">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
<template #item="{ item }">
<img :src="$config.public.contextPath + item.itemImageSrc" :alt="item.alt" style="width: 100%; display: block" />
<img :src="item.itemImageSrc" :alt="item.alt" style="width: 100%; display: block" />
</template>
<template #thumbnail="{ item }">
<div class="grid grid-nogutter justify-content-center">
<img :src="$config.public.contextPath + item.thumbnailImageSrc" :alt="item.alt" style="display: block" />
<img :src="item.thumbnailImageSrc" :alt="item.alt" style="display: block" />
</div>
</template>
<template #caption="{ item }">

14
pages/galleria/FullScreen.vue
View File

@ -12,10 +12,10 @@
<h5>With Thumbnails</h5>
<Galleria v-model:visible="displayBasic" :value="images" :responsiveOptions="responsiveOptions2" :numVisible="9" containerStyle="max-width: 50%" :circular="true" :fullScreen="true" :showItemNavigators="true">
<template #item="slotProps">
<img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template>
<template #thumbnail="slotProps">
<img :src="$config.public.contextPath + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
</template>
</Galleria>
@ -26,10 +26,10 @@
<h5>Without Thumbnails</h5>
<Galleria v-model:visible="displayBasic2" :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" containerStyle="max-width: 850px" :circular="true" :fullScreen="true" :showItemNavigators="true" :showThumbnails="false">
<template #item="slotProps">
<img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template>
<template #thumbnail="slotProps">
<img :src="$config.public.contextPath + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
</template>
</Galleria>
@ -51,16 +51,16 @@
:showThumbnails="false"
>
<template #item="slotProps">
<img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template>
<template #thumbnail="slotProps">
<img :src="$config.public.contextPath + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
</template>
</Galleria>
<div v-if="images" class="grid" style="max-width: 400px">
<div v-for="(image, index) of images" :key="index" class="col-3">
<img :src="$config.public.contextPath + image.thumbnailImageSrc" :alt="image.alt" style="cursor: pointer" @click="imageClick(index)" />
<img :src="image.thumbnailImageSrc" :alt="image.alt" style="cursor: pointer" @click="imageClick(index)" />
</div>
</div>
</div>

14
pages/galleria/Indicator.vue
View File

@ -12,7 +12,7 @@
<h5>Indicators with Click Event</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false" :showIndicators="true">
<template #item="slotProps">
<img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template>
</Galleria>
</div>
@ -21,7 +21,7 @@
<h5>Indicators with Hover Event</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true">
<template #item="slotProps">
<img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template>
</Galleria>
</div>
@ -30,7 +30,7 @@
<h5>Inside Content</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true">
<template #item="slotProps">
<img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template>
</Galleria>
</div>
@ -49,7 +49,7 @@
indicatorsPosition="top"
>
<template #item="slotProps">
<img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template>
</Galleria>
</div>
@ -68,7 +68,7 @@
indicatorsPosition="left"
>
<template #item="slotProps">
<img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template>
</Galleria>
</div>
@ -87,7 +87,7 @@
indicatorsPosition="right"
>
<template #item="slotProps">
<img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template>
</Galleria>
</div>
@ -107,7 +107,7 @@
indicatorsPosition="left"
>
<template #item="slotProps">
<img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template>
<template #indicator="{ index }">
<span class="indicator-text">

16
pages/galleria/Navigator.vue
View File

@ -12,10 +12,10 @@
<h5>Item Navigators and Thumbnails</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px" :showItemNavigators="true">
<template #item="slotProps">
<img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template>
<template #thumbnail="slotProps">
<img :src="$config.public.contextPath + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
</template>
</Galleria>
</div>
@ -24,10 +24,10 @@
<h5>Item Navigators without Thumbnails</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px" :showItemNavigators="true" :showThumbnails="false">
<template #item="slotProps">
<img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template>
<template #thumbnail="slotProps">
<img :src="$config.public.contextPath + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
</template>
</Galleria>
</div>
@ -36,10 +36,10 @@
<h5>Item Navigators on Hover</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px" :showItemNavigators="true" :showItemNavigatorsOnHover="true">
<template #item="slotProps">
<img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template>
<template #thumbnail="slotProps">
<img :src="$config.public.contextPath + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
</template>
</Galleria>
</div>
@ -58,10 +58,10 @@
:showIndicators="true"
>
<template #item="slotProps">
<img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template>
<template #thumbnail="slotProps">
<img :src="$config.public.contextPath + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
</template>
</Galleria>
</div>

4
pages/galleria/Programmatic.vue
View File

@ -16,10 +16,10 @@
<Galleria v-model:activeIndex="activeIndex" :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
<template #item="slotProps">
<img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
</template>
<template #thumbnail="slotProps">
<img :src="$config.public.contextPath + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
</template>
</Galleria>
</div>

4
pages/galleria/Responsive.vue
View File

@ -11,10 +11,10 @@
<div class="card">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" :circular="true" style="max-width: 800px">
<template #item="slotProps">
<img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template>
<template #thumbnail="slotProps">
<img :src="$config.public.contextPath + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
</template>
</Galleria>
</div>

16
pages/galleria/Thumbnail.vue
View File

@ -12,10 +12,10 @@
<h5>Positioned at Bottom</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
<template #item="slotProps">
<img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template>
<template #thumbnail="slotProps">
<img :src="$config.public.contextPath + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
</template>
</Galleria>
</div>
@ -24,11 +24,11 @@
<h5>Positioned at Left</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="4" thumbnailsPosition="left" containerStyle="max-width: 640px">
<template #item="slotProps">
<img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template>
<template #thumbnail="slotProps">
<div class="grid grid-nogutter justify-content-center">
<img :src="$config.public.contextPath + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
</div>
</template>
</Galleria>
@ -38,11 +38,11 @@
<h5>Positioned at Right</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="4" thumbnailsPosition="right" containerStyle="max-width: 640px">
<template #item="slotProps">
<img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template>
<template #thumbnail="slotProps">
<div class="grid grid-nogutter justify-content-center">
<img :src="$config.public.contextPath + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
</div>
</template>
</Galleria>
@ -52,10 +52,10 @@
<h5>Positioned at Top</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" thumbnailsPosition="top" containerStyle="max-width: 640px">
<template #item="slotProps">
<img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template>
<template #thumbnail="slotProps">
<img :src="$config.public.contextPath + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
</template>
</Galleria>
</div>

4
pages/galleria/index.vue
View File

@ -17,10 +17,10 @@
<div class="card">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
<template #item="slotProps">
<img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
</template>
<template #thumbnail="slotProps">
<img :src="$config.public.contextPath + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
</template>
</Galleria>
</div>