I'm using the turn.js to make a catalog. I grab the pages from the database with PHP and I want to make some control buttons like search specific page. How can I parse the value from the searchbox to take the place of number 10 here $("#flipbook").turn("page", 10);
and run it?
<div class="flipbook-viewport">
<div class="container1">
<div class="flipbook">
<?php
if (isset($_GET['eb_catalogs_id'])){
$catalogos_id = $_GET['eb_catalogs_id'];
$query= "SELECT c_catalog_name FROM eb_catalogs WHERE c_id = $catalogos_id";
$test= $conn->query($query);
$catalogname =$test->fetchColumn();
$query1 = ("SELECT * FROM eb_catalog_".$catalogname."");
$pages = $conn->query($query1);
$i = 1;
foreach($pages as $page){
echo "<div class='p".$i."' style='background-image:url(https://untuneful-carload.000webhostapp.com/img/catalogs/".$catalogname."/".$page['eb_catalog_imgs'].")'></div>";
$i++;
}}else{
echo "nothing";
}
?>
</div>
</div>
</div>
<script type="text/javascript">
function loadApp() {
// Create the flipbook
$('.flipbook').turn({
width:922,
height:600,
elevation: 50,
});
}
// Load the HTML4 version if there's not CSS transform
yepnope({
test : Modernizr.csstransforms,
yep: ['js/turn.js'],
nope: ['js/turn.html4.min.js'],
both: ['css/basic.css'],
complete: loadApp
});
alert("The current page is: "+$("#flipbook").turn("page"));
</script>
here is the code of the page so far.. I know how to make an input field but I dont know how to parse the value of the input field to the function that jumps to the specific page the user wants.
If you pass the page number to next page, you may get it using
$_post
or$_get
and execute it on page load:If you are in the same page and just want to flip the book, you can easily get the number using
val()
: