turn.js
turn.js copied to clipboard
[magazine+slide] /pages use html?
hello i like to use it but i need to ask you or fix: style "MAGAZINE", folder named "pages" there are images (large,thumb,normal), i want to use html and not images. example /magazine/pages/1.html,2.html,3.html....... it's possibile?
I would like to do the same. Is it possible to use html pages instead of images?
@grivap i was waiting for respond from team...i have not new news.. maybe later..
This is old but since it has not been answeed... Yes adding html is possible, of course that brings a new issue into the mix which is screen size, I have implemented it this way:
Basically have your basic style for the pages with an inner container, such container should have no width or height.
On page load you define the width, height (you can also recalculate on window resize).
Once you have the width and height of the page apply to a hidden element (hidden with opacity and probably possitioned off the screen with minus margins);
Then have your content ready, for instance I have something that looks similar to this but adjust as needed
var my_content = [
"<h1>My sample title</h1>",
"<p>My sample content</p>",
"<p>My sample content</p>",
"<p>My sample content</p>",
"<p>My sample content</p>",
"<p>My sample content</p>",
];
var my_max_size = 300;
Then run a loop on it, since the library is based on jquery the sample is jquery also
var my_hidden_block = $(".some_hidden_block");
var my_container_of_pages = $(".some_pages_container");
var block = "";
var test_block = "";
$.each(my_content , function(i, content){
test_block += content;
my_hidden_block.append(test_block);
if(my_hidden_block.height() > my_max_size){
/*
append a new page to turn.js
use the html inside block
*/
my_container_of_pages.append("<div class='my_page_block_class'>" + block + "</div>");
/*
empty both variables, and set the new content to them
*/
block = content;
test_block = content;
} else {
block += content;
}
});
You can do a bunch of things, even dynamic page indexes