FlipBook Project
I am Trying to Create a Flipbook Project. Upon double-clicking and opening the html file on Edge Browser, the Flip Effect is not Happening.
*****
In "flipbook.html" file:
*****
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="turn.css" rel="stylesheet" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="turn.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TCE Summit 2022 View Book</title>
</head>
<body>
<div id="flipbook">
<div class="hard"> <img src="images/IMG_20220408_100633.jpg" width="500" /> </div>
<div class="hard"> <img src="images/IMG_20220415_112349.jpg" width="500" /> </div>
<!-- <div> Page 3 </div>
<div> Page 4 </div>-->
...
</div>
</body>
</html>
*****
In "turn.css" file:
*****
#flipbook {
width: 500px;
height: 500px;
margin: 0 auto;
}
*****
In "turn.js" file:
*****
```
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="turn.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#flipbook").turn({
width: 500,
height: 500,
autoCenter: true
});
});
</script>
```
*****
In "images" folder:
*****
IMG_20220408_100633.jpg
IMG_20220415_112349.jpg
*****
In "jquery.js" file
*****
Codes from
a. https://code.jquery.com/jquery-3.6.0.min.js
b. https://code.jquery.com/jquery-1.11.1.min.js
CSS Codes
Reply With Quote
Originally Posted by creative1977
Thanks for your Response. I do not Have a Server to Upload and Supply a Link. Can I Attach and Send ZIPPED Folder to Access the Files? I Look forward to Hearing from you Soon.
Bookmarks