3D FlipBook - Hi, Great new update and thanks for the quick turnaround. Php 5.6 is now supported out of the box. It looks good, and works

Hi!

Thanks for notices.

I) When there are two pages it shows the number of last active side (the right or the left). I thought it will be more comfortable comparing to previous version where it showed the minimum number (the left side). When you go to some page by typing its number it sets active its page side. By default right side is active so you can see its number. Double page mode jump over a page so the active side does not change. Single page mode goes through all the pages so it changes active sides and shows just active side of the book.

II) Single page mode is aimed for mobile devices, landscape books or reading in zoomed mode. Using it with regular book orientation is not comfortable because there a lot of free space on the screen that is not used. You got the idea – it centers the active page to make user life easier.

Ok. I will add management of the settings button in v1.4.

Yes I will do. Unfortunately I had no time to care about an appropriate documentation for templates. If you are interesting you can have a look at projects3d-flip-bookjsdefault-book-view.js and projects3d-flip-book emplatesdefault-book-view.html. The idea is getting some control under template scripts, at least to remove its resources and initialize them with a command instead of automatic initialization when it is inserted into the dom. It will help to avoid memory leaks and some other potential problems when the page is not reloading for long time but a user navigates through the it, open and close books in a modal window.

Best regards,

Ivan.

Hi

thanks for the feedback.

I have been doing some careful testing on your latest plugin and collecting the problems we have found on what we want to do to pass them back in one go:

1. In mode=thumbnail-lightbox, the book image does not appear until after initial cache rendering (e.g. after several seconds), even if you have set an image. e.g. http://www.graham-barnett.co.uk/test1/ if you have set an image the image should show up on the page when the page loads, otherwise it is really confusing (a 5 second wait to see the image !).

2. If I set image to: http://www.graham-barnett.co.uk/wp-content/uploads/2017/02/fuzzymonk.jpg

e.g. http://www.graham-barnett.co.uk/test1/
 The book shows:

   undefined
  

Clicking on the not found image does open the flipbook.

3. With the same flipbook, set to full screen mode=fullscreen does not work – content is not shown at all: http://www.graham-barnett.co.uk/test2/

4. Can you add the ability to add custom css to a page? For example I cannot currently see any way of changing the book opacity over the background when opened except by editing your css.

5. After careful review and discussion, page numbering is definitely off on double pages and should show the first and not the second page number visible.

6. Single page is just very strange where both pages are visible !

Thanks.

BTW – on point 2, setting an image. Strangely if I am logged in it works … it only fails to show the defined image if I am not logged in (or if I have not set an image at all, it also renders OK).

Hi!

Thank you for help in improving the project!

1. I agree there is a problem i fetch the resources consequentially but had to simultaneously, i knew it and was working on it to fix it in v 1.4, but you caught me). There is some trouble on your server also that emphasises my fault: it has very big Time to First Byte (TTFB). Sometimes it is more 20 seconds (or it is lagging now, there is a lot of internal server errors) for 1 request to the database (i guess the role/permission data is cached in the session), Static resources (files) – 400-2000 ms. Ping is good – 70 ms. On my servers TTFB is less 1 sec, it placed in USA. So in the v1.4 it will work in one TTFB or even i will move it to the server side.

2. I can guess that there are some problem with permission to the image (the image post is not published and so on) – i need some details.

3. Just set the book container height and everything will be fine, by default it takes the parent size so – it is zero. See the user manual there are some detailes. And i am going to change this behaviour in the v 1.4 to avoid problem like this in the future.

4. You can add any css class to the book container then customize it. I guess there are plugins that allow you to work with custom styles and scripts on your page. I will research this topic in the future if there is no one i will do.

5. Ok, i agree.

6. Now i have little ideas how to do it better with small efforts and to continue staying in flipbook paradigm. But tomorrow i will try to have a look at this with fresh head).

Best regards,

Ivan.

4. A trick I have seen quite a bit that is easy to implement, is to have a custom ‘CSS’ text entry. This is appended onto your css (if specified) and people can add anything they want to override to this with important.

Hi Ivan,

