ts1 / flipbook-vue Goto Github PK
View Code? Open in Web Editor NEW3D page flip effect for Vue.js
Home Page: https://ts1.github.io/flipbook-vue/
3D page flip effect for Vue.js
Home Page: https://ts1.github.io/flipbook-vue/
Phenomenal repo that fits perfectly with a project i'm working on so thank you! Any chance you might be willing to add support for nuxtjs?
Thanks,
Jason
I'm having trouble to integrate flipbook-vue + Quasar Framework, I just Started with an empty Quasar Framework Template and importing flipbook-vue with yarn.
I can see the buttons but no mage. My code is:
<template>
<q-page class="flex flex-center">
<flipbook :pages="pages" v-slot="flipbook">
<button @click="flipbook.flipLeft">Previous Page</button>
<button @click="flipbook.flipRight">Next Page</button>
</flipbook>
</q-page>
</template>
<script>
import Flipbook from 'flipbook-vue'
export default {
components: { Flipbook },
name: 'PageIndex',
data: () => {
return {
pages: [require('../assets/book/1.jpg').default, require('../assets/book/2.jpg').default]
}
}
}
</script>
<style>
.flipbook .viewport {
width: 90vw;
height: 90vh;
}
</style>
No Warning or Errors in Console. Any clue? Thank you!
How to put alt text on images?
For accessibility ans SEO
Thank for this beautiful component.
I have an issue with passing the array from an api to the pages prop.
This is how i'm getting my api response that has a property "media_full" that I need to extract and convert into an array for flipbook
computed: {
posts() {
return this.$store.getters.requestedItems(this.request) <--- my response array
}
},
I tried this but it doesn't work but I see the correct image urls array in my console
posts() {
let array = this.$store.getters.requestedItems(this.request)
var finalArray = array.map(function (obj) {
return obj.media_full;
});
console.log(finalArray);
}
Hello,
I have an issue where the component is setting canFlipLeft/Right and canGoForward/Back to false when I am on a page number that is significantly less than than the total (numPages). My flipbook has a cover page + 4 interior spreads. The library works fine for flipping my first few times, but I don't get the page flipping effect when I attempt to go to spread 3 because of the false values mentioned above. Thanks for any input you might have!
I've attached some screenshots for reference -
Hi Takeshi,
I have another problem. The component is reloaded every time I turn pages. I've tried to replicate the same functionality like you've did in the demo. but the behaviour is different. Please take a look.
Thank you.
<template>
<div
:class="{'has-mouse': hasMouse}"
@touchstart="hasMouse = false"
v-if="component"
class="flipbook-wrapper">
<flipbook
class="flipbook"
:pages="pages"
:startPage="pageNum"
v-slot="flipbook"
ref="flipbook"
@flip-left-start="onFlipLeftStart"
@flip-left-end="onFlipLeftEnd"
@flip-right-start="onFlipRightStart"
@flip-right-end="onFlipRightEnd"
@zoom-start="onZoomStart"
@zoom-end="onZoomEnd"
>
<div class="action-bar" v-if="showActionBar">
<span :class="{ disabled: !flipbook.canFlipLeft }" class="icon sc-icon icon-arrow-left" @click="flipbook.flipLeft"></span>
<span :class="{ disabled: !flipbook.canZoomIn }" class="icon sc-icon icon-zoom-plus" @click="flipbook.zoomIn"></span>
<span class="page-num">
Page {{ flipbook.page }} of {{ flipbook.numPages }}
</span>
<span :class="{ disabled: !flipbook.canZoomOut }" class="icon sc-icon icon-zoom-plus" @click="flipbook.zoomOut"></span>
<span :class="{ disabled: !flipbook.canFlipRight }" class="icon sc-icon icon-arrow-right" @click="flipbook.flipRight" ></span>
</div>
</flipbook>
</div>
</template>
<script>
import flipbook from 'flipbook-vue';
export default {
name: "Flipbook",
props: ["height", "allowDownload", "previewImage", "flipbookData", "carousel"],
components: {
flipbook
},
data: function() {
return {
hasMouse: true,
pageNum: null
}
},
computed: {
pages: function() {
let pages = false
console.log("pages")
if(this.flipbookData) {
pages = [null]
for (let item of this.flipbookData) {
console.log(item)
let link = item.image['@link'] + ".jpg"
console.log(link)
pages.push(link.substring(1));
}
}
return pages
},
component: function() {
console.log("component")
console.log("ce apare aici" + this.pages)
if(this.pages) {
console.log("true")
return true;
} else {
return false;
}
},
showActionBar() {
if(this.flipbook) {
return true;
} else {
return false;
}
}
},
methods: {
onFlipLeftStart: (page) => console.log('flip-left-start', page),
onFlipLeftEnd: (page) => {
console.log('flip-left-end', page);
window.location.hash = '#' + page
},
onFlipRightStart: (page) => console.log('flip-right-start', page),
onFlipRightEnd: (page) => {
console.log('flip-right-end', page)
window.location.hash = '#' + page
},
onZoomStart: (zoom) => console.log('zoom-start', zoom),
onZoomEnd: (zoom) => console.log('zoom-end', zoom),
setPageFromHash: function() {
let n = parseInt(window.location.hash.slice(1), 10)
if (Number.isInteger(n) & n !== undefined) {
this.pageNum = n;
}
}
}, mounted: function() {
console.log("flipbook initialization")
this.flipbook = this.$refs.flipbook;
console.log(this.$refs.flipbook)
window.addEventListener("keydown", (ev) => {
this.flipbook = this.$refs.flipbook
if(!this.flipbook) return
if (ev.keyCode == 37 & flipbook.canFlipLeft) flipbook.flipLeft()
if (ev.keyCode == 39 & flipbook.canFlipRight) flipbook.flipRight()
})
window.addEventListener('hashchange', this.setPageFromHash)
this.setPageFromHash()
}
};
</script>
<style>
.flipbook-wrapper {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
background-color: #333;
color: #ccc;
overflow: hidden;
}
.action-bar {
width: 100%;
height: 30px;
padding: 10px 0;
display: flex;
justify-content: center;
align-items: center;
}
.flipbook {
width: 90vw;
height: 90vh;
}
.flipbook .viewport {
width: 90vw;
height: calc(100vh - 50px - 40px);
}
.flipbook .bounding-box {
box-shadow: 0 0 20px #000;
}
</style>
Hey!
Really liking this library. What do you think about adding events for 'on-flip-right' and 'on-flip-left'?
I would like to know when users go to the next page (for swipe, clicking gutters, or some other means).
Let me know what you think! I would be willing to make a PR with a suggested implementation if you like?
Thanks
I noticed that if images have parentheses, then they won't be displayed during the flip - it will just display a transparent polygon.
image(1).png
will display with the problem
image1.png
will display correctly.
The polygon seems to insert a space on the filename before the parentheses, so the images can't be found.
I'm using this with Nuxt, however I'm not sure if it would make a difference.
It's a simple fix for the user, but thought it was best to alert others incase they are having the same issue.
p.s. great package by the way - thank you!
Hello. I cannt install a new version, I dont know why. Can you help me? My test page is here https://gryfnekadry.pl/grand3/public/ ...
When using:
:class="{ disabled: !flipbook.canFlipLeft }"
navigational arrows are in fact disabled when you reach the first/last page which is good. but they also get the disabled state during the page transitions, which looks strange and even annoying. I think that another computed boolean value like pageInTransition
would solve the issue.
Hello,
Following the integration of your module in a project that I must develop,
I encounter the following problem,
Flipbook images do not center correctly in the container, shift to the right,
I enclose the screenshot below in which I put a background-color: red in the style of the container and the script code who import the flipbook component to better understand the problem,
Can you please help me about this problem,
I thank you in advance for your return,
Best regards,
I think that clicking on left or right area outside the picture should slide images,
and not enhance them.
Hi,
Is it possible to show a single large image per page instead of two?
My images have text on them and are horizontal (1024px x 576px). So it becomes a bit difficult to read the text when they are shown in 500px coz width is getting divided for two images.
Thank you
i tried to put that in html but it doesn't work....
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.umd.prod.js"></script>
<script src="https://unpkg.com/flipbook-vue"></script>
and the error I got from browser is:
flipbook-vue:29 Uncaught TypeError: Vue.component is not a function
at flipbook-vue:29
at flipbook-vue:29
Is there any way I could retrieve current position of flipbook's zoomed in page? I am using a canvas which is placed on top of a flipbook, I need to position content within this canvas to match the current zoomed in area of the flipbook but I can't find any way to get the current offset/position of the flipbook image
Hi ts1. Your work is awesome and working well so far.
I was wondering if you could add a feature or option, which allows user to flip pages by tapping the four corners of the page.
Best regards.
Hello, thank you for this package that you contribute to us, but I would like to know if you can put a lazy effect when loading the pages, since on my website the images take about 2 seconds to get from the server and it doesn't look good, it would be good to implement a load no I know if you can help me with that or can you tell me how I could put it
Hello, I would like to know how do I activate the event when the user starts to flip by dragging? Thanks in advance
When run app displays this error
and this my code
<template><flipbook class="flipbook" v-slot="flipbook" :pages="['null','https://picsum.photos/200/300','https://picsum.photos/200/300','https://picsum.photos/200/300']"> </flipbook></template><script>import Flipbook from 'flipbook-vue'export default {components: { Flipbook }} </script><style>.flipbook {width: 90vw;height: 90vh;}</style>
Hi,
This looks very promising!
I took a quick look at the code, but could not figure out if it is possible to link to a page directly (through a direct URL). Or is that something that one would/should implement?
Hello
For various applications, would it be possible to add the choice in the reading direction via a prop? (a reading from right to left for example).
thank you in advance
Hi sir, first of all thank you very much for your tool, it is very useful
I'm having some problems using your code, if I go to the next page and then go back, I can't do it again. Sometimes when I turn to the last page I still can turn down, and sometimes the button can only be clicked twice, and then there is no response.
Maybe I'm doing something wrong, can you help me?
ReferenceError: navigator is not defined
at Object. (/Users/xxx/Documents/hjs/project/hjs_portal_vue/node_modules/flipbook-vue/dist/flipbook.cjs.js:82:21)
at Module._compile (node:internal/modules/cjs/loader:1109:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1138:10)
at Module.load (node:internal/modules/cjs/loader:989:32)
at Function.Module._load (node:internal/modules/cjs/loader:829:14)
at Module.require (node:internal/modules/cjs/loader:1013:19)
at require (node:internal/modules/cjs/helpers:93:18)
SSR porject with node.js
I'm making this online newspaper for a cliente where I'll have all pages indexed on the left of the website, so the user can go directly to a page, to the cover or to the last page throught buttons.
If I had time I would try to implement as a fork, but these days I don't have much time left
It would be great to have a method for that, for now, if anyone needs the same feature is this that I'm doing (VueJs):
I have a flipDuration setted in data
<flipbook ref="flipbook" :flipDuration="flipDuration">
flipToPage(page) { // not index mode
if (page > this.$refs.flipbook.numPages) {
console.error("Page out of range")
}
page = page - 1 // make the page indexed by 0
let method = page > this.$refs.flipbook.currentPage ? 'Right' : 'Left' // Direction to go
let flips = Math.abs(page - this.$refs.flipbook.currentPage) // number of flips to do
if (!this.$refs.flipbook.singlePage) {
// If is not in single page mode, the flips are divided by 2 cause in each flip show 2 pages
flips = Math.floor(flips / 2)
}
console.log(flips)
if (flips == 0) {
// If flips is equalt o 0 it means the page is already visible
return;
}
if (flips > 1) { // If the target page is not the next or the previous one, make the flip faster
this.flipDuration = 300
}
this.$refs.flipbook[`flip${method}`](); // make the first flip
flips-- //subtract one flip
if (flips > 0) {
let interval = setInterval(() => {
if (this.$refs.flipbook[`canFlip${method}`]) {
this.$refs.flipbook[`flip${method}`]();
flips--;
if (flips == 0) {
clearInterval(interval)
this.flipDuration = 1000
}
}
}, 100);
}
}
Hi,
I just stumbled on your library and I really like it, but as I'm working on a project in Vue3 it breaks when I try to add it via npm.
Are you planning on supporting Vue3 anytime soon?
I've tried the demo on a few versions of Safari where zoom isn't working properly like it does on Chrome (Mac) or Windows. When I click for zoom it expands beyond the page towards the top left corner no matter where the mouse is pointed.
Safari 13.0.5 / MacOS 10.14.6
I will add more examples when I get them, I'm waiting to here back from my employer on what version he is on (both iPad and laptop).
It's really a great component, very smooth and pretty animations.
I'd like to have an event to know when the user zoom-in ou zoom-out, so this way a could make it become full screen
I add a slider to control the progress , but when flip by dragging the progress didn'r work, I need to find the event which flip by dragging, could I use it to rewrite or stop it? Thanks
If it is placed inside the component, the component is initially hidden, and there is no default height when the component is displayed
Hi there,
I use your library and I needed to change some part of code (inside Flipbook.vue file) because of my costumer needs.
How may I build files that are inside dist folder?
Thank you :)
I know I can use the flipbook's zoomIn() method but I've tried attaching a @DBLClick event directly on flipbook component but it seems that it does not fire it for some reason, am I missing something?
<flipbook
ref="container"
@dblclick="zoomFlipbook"
:startPage="page"
:pages="images"
:zooms="zooms"
@zoom-start="setZoom"
@flip-left-start="nextPage"
@flip-right-start="nextPage"
@flip-left-end="updateImagePositions"
@flip-right-end="updateImagePositions">
</flipbook>
in methods I have
zoomFlipbook(){
this.$refs.container.zoomIn();
}
Hi,
As I change page the image is reloaded, it doesn't matter if we have already visited this page. Pages already loaded shouldn't be loaded again.
Could it be fixed??
BTW, wonderful flipbook :).
Hello,
I'm trying to add your component and Maximum call stack size exceeded is raised
In the array of urls I've tried:
[0: "http://localhost:8080/dam/jcr:230baad3-2047-4955-9a30-83428c163b88/100113.jpg"]
[0: null, 1: "http://localhost:8080/dam/jcr:230baad3-2047-4955-9a30-83428c163b88/100113.jpg"]
[0: "dam/jcr:230baad3-2047-4955-9a30-83428c163b88/100113.jpg"]
[0: null, 1: "dam/jcr:230baad3-2047-4955-9a30-83428c163b88/100113.jpg"]
[0: "/dam/jcr:230baad3-2047-4955-9a30-83428c163b88/100113.jpg"]
[0: null, 1: "/dam/jcr:230baad3-2047-4955-9a30-83428c163b88/100113.jpg"]
Can you help me with this please?
`
There is some way to disable the zoom on flipbook click, becoming avaliable only on custom buttons that calls ref action or something like that?
Hi there,
I really like the look of this component and want to use it in my Gridsome project but unfortunately I'm getting errors when I try to build it for production. At first I installed it as a module using yarn and imported into my component as follows:
<script>
import Flipbook from 'flipbook-vue'
export default {
components: {
Flipbook
}
}
</script>
This gave me the following error:
ReferenceError: navigator is not defined
at Object.423 (node_modules/flipbook-vue/dist/flipbook.es.js:78:0)
at __webpack_require__ (webpack/bootstrap:25:0)
at Module.428 (assets/js/page--src-templates-publication-vue.9c43d4d3.js:111:19)
at __webpack_require__ (webpack/bootstrap:25:0)
I then tried changing the import to the following (a suggestion from a Gridsome support group):
<script>
export default {
components: {
Flipbook: () => import("flipbook-vue")
}
}
</script>
But that gave me this error:
Error: render function or template not defined in component: Flipbook
at Qi ([Path to project]\node_modules\vue-server-renderer\build.prod.js:1:66749)
at io ([Path to project]\node_modules\vue-server-renderer\build.prod.js:1:70622)
at ro ([Path to project]\node_modules\vue-server-renderer\build.prod.js:1:70272)
at i ([Path to project]\node_modules\vue-server-renderer\build.prod.js:1:68876)
I've also tried importing globally and bringing in the coffeescript files (I'm not familiar with them so I probably didn't do that right) but to no avail.
Would really appreciate your help on this. FYI, I created a CodeSandbox here (https://codesandbox.io/s/red-lake-j70rk?file=/src/components/BookViewer.vue) for testing also.
Thanks in advance!
Hi, any chance to add also hotspots on pages?
Thanks
is there a possible way to have a jump to page feature?
Hi!
I installed this package on my Nuxt application,
My page:
<template>
<flipbook class="flipbook" :pages="images"></flipbook>
</template>
<script>
export default {
layout: "main",
data(){
return {
images: [
'@/assets/images/famille-1.jpg',
'@/assets/images/famille-2.jpg',
'@/assets/images/famille-3.jpg',
'@/assets/images/famille-4.jpg',
'@/assets/images/famille-5.jpg',
'@/assets/images/famille-6.jpg',
]
}
}
};
</script>
<style scoped>
.flipbook {
width: 90vw;
height: 90vh;
}
</style>
I have no message, no error... but no flipbook :(
Thanks a lot!
Can you support PDF files, HTML Pages, Thumbnails and LastPageSeen ?
That would make your script awesome!!!!
STAY SAFE ---> The world needs developers like you!
For Example
'@/assets/img/pagina14.jpg'
<template>
<div class="conta">
<flipbook class="flipbook" :pages="pages" zooms="1" >
</flipbook>
</div>
</template>
<script>
// @ is an alias to /src
//import UserNavigation
import flipbook from 'flipbook-vue'
import {
mapState,
mapActions,
mapGetters
} from "vuex";
export default {
name: 'dashboard',
components: {
flipbook
},
computed: {
...mapState({
})
},
data() {
return {
pages:[
'@/assets/img/pagina1.jpg',
'@/assets/img/pagina2.jpg',
'@/assets/img/pagina3.jpg',
'@/assets/img/pagina4.jpg',
'@/assets/img/pagina5.jpg',
'@/assets/img/pagina6.jpg',
'@/assets/img/pagina7.jpg',
'@/assets/img/pagina8.jpg',
'@/assets/img/pagina9.jpg',
'@/assets/img/pagina10.jpg',
'@/assets/img/pagina11.jpg',
'@/assets/img/pagina12.jpg',
'@/assets/img/pagina13.jpg',
'@/assets/img/pagina14.jpg'
]
};
},
methods: {
}
}
</script>
<style scoped>
/*@import "../assets/css/global.css";*/
.flipbook {
width: 95vw;
height: 95vh;
}
</style>
I tried the flipbook, works great so far.
I have a few questions:
is it possible to use a "hard cover"
can I tilt the complete book, I want to top of the book a little bit "nearer" to the user
thanks
vue.js:1897 TypeError: this.imageLoader is not a function
at VueComponent.preloadImages (flipbook-vue:29)
at VueComponent.zoomTo (flipbook-vue:29)
at VueComponent.zoomAt (flipbook-vue:29)
at VueComponent.swipeEnd (flipbook-vue:29)
at VueComponent.onPointerUp (flipbook-vue:29)
at invokeWithErrorHandling (vue.js:1863)
at HTMLDivElement.invoker (vue.js:2188)
at HTMLDivElement.original._wrapper (vue.js:7547)
Hi, thank you for this package.
Can you add a loop Props to go to the first page when I continue to flip on the last page?
thanks.
Hello.
Thanks for this nice work.
I have an improvement idea not so hard to do:
When the prop "zooms" contains an array of only one value then the zoom ou/in pointers should disapear.
Also other issue maybe more complicated to solve:
When passing null to the prop "zooms", the flipbook doesn't display anything. It would be nice it could behave like it receive [1] when receiving null.
Great library!
Trying to use multiple books in either in the same .html or in multiple. Currently the pages array is inside the app.js file.
How can I move the pages images to an outside js file or (even better) in the html file to render multiple books?
Keep up the great work!
Super nice work I must say!!
But removing the curve effect with polygon 1 doesn't work.
First of all <flipbook :nPolygons="3" has no effect, I can see that in vue debugger, its still 10.
When I change the default to 1, the effect is gone but while turning the page, the page is strangely tilted.
I'd suggest to make a property with amount of polygones for each slide. Because most books for instance have a hard cover and back.
container
is used so often, and if it is used with the element surrounding Flipbook, it breaks the layout.
See #31.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.