turn.js icon indicating copy to clipboard operation
turn.js copied to clipboard

[magazine+slide] /pages use html?

Open manuelsongokuh opened this issue 9 years ago • 3 comments

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?

manuelsongokuh avatar Oct 01 '15 15:10 manuelsongokuh

I would like to do the same. Is it possible to use html pages instead of images?

grivap avatar Dec 20 '15 04:12 grivap

@grivap i was waiting for respond from team...i have not new news.. maybe later..

manuelsongokuh avatar Dec 20 '15 09:12 manuelsongokuh

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

tlacaelelrl avatar May 02 '18 21:05 tlacaelelrl