mahyargdz
225 lines
8.7 KiB
Vue
225 lines
8.7 KiB
Vue
<template>
|
|
<div class="gallery-page page">
|
|
<!---------------------------------- Section 1 ------------------------------------->
|
|
<section class="s1-Img-BG">
|
|
<div
|
|
class="parallax"
|
|
:style="{
|
|
background: `linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),url(${cover ? cover : defaultCover})`
|
|
}"
|
|
>
|
|
<h1 class="h1 anim-fadeIn" :style="{ color: $route.params.lang === 'fa' && '#fff' }">{{ content.s1.t1 }}</h1>
|
|
</div>
|
|
</section>
|
|
|
|
<!---------------------------------- Section 2 ------------------------------------->
|
|
<!-- <section class="s2-BG">-->
|
|
<!-- <div class="container">-->
|
|
<!-- <div class="row">-->
|
|
<!-- <div class="col-12">-->
|
|
<!-- <ul>-->
|
|
<!-- <nuxt-link-->
|
|
<!-- class="s2-all-cat"-->
|
|
<!-- :to="{name: 'lang-gallery',params: {lang: $route.params.lang},query: {category: 'all'}}"-->
|
|
<!-- tag="li"-->
|
|
<!-- >-->
|
|
<!-- <a :class="$route.query.category === 'all' ? 'active' : null">{{ content.s2.t1 }}</a>-->
|
|
<!-- </nuxt-link>-->
|
|
<!-- <nuxt-link-->
|
|
<!-- class="s2-all-cat"-->
|
|
|
|
<!-- :to="{name: 'lang-gallery',params: {lang: $route.params.lang},query: {category: 'no-category'}}"-->
|
|
<!-- tag="li"-->
|
|
<!-- >-->
|
|
<!-- <a :class="$route.query.category === 'no-category' ? 'active' : null">{{ content.s2.t2 }}</a>-->
|
|
<!-- </nuxt-link>-->
|
|
<!-- <nuxt-link-->
|
|
<!-- class="s2-all-cat"-->
|
|
|
|
<!-- v-for="item in galleryCategories"-->
|
|
<!-- :key="item._id"-->
|
|
<!-- :to="{name: 'lang-gallery',params: {lang: $route.params.lang},query: {category: item.locale[$route.params.lang].title}}"-->
|
|
<!-- tag="li"-->
|
|
<!-- >-->
|
|
<!-- <a :class="$route.query.category === item.locale[$route.params.lang].title ? 'active' : null">{{-->
|
|
<!-- item.locale[$route.params.lang].title-->
|
|
<!-- }}</a>-->
|
|
<!-- </nuxt-link>-->
|
|
<!-- </ul>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- </section>-->
|
|
|
|
<!---------------------------------- Section 3 ------------------------------------->
|
|
<section class="s3-BG section">
|
|
<div class="container">
|
|
<template v-if="galleryCategories.length">
|
|
<!-- start gallery row -->
|
|
<!-- <div class="col-12 col-md-3" v-for="(item,index) in imageChunk" :key="index">-->
|
|
<div class="row">
|
|
<div class="col-12 col-md-3" v-for="item in galleryCategories" :key="item._id">
|
|
<nuxt-link :to="{ name: 'lang-gallery-images', params: { lang: $route.params.lang, images: item._id } }">
|
|
<div class="imgBox">
|
|
<img
|
|
:src="item.thumb.includes('undefined') ? '/img/default-img.png' : item.thumb"
|
|
:alt="item.locale[$route.params.lang].title"
|
|
/>
|
|
<h4>{{ item.locale[$route.params.lang].title }}</h4>
|
|
</div>
|
|
</nuxt-link>
|
|
</div>
|
|
<!-- </div>-->
|
|
|
|
<!-- <pre>{{ filteredImages }}</pre>-->
|
|
</div>
|
|
<!-- <div class="gallery--row" v-for="(item,index) in imageChunk" :key="index"-->
|
|
<!-- :class="index%2 !== 0 ? 'gallery--row-reverse' : null"-->
|
|
|
|
<!-- >-->
|
|
<!-- <div class="row top">-->
|
|
<!-- <div class="col-5 left anim-fadeIn">-->
|
|
<!-- <div class="imgBox" v-if="item.length >= 1">-->
|
|
<!-- <a :href="item[0].image">-->
|
|
<!-- <img :src="item[0].thumb" :title="item[0].locale[$route.params.lang].caption"-->
|
|
<!-- :alt="item[0].locale[$route.params.lang].caption">-->
|
|
<!-- </a>-->
|
|
<!-- </div>-->
|
|
<!--<!– <div class="txtBox anim-fadeIn" v-if="item.length >= 3">–>-->
|
|
<!--<!– <img src="/img/GalleryPage/logo-colored.svg" alt=""/>–>-->
|
|
<!--<!– <p>–>-->
|
|
<!--<!– {{ content.s3.t1 }}–>-->
|
|
<!--<!– </p>–>-->
|
|
<!--<!– </div>–>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="col-7 right anim-fadeIn">-->
|
|
<!-- <div class="imgBox" v-if="item.length >= 2">-->
|
|
<!-- <a :href="item[1].image">-->
|
|
<!-- <img :src="item[1].thumb" :title="item[1].locale[$route.params.lang].caption"-->
|
|
<!-- :alt="item[1].locale[$route.params.lang].caption">-->
|
|
<!-- </a>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="imgBox" v-if="item.length >= 3">-->
|
|
<!-- <a :href="item[2].image">-->
|
|
<!-- <img :src="item[2].thumb" :title="item[2].locale[$route.params.lang].caption"-->
|
|
<!-- :alt="item[2].locale[$route.params.lang].caption">-->
|
|
<!-- </a>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="row bottom" v-if="item.length >= 4">-->
|
|
<!-- <div class="col-8 anim-fadeIn">-->
|
|
<!-- <div class="imgBox" v-if="item.length >= 4">-->
|
|
<!-- <a :href="item[3].image">-->
|
|
<!-- <img :src="item[3].thumb" :title="item[3].locale[$route.params.lang].caption"-->
|
|
<!-- :alt="item[3].locale[$route.params.lang].caption">-->
|
|
<!-- </a>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="col-4 anim-fadeIn">-->
|
|
<!-- <div class="imgBox" v-if="item.length >= 5">-->
|
|
<!-- <a :href="item[4].image">-->
|
|
<!-- <img :src="item[4].thumb" :title="item[4].locale[$route.params.lang].caption"-->
|
|
<!-- :alt="item[4].locale[$route.params.lang].caption">-->
|
|
<!-- </a>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- end gallery row -->
|
|
</template>
|
|
|
|
<div class="row" v-else>
|
|
<div class="col-12 s3-notFound">
|
|
<h6 class="h6 notFound">{{ content.s3.t2 }}</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
fadeInAnimation,
|
|
fadeInStaggerAnimation,
|
|
leftToRightAnimation,
|
|
leftToRightStaggerAnimation,
|
|
numberAnimation,
|
|
progressAnimation,
|
|
rightToLeftAnimation
|
|
} from '@/utils/animations'
|
|
|
|
export default {
|
|
mounted() {
|
|
this.$nextTick(() => {
|
|
fadeInAnimation(this.$gsap)
|
|
leftToRightAnimation(this.$gsap)
|
|
fadeInStaggerAnimation(this.$gsap)
|
|
leftToRightStaggerAnimation(this.$gsap)
|
|
numberAnimation(this.$gsap)
|
|
progressAnimation(this.$gsap)
|
|
rightToLeftAnimation(this.$gsap)
|
|
})
|
|
//--------------------------------------------------------- Section 1
|
|
// this.$gsap.timeline({
|
|
// scrollTrigger: {
|
|
// trigger: ".s2-BG",
|
|
// scrub: true,
|
|
// start: "top top",
|
|
// }
|
|
// })
|
|
// .to($('.s1-Img-BG .parallax'), {
|
|
// duration: 9,
|
|
// opacity: 0,
|
|
// y: '50%'
|
|
// })
|
|
},
|
|
data() {
|
|
return {
|
|
galleryCategories: null,
|
|
images: null,
|
|
defaultCover: '/img/GalleryPage/page-title.png'
|
|
}
|
|
},
|
|
computed: {
|
|
filteredImages() {
|
|
if (this.$route.query.category === 'all') return this.images
|
|
else if (this.$route.query.category === 'no-category') return this.images.filter(item => item.noCategory)
|
|
else
|
|
return this.images.filter(
|
|
item =>
|
|
!item.noCategory && item.category.locale[this.$route.params.lang].title === this.$route.query.category
|
|
)
|
|
},
|
|
imageChunk() {
|
|
const images = this.filteredImages
|
|
const chunkSize = 5
|
|
let imageChunk = []
|
|
let chunk = []
|
|
images.forEach((item, index) => {
|
|
chunk.push(item)
|
|
if ((index + 1) % chunkSize === 0) {
|
|
imageChunk.push(chunk)
|
|
chunk = []
|
|
}
|
|
if (index === images.length - 1 && chunk.length) imageChunk.push(chunk)
|
|
})
|
|
return imageChunk
|
|
},
|
|
content() {
|
|
return this.$store.state.content.gallery[this.$route.params.lang]
|
|
},
|
|
cover() {
|
|
return this.$store.state.global.cover?.gallery
|
|
}
|
|
},
|
|
async asyncData({ $axios }) {
|
|
const galleryCategories = await $axios.get(`/api/public/galleryCategories`)
|
|
return {
|
|
galleryCategories: galleryCategories.data
|
|
}
|
|
}
|
|
}
|
|
</script>
|