CODEWITHSUNDEEP
javascriptjqueryhtmlcssplugins
Tes3awy
Tes3awy

Reputation: 2266

Flip Image Using jQuery

I am trying to flip images in a simple HTML script. I have found this jQuery plugin which from the examples does what I need to do.

However, When I try to do it in Brackets, nothing happens.

I have read questions with a title like mine, but the effects I want is not in the plugins used in their questions.

This is the code I made is pretty simple (trivial!):

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>Test Flip</title>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

        <script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script>

    </head>

    <body>

        <div id="card"> 
          <div > 
            <img src="http://lorempixel.com/400/400/" id="top">
          </div> 
          <div>
            <img src="http://lorempixel.com/400/300/" id="bottom">
          </div> 
        </div>

        <script type="text/javascript">

            $("#top").flip({axis: 'x', 
                            trigger: 'hover'})

        </script>

    </body>
</html>

Upvotes: 0

Views: 606

Answers (1)

James
James

Reputation: 22246

Make sure you have told the plugin which content within your "card" div you want to appear on the front and on the back. By default the plugin looks for "front" and "back" classnames set as follows:

<div id='card'>
  <div class='front'>This is what appears on the front</div>
  <div class='back'>This is what appears on the back</div>
</div>

Also make sure you invoke the .flip function on the wrapping element (ie, id=='card')

$("#card").flip(params...);

Upvotes: 2

Related Questions