2. the image is at: http://www.graham-barnett.co.uk/wp-content/uploads/2017/02/fuzzymonk.jpg and can be seen in a non-logged in session. As it is visible by direct URL from an anonymous browser, I am not sure where the image permissioning issue might be. Is it certain jpgs and not a permissioning issue?

3. I am not sure where to set the book container height in wordpress as I do not have access to the container size. Maybe this will need 1.4?

When are you looking to release 1.4?

Many thanks.

Graham

Hi Graham!

2. Yes it is. WordPress does not handle direct requests to the resources. The script save the image ID, then when it is rendering on the client side it fetches some information about the image. WordPress creates the information automaticly when a user upload files. For images it also generates thumbnails of different sizes. So the script can not receive the access to the information, where it can get the thumbnail url.

3. Go to View mode tab in the Insert dialog and write “fb3d-h-500” in the field classes.

I would like to release it this week, but i have to do one important thing that takes 3 days, so it will be next week.

Best regards,

Ivan.

Hi Ivan,

2. Not sure why this is failing. Can you grab the jpg from the URL http://www.graham-barnett.co.uk/wp-content/uploads/2017/02/fuzzymonk.jpg and try that picture for you (when you are not logged in). If this works for you, let me know what to try next.

3. Much better – thanks for that, but http://www.graham-barnett.co.uk/test2/ has a couple of issues. i) The navigation is on the book … how do I move it down? ii) If you gradually make the browser width less a) the nav left right arrows move over the book far too early. How do I give the book more breathing room? b) the nav bar becomes multiple rows far too early – this is especially obvious viewing on a phone where I got nav bar on 5 lines and the book only occupied slightly more than half the screen width. iv) I am set to auto single, but this did not kick in on a mobile phone.

Thanks.

Hi Graham!

2. On my server it works, so to figure out the reason i need access to your web-server.

3. A) Actually i wasn’t thinking about any tools for FB skin customization. I think this question is very specific: in a good way the skin has to match your theme. I am going to add ability for extending base set of skins by means plugins. I will publicate the skin documentation so everyone will be able to create own skins, i hope it will be very useful in the future.

3. B) Now about your questions: i) you need to edit the skin css. ii) a) they move as soon as the book container size is changing, the book does the same but try to save the proportions, so if you want to change it – create an appropriate container the book will repeat its behaviour. b) i knew about such trubles for “short” skins, i am going to take a serious look at skins after v1.5, but i will try to fix this in 1.5. iv) by default it is switched off so auto means “no”, you need to have something like this in the settings:

   
   cmdSinglePage:
   enabled
   +auto
   active
   +auto
   activeForMobile
   -auto
   +yes
   

   if this doesn’t work let me know that means the trouble is much deeper and i will try to research it.

   Best regards,

   Ivan.

Oops B) is B) , But it looks funny).

tag code also does not help) – ‘B’)

Hi Ivan,

I have worked through most things … that you for your help and feedback.

I have had to override my style css in a number of places to get the flips to work well, and I look forward to greater flexibility in flipbook css when you release it.

I have to admit to being completely stuck on how to move the navigation bar down clear of the book. The only way I have found of controlling its position is to alter your css .flip-book .controls to -15px, but this is a bad compromise between how it looks in lightbox and full screen mode. Where should I set this? As I increase the container size this increases the size of the book, and there seems to be no independent way to move it down. e.g. http://www.graham-barnett.co.uk/test2/

Finally, one simple change that would probably help other users- in the wordpress entry dialog if fullscreen is selected, add a default classes=”fb3d-h-500” so that the book will work.

Many thanks.

Yours,

Graham

Hi Graham!

Use the context while you redefine the CSS rules, lightbox has class fb3d-modal and it is the container for a book. The see html elements tree use DOM inspector Ctrl+Shift+I in Chrome or Firefox. Here is the example how redefine controls position everywhere except the lightbox mode:

.flip-book .controls {
  position: absolute;
  bottom: 100px;
  width: 100%;
}
.fb3d-modal .flip-book .controls {
  bottom: 0px;
}

There is not more trouble with fullscreen mode if height is not settled since v1.4 if height less 100px it computes height as 0.75*width.

Best regards,

Ivan.