Flip on Hover

Use the triggerEvent option to change what causes the wijflipcard to flip. By default, the flip is triggered on a mouse click.

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 set its triggerEvent option:

<script id="scriptInit" type="text/javascript">
    require(["wijmo.wijflipcard"], function () {
        $(document).ready(function () {
            $("#flipcard1").wijflipcard({
                triggerEvent:"MouseEnter"  
            });
        });
    });
</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.