Regions documentation

[closdesign]

Is there documentation on the use of regions? I can not seem to find any here or in our downloaded files.

Thanks.

[blasten]

@closdesign I'm working on that, you should see that part very soon. Please send me your questions to clarify any doubt.

[closdesign]

Are we able to add HTML elements in the regions? I am trying to add an img as an overlay to the "magazine" example. In the example the pages load via javascript from a folder called "pages". Not a problem. But I need to add an img on top of the 3rd page that I am then going to fire a modal to load a video. Pretty much I want to load an image with a class of 'modalFire' or something like that.

Are all of the regions just links? or can the be HTML elements. Or where in the index.html can I add the code something like

$('div.p3').append('<img src="myImg.jpg" style="position:absolute; bottom:0;"/>');

Since the img is being dynamically added to the dynamically added page. How is this possible?

Thanks.

[blasten]

@closdesign Yes, but the pages may or may not be available, meaning that the pages are removed from the HTML, so $('div.p3') would be unreachable. Although Turn.js currently doesn't provide a standard way, it's possible to get to that element.

$($('#flipbook').turn('data').pageObjs[3]).append('<img src="myImg.jpg" style="position:absolute; bottom:0;"/>');

[closdesign]

I figured out a way to do this for our needs. Thanks for the response.

One more thing though. I see we can put regions in the Magazine example where the pages are pulling in the magazine.js from the

img.attr('src', 'pages/' +  page + '.jpg');

Is there a way for me to put the regions on the elements if my pages are directly in the HTML page like

<div class="magazine-viewport">
    <div class="container">
        <div class="magazine">
            <div style="background-image:url(pages/1.jpg)"></div>
            <div style="background-image:url(pages/2.jpg)"></div>
            <div style="background-image:url(pages/3.jpg)"></div>
            <div style="background-image:url(pages/4.jpg)"></div>
            <div style="background-image:url(pages/5.jpg)"></div>
            <div style="background-image:url(pages/6.jpg)"></div>
            <div style="background-image:url(pages/7.jpg)"></div>
            <div style="background-image:url(pages/8.jpg)"></div>
            <div style="background-image:url(pages/9.jpg)"></div>
            <div style="background-image:url(pages/10.jpg)"></div>
            <div style="background-image:url(pages/11.jpg)"></div>
            <div style="background-image:url(pages/12.jpg)"></div>
        </div>
    </div>
</div>

I was a little confused about this. Because when I did it this way, and commented out the

img.attr('src', 'pages/' +  page + '.jpg');

in the magazine.js... the pages showed up as I wanted using the HTML in the page, but the regions did not show up.
I am asking, because I would like to use the solution of adding the divs to the HTML and have the regions used as well. But there is no example of this with the Version 4. Just the Magazine example that pulls the pages through the JS.

Oh yeh also, is there a way to using only 1 regions file and add a property like Page:"5" to the JSON file, so defining the page you want in the single JSON file would tell that section what page it was adding the region to vs. adding separate regions pages per page.

[Gugulethu-Nyoni]

Hi there. I see this is an ancient thread. Bu need help with using regions to fire up modals on the magazine turnjs example. Any help would be much appreciated.