Page htmlContent

Each page can have a htmlContent property, which allows you to add any HTML as overlay on a flipbook page. The value of htmlContent is a string, here is an example

    pages: [
            src: "book1/1.jpg", 
            thumb: "book1/thumb1.jpg", 
            htmlContent: '<div>test</div>'

Using htmlContent property you can add any HTML content to page. Inline CSS is used for styling and positioning. For example

htmlContent: '<a href="" style="position: absolute; top: 100px; left: 100px; color: red; font-size: 20px;">Real3D Flipbook</a>'

mp4 Video

htmlContent: '<video class="flipbook-page-item" playsinline="" loop="" autoplay="" muted="" style="top:313px;left:40px;width:230px;height:128px;"><source type="video/mp4" src=""></video>'

Youtube Video

htmlContent: '<iframe class="flipbook-page-item" src="" style="top:454px;left:43px;width:226px;height:126px;" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>'

Link to flipbook page 4

htmlContent: '<a class="flipbook-page-item flipbook-page-item-link internalLink" href="#" data-page="4" style="width: 406px; height: 128px; position: absolute; top: 312px; left: 285px;"></a>'
htmlContent: '<a class="flipbook-page-item flipbook-page-item-link" href="" target="_blank" style="width: 206px; height: 40px; position: absolute; top: 893px; left: 64px;"></a>'

It is possible to add multiple elements, basically any HTML content can be added to pages.

The height of the HTML page overlay is 1000px.

Last updated