%PDF-
%PDF-
Mini Shell
Mini Shell
<template>
<div>
<div class="parallax-container">
<div class="parallax">
<p class="title">Eva's</p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4 no-padding" v-for="(image, key) in posts" :key="image.id">
<image-component :image="image.preview">
<span class="image-icon fa fa-2x fa-facebook"></span>
<span class="image-icon fa fa-2x fa-instagram"></span>
<span class="image-icon fa fa-2x fa-search-plus" @click="zoomImage(key)"></span>
</image-component>
</div>
<full-screen-image-preview-component :images="posts" :current-image-index="clickedImage"
:set-instance="setModalInstance">
</full-screen-image-preview-component>
</div>
<transition name="fade">
<div class="row" v-if="pagination.links && pagination.links.next">
<div class="col-sm-2 mx-auto">
<button class="btn btn-outline-primary btn-block" @click="loadMore()">
Load more
</button>
</div>
</div>
</transition>
</div>
</div>
</template>
<script>
import ImageComponent from "../components/ImageComponent.vue";
import FullScreenImagePreviewComponent from "../components/FullScreenImagePreviewComponent.vue";
export default {
name: 'Home',
components: {
ImageComponent,
FullScreenImagePreviewComponent
},
data() {
return {
posts: [],
pagination: {},
modalInstance: {},
clickedImage: 0
};
},
methods: {
getPosts: function (api) {
let vm = this;
vm.axios.get(api).then(function (response) {
vm.posts = vm.posts.concat(response.data.data);
vm.pagination = response.data.meta.pagination;
});
},
loadMore: function () {
this.getPosts(this.pagination.links.next);
},
zoomImage: function (index) {
const vm = this;
vm.clickedImage = index;
setTimeout(function () {
vm.modalInstance.show();
}, 100);
},
setModalInstance: function (modal, carousel) {
this.modalInstance = modal;
}
},
created() {
this.getPosts('/api/posts');
}
}
</script>
Zerion Mini Shell 1.0