0

I want to create a book style page turn effect on some images so I decided to use the JQuery plugin, JFlip. The plugin seems to be doing what it is supposed to do except display the image. I have checked the Network tab and the images are being loaded. Also, I can see the Canvas element JFlip has created but it is just a blank space.

I have some code:

<ul id="g1">
    <li>
      <img src="img/proforma.jpg">
    </li>
    <li>
      <img src="img/proforma2.jpg">
    </li>
  </ul>

And some javascript:

<script src="http://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.jFlip.js"></script>
<script type="text/javascript">

$("#g1").jFlip(700,230,{background:"green",cornersTop:false});


</script>
Steve W.
  • 55
  • 13

2 Answers2

0

Turns out that script is so old (2008), you need to include the jQuery migrate script.

JSFiddle

Scripts

<script src="http://code.jquery.com/jquery.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.jFlip.js"></script>

HTML

<ul id="g1">
    <li>
        <img src="http://placehold.it/300x300"/>
    </li>
    <li>
        <img src="http://placehold.it/300x300" />
    </li>
</ul>

Also make sure to wrap your executing code in a document.ready so the images get the change to render.

JS

<script>
$(document).ready(function() {
    $("#g1").jFlip(700,230,{background:"green",cornersTop:false});
});
</script>
Christopher Marshall
  • 10,678
  • 10
  • 55
  • 94
  • Tried it already doesn't seem to work. The images are still hidden and do not display on the page so I am assuming the plug-in is doing its job just not rendering the images. – Steve W. Aug 14 '13 at 20:39
  • Updated answer, you'll also want to wrap your plugin execution on a DOM ready wrapper. If that doesn't work, it _has_ to be an issue with your images since both answers have it working. – Christopher Marshall Aug 14 '13 at 20:55
0

It does work, just the plugins are a bit old. See my code below :

HTML:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js"></script>
  <!--[if IE]><script type="text/javascript" src="http://www.jquery.info/scripts/jFlip/excanvasX.js"></script><![endif]-->

  <script src="http://www.jquery.info/scripts/jFlip/jquery.jflip-0.3.js"></script>
  <script src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <ul id="g1">
    <li>
      <img src="http://keith-wood.name/img/calendar.gif">
    </li>
    <li>
      <img src="http://keith-wood.name/img/calendar.gif">
    </li>
  </ul>
</body>
</html>

JS:

$("#g1").jFlip(700,230,{background:"green",cornersTop:false});

See the full solution here : http://jsbin.com/iqaran/1/edit . Remember to run with js in jsbin

Cheers !

The Dark Knight
  • 5,455
  • 11
  • 54
  • 95