Support and FAQs

How do I get faster support and help? #

We recommend using the contact form on our support page. You can leave a comment in the comment section too, But that will be a bit slower and has a limitation with sharing extra info like screenshots and private information like website URL.

Before contacting us, please make sure that you:

1. Read the documentation carefully,
2. See this Support FAQs

If you didn’t find the answer to your problem, please ask your question on the item discussion page or send us a private message from our support page and we will reply via email.

IMPORTANT! 
For fast troubleshooting, please send us detailed information about the issue. Also, make sure that you don’t forget to send us your site URL where you are using/want to use the item. Please note, that we cannot troubleshoot efficiently from screen-shots.
Please take some time until we respond (usually in 24 – 48 hours).

PDF and FlipBook Loading issues: #

Why is PDF loading slowly? #

By default, the plugin supports partial loading inbuilt. but for that, you need to make sure partial loading is not disabled. Normally, as default, partial loading is supported out of the box. But, in cases where gzip is enabled for PDF then the partial loading won’t work.

Disable gzip for PDF in .htaccess file.

<IfModule mod_headers.c>
    <FilesMatch "\.pdf$">
        RewriteRule ^(.*)$ $1 [NS,E=no-gzip:1,E=no-brotli:1,E=dont-vary:1]
    </FilesMatch>
</IfModule>

Further Reading at StackOverFlow https://stackoverflow.com/questions/9249243/how-to-disable-apache-gzip-compression-for-some-media-files-in-htaccess-file

Also Make sure your PDF is Web optimized. 50MB for 10 pages is not good for web use.. Optimize the PDF and make it as small as 5MB or less. Maybe this can be useful: https://www.iskysoft.com/edit-pdf/optimize-pdf-mac.html

There is a CORS (Cross-Origin) issue and PDF is not loading! #

This occurs when the file and page are in HTTP and https mixed protocol. This is a result of improper https redirection. We recommend using a proper setup to redirect every HTTP request to https to avoid any conflict.

If you are using the file from another domain, make sure you have a proper CORS setup done in another domain. For Apache Server, add following lines in .htaccess file

Header set Access-Control-Allow-Origin "*" 
Header set Access-Control-Allow-Headers "Range" 
Header set Access-Control-Expose-Headers: "Accept-Ranges, Content-Encoding, Content-Length, Content-Range" 

More Info: https://enable-cors.org/server.html

Amazon S3 CORS: #

For anyone wanting to use a static AWS S3 bucket to serve up a PDF flipbook, it works great.  You need to configure CORS on your bucket permissions as follows:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <ExposeHeader>Accept-Ranges</ExposeHeader>
    <ExposeHeader>Content-Encoding</ExposeHeader>
    <ExposeHeader>Content-Length</ExposeHeader>
    <ExposeHeader>Content-Range</ExposeHeader>
    <AllowedHeader>Authorization</AllowedHeader>
    <AllowedHeader>Range</AllowedHeader>
</CORSRule>
</CORSConfiguration>

Official Link: https://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html

Make PDF optimized for web purpose: #

Make sure your PDF is Web optimized. PDFs are normally exported for printing and are of high quality, around 300-600dpi, which a printer requires. But for reading purposes on-screen 72-100dpi is enough. 50MB for 10 pages is not good for web use. Optimize the PDF and make per page average as max as 500KB or less. Maybe this can be useful: https://www.iskysoft.com/edit-pdf/optimize-pdf-mac.html

Customization #

How to change thumb size for lightbox popups? #

You can change the thumb size by using Custom CSS.

._df_thumb{
    width:240px;
    height:360px;
}

.df-outline-item {
    color: red;
}

How to change the color of links in the flipbook? #

/* Make the highlight transparent - no color */

section.linkAnnotation a, a.linkAnnotation, a.customLinkAnnotation, .customHtmlAnnotation, .customVideoAnnotation{
    opacity:0; 
}

/* Make the highlight color red */

section.linkAnnotation a, a.linkAnnotation, a.customLinkAnnotation, .customHtmlAnnotation, .customVideoAnnotation{ 
    background-color: red; 
}

/* Make the hover color red */

section.linkAnnotation:hover a, a.linkAnnotation:hover, a.customLinkAnnotation:hover, .customHtmlAnnotation:hover, .customVideoAnnotation:hover{ 
    opacity:0.4;
    background-color: red; 
}

.df-page-front:before, .df-page-back:before {
    opacity: 0;
}

In the case of a 3D flipbook, use the stiffness setting. Stiffness defines the curve on the page. 0 is absolute flat – close to hard page flat; value 1 is curvy,2 is less curvy, default is 3. higher value will result in flatter look like setting the value to 0

var book_option = {stiffness:0};

If you want that for all book on the page, then use default settings.

DFLIP.defaults.stiffness = 0;