For this module, I am working on creating a flipbook (magazine) using images stored in a JavaScript array. However, I am facing an issue where the images are not loading up properly. Instead of displaying the image, it shows as [object" htmlimageelement]="". I have checked and confirmed that the directory for my images is correct. It seems like there might be something missing in my JavaScript code.
HTML:
<html>
<head>
<title>Flipbook</title>
<link href="jqmodule.css" type="text/css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jqmodule.js" type="text/javascript"></script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>
<script src="jquery.booklet.latest.js" type="text/javascript"></script>
</head>
<body class="body_div">
<div class="container">
<div class="main clearfix">
<div class="custom_wrapper">
<h3>Flipbook</h3>
<div id="mybook" class="booklet"></div>
</div>
</div>
</div>
</body>
</html>
JS:
var heading=['background-size','Using transform and the transform functions','Audio','CSS 1, CSS 2.1, CSS3 ...','The benefits of CSS3'];
var para = new Array();
para[0] = new Image();
para[0].src = 'images/1.jpg';
para[1] = new Image();
para[1].src = 'images/2.jpg';
para[2] = new Image();
para[2].src = 'images/3.jpg';
$(function() {
var str="";
for(var i=0;i<para.length;i++)
{
str+="<div class=\"b-page-blank\"><h1>"+heading[i]+"</h1><img src="+para[i]+"/></div>";
}
$('#mybook').html(str);
$('#mybook').booklet({ name: "Booklet" });
$(".b-counter").click(function(){
if($(this).attr('id')==2||$(this).attr('id')==4)
{
$("#mybook").booklet("next");
}
if($(this).attr('id')==3||$(this).attr('id')==5)
{
$("#mybook").booklet("prev");
}
});
});