Change Flip Direction

You can change the flip direction of the wijflipcard using the animation option. By default, the wijflipcard flips horizontally, but you can change it to flip vertically using the direction attribute of the animation.

In Source View

Complete the following steps:

Navigate to the Solution Explorer, expand the Shared folder inside the Views folder, and double-click _Layout to open the file.

Add the following reference within the <head></head> tags:

                        
    <!--RequireJs-->
    <script type="text/javascript" src="http://cdn.wijmo.com/external/require.js"></script>
    <script type="text/javascript">
        requirejs.config({
            baseUrl: "http://cdn.wijmo.com/amd-js/3.20143.59",
            paths: {
                "jquery": "jquery-1.11.1.min",
                "jquery-ui": "jquery-ui-1.11.0.custom.min",
                "jquery.ui": "jquery-ui",
                "jquery.mousewheel": "jquery.mousewheel.min",
                "globalize": "globalize.min"
            }
        });
    </script>

Add the following script between the <head></head> tags to initialize the widget and change its flip direction.

<script id="scriptInit" type="text/javascript">
    require(["wijmo.wijflipcard"], function () {
        $(document).ready(function () {
            $("#flipcard1").wijflipcard({
                animation: {
                    direction: "vertical"
                }
            });
        });
    });
</script>

Add the following markup within the <body></body> tags of the page, just after @RenderBody() to create the wijflipcard:

<div id="flipcard1">
    <div><center>
        <br />
        <img src="http://wijmo.com/img/wijmo.png"><br />
        This is the frontPanel.
    </center></div>
    <div><center>
        <br /><br />
        <br /><br />
        This is the backPanel.
    </center></div>
</div>

Press F5 to run the project.

What You've Accomplished

The wijflipcard will appear as shown in the image below:

Click the wijflipcard to flip it vertically. Click again to flip it back.