How to open a 3D flipbook using image?

by

We are asked often how to create design similar to what we have on our 3D flipbook WordPress plugin landing page. In that example, when a user clicks on the image, flipbook opens. Plus, the image itself looks like an flipbook, in fact it’s a screen capture of the flipbook.

<img class="wp-image-1156" style="width: px;" src="https://wordpress.dearflip.com/wp-content/uploads/2020/07/flipbook-mockup.png" alt="3D Flipbook">

Click the image above to open a flipbook!

Contents hide
1 How to create a custom popup?
2 How to add a play icon? (version below 2.0)

How to create a custom popup?

Such flipbook opening image is created using the custom type popup. It takes any HTML inside the shortcode.

custom flipbook
Notice how the image is wrapped inside shortcode tags[dflip] and [/dflip]

How to add a play icon? (version below 2.0)

The icon is added using custom CSS.

            ._df_custom.ti-control-play,.play-button.ti-control-play {
                margin-bottom: 0px;
                position: relative;
            }

            ._df_custom.ti-control-play:before,.play-button.ti-control-play:before {
                top: 50%;
                top: 50%;
                position: absolute;
                left: 50%;
                font-size: 40px;
                background: #ffdd11;
                border-radius: 50%;
                padding: 13px 10px 11px 16px;
                box-shadow: 0px 1px 5px #777;
                margin-top: -30px;
                margin-left: -30px;
                display: block;
                color: white;
            }

Leave a Comment