Flip (Change) Image (Front Back) using jQuery flip Plugin and CSS

Last Reply 2 months ago By pandeyism

Posted 2 months ago

i want to show  a multiple images of one product from database on webapplication c#.like fornt and back image of mobile phone and zoom in and zoom out.

Posted 2 months ago

Hi Sadia.net,

Refer below sample.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Flip/1.1.2/jquery.flip.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $(".flip").flip({
                trigger: 'click',
                axis: 'y'
            });
        });
    </script>
    <style type="text/css">
        .flip
        {
            height: 199px;
            width: 300px;
            margin: 0 auto;
        }
        .flip img
        {
            width: 300px;
            height: auto;
        }
        .flip .back
        {
            background: #2184cd;
            color: #fff;
            text-align: center;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div class="flip">
        <div class="front">
            <img src="Chrysanthemum.jpg" alt="" height="100px" width="100px" />
        </div>
        <div class="back">
            <img src="Desert.jpg" alt="" height="100px" width="100px" />
        </div>
    </div>
    </form>
</body>
</html>

Screenshot