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/
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
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,
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.
container
is used so often, and if it is used with the element surrounding Flipbook, it breaks the layout.
See #31.
I think that clicking on left or right area outside the picture should slide images,
and not enhance them.
If it is placed inside the component, the component is initially hidden, and there is no default height when the component is displayed
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
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?
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,
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?
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
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?
`
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
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
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 :).
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.
Hi, any chance to add also hotspots on pages?
Thanks
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
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.
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
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
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();
}
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
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>
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)
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);
}
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.
is there a possible way to have a jump to page feature?
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?
Hello, I would like to know how do I activate the event when the user starts to flip by dragging? Thanks in advance
Can you support PDF files, HTML Pages, Thumbnails and LastPageSeen ?
That would make your script awesome!!!!
STAY SAFE ---> The world needs developers like 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/ ...
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
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 -
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!
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!
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'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.
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!
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 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!
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.
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 :)
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>
How to put alt text on images?
For accessibility ans SEO
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
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.