Greetings ZeroTechz!!!
Its a good flipbook that you are using... The power to control each element on the page is awesome... But I suppose (as earlier) that you will use complete images to populate the pages.
I did a
quick dirty test code and implemented the pages.
Please find attached the file with the changes as an attachment in this reply at the end. But to make things clear, I will try to put into words what I did.
Firstly: As you have seen the code I will directly come to the changes that I have done.
- Code: Select all
<div id='cover'>
</div>
Code above is populated with the image from the preview.css line no.220, which has:
- Code: Select all
#cover {
background: #ffffff url("../images/cover.jpg") no-repeat;
background-size: 100% 100%;
}
Unless this image is supplied the flipbook wont get displayed. This you can see in the documentation here:
http://www.neuearbeit.de/wow_book_plugin/documentation/#pages_The documentation tells us:
A callback function that will be called every time a page is showed. the function will be called with parameters :
book : is a book object, not the jquery element. To access the jquery element use 'book.elem'.
page : page container (obtained from book.pages[index]), is the jquery object created around each page of the book.
pageIndex : the index of the page being showed.
pages
type: array
read only property. Array of page containers of the book. Each page container is a jquery Object.
We know that the array is a collection of similar data types. Each array element is indexed. To access the Array Elements the first index value is needed, rest all elements can be searched for. Primary is the FIRST INDEX. In case of the WOW Book the indexed array element is obtained from "book.pages[index]". When i see your code:
- Code: Select all
<div id='features'>
<div id='mybook' class='feature pagefx softpage'>
<cms:show_repeatable 'flipbook_pages' startcount='0'>
<h1><img src="<cms:show flipbook_image />" alt="" ></h1>
<img src="<cms:thumbnail flipbook_image width='200' height='200' />" />
</cms:show_repeatable>
</div>
<script type="text/javascript" src="js2/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="wow_book/wow_book.min.js"></script>
<link rel="stylesheet" href="wow_book/wow_book.css" type="text/css" />
</div>
I find that you have you have actually removed the reference to the first array element, by removing:
- Code: Select all
<div id='cover'>
</div>
Secondly In you code you are using:
- Code: Select all
<script type="text/javascript" src="js2/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="wow_book/wow_book.min.js"></script>
<link rel="stylesheet" href="wow_book/wow_book.css" type="text/css" />
The books code already uses:
- Code: Select all
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
and hence jQuery 1.7.1 and 1.9.1 conflict, as they are not explicitly handled. Also, the
wow_book.min.js and
wow_book.css are already included and the attempt to reuse them is also creating a conflict. The worst part of the jQuery story is that they will not show any error unless you inspect the elements.
Thirdly: The Wow Book uses a second index marker, to mark the end of the array. this is done using the code:
- Code: Select all
<div class='last_cover'>
<img src="<cms:show last_page />" width="100%" height="100%" />
</div>
Fourthly: Our interest is to add pages between the Start and End Index of the Wow Book... To do that, you have understood very well that the
softpage class needs to be used.
{{{{NOTE: Now I tried using the
hardpage class but it still implements the
softpage class. This doesnot create an issue in Firefox 39.0 that I am using (and I have not performed a CBT, due to less time), but may impact other browsers. So I would suggest sticking to the
softpage class. }}}}
And the code would be:
- Code: Select all
<div class='feature pagefx softpage'>
<img src="image location" />
</div>
Now we will combine all the 4 points from above to get an executing code. This is what I did:
Step1: Get the
#cover to the main page (of the book as an inline style)
Step2: Remove the jQuery (1.7.1) and CSS you have added
Step3: Create editable regions for:
(a) Cover Page (FRONT) Uploading
(b) Cover Page (LAST) Uploading and
(c) Internal Pages of the Book
- Code: Select all
<cms:editable name='cover_page' label='Cover Page' type='image' show_preview='1' preview_width='100' />
<cms:editable name='last_page' label='Last Page' type='image' show_preview='1' preview_width='100' />
<cms:repeatable name='fb_page' label='Flipbook Page' >
<cms:editable name='fb_page_content' label='Flipbeek Pages with content' type='image' show_preview='1' preview_width='100' />
</cms:repeatable>
Display the Editable regions between the
inline style and
<div id='features'>....</div>, like:
Inline Style:
- Code: Select all
#cover {
background: #ffffff url("<cms:show cover_page />") no-repeat;
background-size: 100% 100%;
}
Features Div:
- Code: Select all
<div id='features'>
<!-- Front Cover Page -->
<div id='cover'></div>
<!-- Internal Pages -->
<cms:show_repeatable 'fb_page' >
<div class='feature pagefx hardpage'>
<img src="<cms:show fb_page_content />" />
</div>
</cms:show_repeatable>
<!-- Last Page -->
<div class='last_cover'>
<img src="<cms:show last_page />" width="100%" height="100%" />
</div>
</div> <!-- features -->
I have also attached the PHP file below for reference, with the changes, in zip format and... Please find the same attached...
Hope this helps...
Regards,
GenXCoders
