flippy test

by ramsunvtech

HTML

<link rel="stylesheet" href="http://blog.guilhemmarty.com/wp-content/themes/g/style-flippy.css">
<script src="http://guilhemmarty.com/wp-content/themes/g/js/flippy.min.js"></script>
<div class="flipbox-container box100">
  <div id="flipbox1" class="flipbox">
    <span>Hello !</span>
  </div>
</div>

<a class="btn" id="btn-left" href="#">Left</a>
<a class="btn" id="btn-right" href="#">Right</a>

<div id="divID">
<p id="pID" class="someClass">Some text
<a id="aID" href="#">Some text</a> </p>
</div>

CSS

body {
    background-color: #000;
}
.flipbox, #divID {
    background: none repeat scroll 0 0 #2893B9;
    height: 200px;
    width:200px;
    position: relative;
}

JavaScript

$(document).ready(function() {
  $("#btn-left").on("click",function(e){
        $(".flipbox").flippy({
            color_target: "red",
            direction: "left",
            duration: "750",
            verso: "<span>Woohoo ! \\o/</span>",
         });
         e.preventDefault();
  });
    
  $("#btn-right").on("click",function(e){
        $(".flipbox").flippy({
            color_target: "red",
            direction: "right",
            duration: "750",
            verso: "<div id=\"right-content\"><img src=\"http://placekitten.com/610/300\" alt=\"placeholder\"/></div>",
         });
         e.preventDefault();
    });
});